How to iterate over an array in an object with async pipe

Question

I have an object literal album$ that I get asynchronously into my component

album$: Observable<Album> = this._selectedAlbumSandbox.selectedAlbum$;

The Album interface looks as follow and as you see it has an array of Image.

export interface Album {
  id: string;
  name: string;
  caption: string;
  images: Image[];
}

Now, how can I loop over the images array in my template using an async pipe? Something like the following

 *ngFor="let image of album$.images | async"

What i used to d o if thats an option for you is to create a custom component where the list is given as an input parameter. That always works and is way cleaner to read in my opinion — jhen
– jhen, Commented May 29, 2019 at 12:25

Fateh Mohamed · Accepted Answer · 2020-08-07 09:27:58Z

13

try this :

<li *ngFor="let image of (album$ | async)?.images">
 <h1>{{ image }}</h1>
</li>

answered Nov 12, 2017 at 13:22

Fateh Mohamed

21.5k5 gold badges46 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sajeetharan · Accepted Answer · 2017-11-12 13:28:58Z

3

This should work for you with safe navigation operator

<li *ngFor="let image of (album$ | async)?.images ">
  <h1>  {{ image }} </h1>
</li>

answered Nov 12, 2017 at 13:25

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges