CODEWITHSUNDEEP
javascriptangulartypescriptrxjs
mimo
mimo

Reputation: 6817

Angular - Async pipe in ngIf and text binding will not display first emitted value

I have very simple component template:

<button (click)="emitNextValue()">Next Value</button>

<p *ngIf="text$ | async">
  {{ text$ | async }}
</p>

and component code:

export class AppComponent {
  count = 1;
  text$ = new Subject<string>();

  emitNextValue(): void {
    this.text$.next(`Value ${this.count}`);
    this.count += 1;
  }
}

As you can see, the <p> in the template should be displayed only if text$ Subjects emit value. Clicking the "Next Value" button will call next on the subject and thus should show the paragraph.

The problem is that <p> is displayed only on the second click, which I think is incorrect.

Any idea what I am missing, or this is actual bug?

Demo is available on stackblitz.

Upvotes: 1

Views: 1005

Answers (3)

Andrei
Andrei

Reputation: 12001

the subscription happened late. in common case you could make your subscription replay the last event by shareReplay(1) operator or by using ReplaySubject(1) subject. But in your particular case there is a better solution for that

<p *ngIf="text$ | async as text">
  {{ text }}
</p>

ngIf allows to "store" the result of expression which is very usefull for exactly such cases

Upvotes: 3

Picci
Picci

Reputation: 17752

The fact is that the <p> element is created only after the first event is notified.

So, after the first event is notified you have the element in the Dom and therefore also the {{ text$ | async }}. Then, when a second click occurs, a second event is notified and the binding is triggered.

If you substitute Subject with new ReplaySubject<any>(1) you will have the text displayed also after the first click.

The reason is that the ReplaySubject will replay the last value it emitted as soon as it is subscribed. So, even if the text binding occurs after the first event is notified, the value notified is replayed by the subject and therefore shown in the <p> element.

Upvotes: 2

Chellappan வ
Chellappan வ

Reputation: 27293

This is called “late subscriber” problem. This problem occurs when incoming Rx values arrive before the subscription has happened.

If you remove *ngIf directive from html it will work as expected.

<p>
  {{ text$ | async }}
</p>

For More Info

Upvotes: 4

Related Questions