Async pipe not updating HTML

this might be a common problem but somehow i keep hitting wall with it

HTML

@if(data$ | async; as data) {
<span>{{data.status}}</span>
}


TS

dataId = input.required<string>();
data$ = EMPTY;
ngOnInit() {
if(this.dataId()) {
data$ = this.getData(this.dataId()).pipe(tap(console.log));
}
}


We make a change in another component, we can see in the console that getData() emits original value followed by the updated value

ready
"Data change submited" // this occurs with restful call has been made
not-ready


In HTML it still renders ready and doesn't update it.

Now my two options are:

1. trigger change detection manually through CDR
2. convert to signal and let the signal handle it

Im not a fan of either options:

1. Excessive boilerplate code just to trigger change detection
2. Takes away the simplicity of AsynPipe managing the subscription and forces you to conver into signal

Are there any other options?

Continue reading...