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>

Does the component recieve @Input() from an other component ?, if not remove ChangeDetection.OnPush() o you can use async pipe. — JSingh
– JSingh, Commented Sep 29, 2017 at 18:27
@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. — Imran Latif
– Imran Latif, Commented Sep 29, 2017 at 18:57
If the component didn't receive @Input then it won't trigger the changes. Can you post your template — JSingh
– JSingh, Commented Sep 29, 2017 at 18:58
@JSingh, just updated the question. Please see the updated one. Thanks. — Imran Latif
– Imran Latif, Commented Sep 29, 2017 at 18:59
Try changing [class.processing] to <div [ngClass]="{'processing': isLoading}"></div> — JSingh
– JSingh, Commented Sep 29, 2017 at 19:01

masimplo · Accepted Answer · 2018-01-09 11:28:13Z

2

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

answered Jan 9, 2018 at 11:28

masimplo

3,8042 gold badges34 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Change Detection in HttpClient

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related