CODEWITHSUNDEEP
angulartypescriptrxjs
Kyle V.
Kyle V.

Reputation: 4782

Inner async not working in Angular template?

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!

Upvotes: 1

Views: 210

Answers (1)

Tomasz Kula
Tomasz Kula

Reputation: 16837

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

Upvotes: 1

Related Questions