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

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.

CodePudding user response：

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

CodePudding user response：

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.