How to avoid multiple async pipes with the same Observable source in Angular?

Question

My component has an Observable named state$: how can I avoid repeat myself when I need to access state$.favorites, like the example below?

@Component({
  selector: 'app-example',
  template: `
    <ng-container *ngIf="(state$ | async).favorites.length">
      {{ (state$ | async).favorites.length }}
    </ng-container>
  `,
})
export class ExampleComponent() {
  @Select(state => state.app) state$: Observable<AppState>;
}

Is there any way to assign it to a template variable?

Patricio Vargas · Accepted Answer · 2018-09-20 02:13:45Z

3

You can do the following:

 <ng-container *ngIf="(state$ | async) as state">
      {{ state.favorites.length }}
  </ng-container>

You don't need to check for .length. By doing what I did, you are checking if the observable has arrived and checking if the value is not null.

answered Sep 20, 2018 at 2:13

Patricio Vargas

5,60014 gold badges57 silver badges107 bronze badges

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

1 Comment

gremo Over a year ago

When I use (state$ | async) as state, will state variable be available in the entire template? What about visibility?

Collectives™ on Stack Overflow

How to avoid multiple async pipes with the same Observable source in Angular?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related