NG0100: ExpressionChangedAfterItHasBeenCheckedError: with signals

I randomly have this error ( that I understand the importance of after research ) but I don't understand how to avoid it.

I have an api service with a number Signals initially set to 0 that I update to +1 at each http query, and update -1 at each response/error

showProgressBar = signal(0)
...

public request( request: object ): Observable<any> {
this.showProgressBar.update(t => t+1)
return this.#_http.post<any>...

}


and a simple componant that check the signals and display a loading animation on the screen when >0

@Component({
selector: 'app-api-loading',
standalone: true,
imports: [MatProgressBarModule],
templateUrl: `
@if ( _api.showProgressBar()>0 ) {
<mat-progress-bar mode="query" class="bottomOfScreen"/>
}
`,
styleUrl: './api-loading.component.scss'
})
export class ApiLoadingComponent {
_api = inject(ApiService)

}



I don't understand how I can have the control on when the signal is changed or not. I mean how can I prevent the signal to be change out of the lifecycle of the component to prevent this error ???

Continue reading...