Angular Change Detection in HttpClient

Question

I have an HttpClient service which is updating the data at backend. During the processing at backend, I' am displaying a loading state by doing this.isLoading = true, and after the successfully processing, I' am removing that loading state in subscribe() by using this.isLoading = false;.

Now I changed my code to use ChangeDetectionStrategy.OnPush and the loading state is not vanishing anymore. I know the change detection in ChangeDetectionStrategy.OnPush occurs when an input property is changed or when an object reference is changed during an event on component etc.

In my case, do I have to manually call ChangeDetectorRef.detectChanges() to trigger change detection or am I missing something?

Edit

Just to clear, I' am using this.isLoading to show/hide loading state by adding/removing class on an HTML element accordingly. For example,

<div [class.processing]="isLoading"></div>

Kiruna

Does the component recieve @Input() from an other component ?, if not remove ChangeDetection.OnPush() o you can use async pipe. – Planetesimal

@JSingh, thanks for commenting. No the component didn't receive @Input, it maintains a local variable isLoading (boolean) to show/hide loading state. I think async won't work with boolean? I have updated the question, please view again. – Kiruna

If the component didn't receive @Input then it won't trigger the changes. Can you post your template – Planetesimal

@JSingh, just updated the question. Please see the updated one. Thanks. – Kiruna

Try changing [class.processing] to <div [ngClass]="{'processing': isLoading}"></div> – Planetesimal

Same effect. They are essentially the same. This has something to do with change detection not getting triggered in subscribe(). – Kiruna

Answer 1

When setting ChangeDetectionStrategy to OnPush, change detection will run ONLY when an input has changed. Since you are subscribing to an observable and changing a local variable, angular will not be notified of this change so you have to let it know yourself. The recommended way is to use ChangeDetectorRef.markForCheck() which will perform change detection on the tree branch above your component

There is more is more info on this in this great thoughtram article

And an excellent presentation here by Pascal Precht

Sexy