DEV Community

Cover image for How to store result from async pipe in angular
Adrian Matei for Codever

Posted on • Edited on • Originally published at codever.dev

2 1

How to store result from async pipe in angular

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>

Enter fullscreen mode Exit fullscreen mode

Shared ❤️ from Codever. 👉 use the copy to mine functionality to add it to your personal snippets collection.

Sentry blog image

How I fixed 20 seconds of lag for every user in just 20 minutes.

Our AI agent was running 10-20 seconds slower than it should, impacting both our own developers and our early adopters. See how I used Sentry Profiling to fix it in record time.

Read more

Top comments (0)

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

👋 Kindness is contagious

Explore a sea of insights with this enlightening post, highly esteemed within the nurturing DEV Community. Coders of all stripes are invited to participate and contribute to our shared knowledge.

Expressing gratitude with a simple "thank you" can make a big impact. Leave your thanks in the comments!

On DEV, exchanging ideas smooths our way and strengthens our community bonds. Found this useful? A quick note of thanks to the author can mean a lot.

Okay