CODEWITHSUNDEEP
angularngfor
f.khantsis
f.khantsis

Reputation: 3540

Use Template Input Variables outside of NgFor

A common well familiar case:

<div *ngFor="let hero of heroes$ |async">
  <span>{{hero.name}}</span>
</div>

My question is how to have the same behavior when heroes is not an Observable of an array of Heros, but an Observable of singular Heros

<div *???="let hero of hero$ |async">
  <span>{{hero.name}}
</div>

Upvotes: 0

Views: 299

Answers (1)

Saksham
Saksham

Reputation: 9380

You do not need to use a *ngFor directive to parse a single object rather use an variable to assign the async property to it and use that substitute variable inside as

<ng-container *ngIf="hero$ | async as hero">
    {{hero.name}}
</ng-container>

A working example at https://stackblitz.com/edit/angular-async-pipe-with-ngif-else

Upvotes: 2

Related Questions