Project: codever - File: snippet-details.component.html
Use the async pipe and store it in variable for later use *ngIf="(snippet$ | async) as snippet". Below the complete snippet example with usage included:
<div *ngIf="(snippet$ | async) as snippet" class="card">
<div class="card-body show-hide">
<div class="header-wrapper">
<div class="titles">
<h4 *ngIf='inlist; else hyperLinkTitle' class="card-title">
<span *ngIf="snippet.public; else linkToPrivateSnippet">
<i class="fas fa-eye fa-xs mr-2" title="Public snippet"></i>
<a routerLink="/snippets/{{snippet._id}}/details"
[innerHtml]="snippet.title | highlight: queryText"></a> </span>
<ng-template #linkToPrivateSnippet>
<span>
<i class="fas fa-eye-slash fa-xs mr-2" title="Private snippet"></i>
<a routerLink="/my-snippets/{{snippet._id}}/details"
[innerHtml]="snippet.title | highlight: queryText"></a>
</span>
</ng-template>
</h4>
<ng-template #hyperLinkTitle>
<h4 class="card-title">
<i *ngIf="snippet.public; else linkToPrivateSnippet" class="fas fa-eye fa-xs mr-1"
title="Public snippet"></i>
<ng-template #linkToPrivateSnippet>
<i class="fas fa-eye-slash fa-xs mr-1" title="Private snippet"></i>
</ng-template>
{{snippet.title}} <span *ngIf="snippet.public === false; else publicPill"
class="badge badge-pill badge-light ml-3 font-weight-normal">Private</span>
<ng-template #publicPill>
<span class="badge badge-pill badge-light ml-3 font-weight-normal">Public</span>
</ng-template>
</h4>
</ng-template>
<h6 class="card-subtitle mb-2 text-muted url-under-title">
<span *ngIf="snippet.sourceUrl"><strong>Ref</strong> -
<span
*ngIf="snippet.sourceUrl.startsWith('http:') || snippet.sourceUrl.startsWith('https:'); else justText">
<a href="{{snippet.sourceUrl}}" target="_blank">{{snippet.sourceUrl}}</a>
<sup class="ml-1"><i class="fas fa-external-link-alt"></i></sup>
</span>
<ng-template #justText>
<span>{{snippet.sourceUrl}}</span>
</ng-template>
</span>
</h6>
</div>
</div>
<hr class="title-content-separator">
<app-codelet-card-body [codelet]="snippet" [queryText]="queryText" [inList]="inlist"></app-codelet-card-body>
</div>
</div>
Shared ❤️ from Codever. 👉 use the copy to mine functionality to add it to your personal snippets collection.
Top comments (0)