Local variable in template for async pipe (angular 2+)

Question

my template have something like...

<div> {{ (profile$ | async).username}}</div>
<div> {{ (profile$ | async).email}}</div>

Is there a way to assign (profile | async) to a local variable? having to type it out for every single field is bad for readability.

Thanks.

question from:https://stackoverflow.com/questions/39682546/local-variable-in-template-for-async-pipe-angular-2

Answer 1

The best approach would be to create a new component, e.g. in this case app-profile and to pass profile | async to that component. Inside the component you can name the variable whatever you like.

<app-profile [profile]="profile | async"></app-profile>

Another way of doing it would be to use *ngIf with the 'as' syntax

<ng-container *ngIf="profile | async as p">
   <div> {{ p.username }}</div>
   <div> {{ p.email }}</div>
</ng-container>