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.land. 👉 Use the Copy to mine functionality to copy this snippet to your own personal collection and easy manage your code snippets.

Subscribe to our newsletter for more code resources and news

Adrian Matei

Adrian Matei
Life force expressing itself as a coding capable human being

Lazy loading modules in Angular with loadChildren

Lazy loading modules in Angular with loadChildren code snippet Continue reading

Highlight liquid code in Jekyll blog post

Published on November 22, 2021

Access path parameters in angular navigation

Published on November 22, 2021