Angular signals: Template displays both "if" and "else" content

I have a strange issue within my Angular application.

In my component, I have a signal for loading and a data which is fetched with HTTPClient:

loading = signal(false);

competition = toSignal(
this.competitionId$.pipe(
switchMap(id => this.competitionService.getCompetitionById(id)
.pipe(tap((v) => {
this.loading.set(false)
console.log('loaded', v)
}))
),
catchError(err => this.handleFetchError(err)),
),
{ initialValue: undefined }
);


This is the only place where "loading" is modified.

In the template, I wanted to check it works with:

@if(loading()) {
Loading ...
} @else {
Loaded !
}



But strangefully, "Loaded !" is always displayed while "Loading ..." disappears when the data is actually loaded.

I suppose this comes from SSR, but I don't find how to fix that.
Thank you for your help

Continue reading...