Inner async not working in Angular template?

Question

I'm relatively new to reactive programming and I'm trying to create an Angular service which can display notifications to the user. So far this is what I have:

https://stackblitz.com/edit/angular-rxjs-notifications?file=app%2Fapp.component.html

But I noticed that when you click the "Queue Notification" button my *ngIf="message$ | async" <div> appears correctly but the inner {{ message$ | async }} text doesn't appear unless you click the button twice in a row without clicking "Clear"

Thanks in advance!

Can you split this into two separate questions? The second one definitely deserves a thread of its own. — Tomasz Kula
– Tomasz Kula, Commented Apr 18, 2018 at 19:37

Tomasz Kula · Accepted Answer · 2018-04-18 19:33:45Z

1

Your first problem can be solved like this.

<div *ngIf="message$ | async as messages" >
  <div>{{ messages }}</div>
</div>

We store the result from the pipe in a local variable called messages. This way you avoid a situation in which the inner async pipe is not called after the outer one emits.

Live demo

answered Apr 18, 2018 at 19:33

Tomasz Kula

16.9k3 gold badges72 silver badges82 bronze badges

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

3 Comments

Kyle V. Over a year ago

I see that your live demo is working but unfortunately in my actual application I am using a third-party popup component where my template looks like this <dx-popup [visible]="message$ | async as message"> with {{ message }} inside that. Is this as operator something special only to *ngIf?

Tomasz Kula Over a year ago

Yes, the as is only allowed in *ngFor and *ngIf. Wrap your component in <ng-container *ngIf="message$ | async as message"> and pass the message as the input.

Tomasz Kula Over a year ago

Glad I could help :)

Collectives™ on Stack Overflow

Inner async not working in Angular template?

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related