Store result from async pipe in variable
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:
<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//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//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>
<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="" target="_blank"></a>
<sup class="ml-1"><i class="fas fa-external-link-alt"></i></sup>
</span>
<ng-template #justText>
<span></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>
Reference - https://angular.io/api/common/AsyncPipe
Shared with from Codever.
👉 Use the Copy to mine
functionality to copy this snippet to your own personal collection and easy manage
your code snippets.
Codever is open source on Github ⭐🙏
