Angular Template: How to bind RXJS Observable and use its properties from a deeper nested object?

Question

We have a clear solution from here Angular Template: How to bind RXJS Observable and read its properties?

  <ng-container *ngIf="( game$ | async ) as game">
    <h3>{{ game.name }}</h3>
    <h3>{{ game.description }}</h3>
  </ng-container>

However, in case if we need a 0th player of a 0th command from the example above as a property from a deeper nested object, should we do it this way

  <ng-container *ngIf="( game$ | async )?.command?.[0]?.players?.[0] as player">
    <h3>{{ player.name }}</h3>
    <h3>{{ player.description }}</h3>
  </ng-container>

or there is a better way?

score 2 · Answer 1 · answered Dec 09 '22 at 09:37

You can use some so "bizarro" as

<ng-container *ngIf="( game$ | async ) as game">
    <h3>{{ game.name }}</h3>
    ------------------------
    <h3>{{ game.command?.[0]?.players?.[0].name }}</h3>
    <h3>{{ game.command?.[0]?.players?.[0].description }}</h3>
</ng-container>

Or create a temporaly variable using *ngIf

<ng-container *ngIf="( game$ | async ) as game">
    <h3>{{ game.name }}</h3>
    ------------------------
    <ng-container *ngIf="game.command?.[0]?.players.[0] 
                         || {name:'',description:''} as player">
    <h3>{{ player.name }}</h3>
    <h3>{{ player.description }}</h3>
</ng-container>

Or create a new Observable based in game$ using map

players$=this.game$.pipe(
   map(x=>x.command?.[0]?.players?.[0])
))

Angular Template: How to bind RXJS Observable and use its properties from a deeper nested object?

1 Answers1