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" 

Answer 1

try this :

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