changeDetection onPush is triggering only on second click

Question

I found some issues with the performance regarding Change detection so I started using onPush from the past few weeks. Everything is fine till now but I donno its behaving weird with p-chips where its working only on second click :(

Stackblitz Working Example enter link description here

Here in stackblitz you can see the name changes on first click with detectChanges but thats not the scenario with p-chips... Can someone help me :)

Tried using settimeout just to check whether its refreshing total view or not but settimeout is also not updating the view

Well actually you shouldnt even need the explicit call for detecting changes, since the changes comes from a user click, which is handled automatically by onPush! But still weird that the values are not reflected in the chips, because if you print the values in the template, you do see that they do get emptied after you press the button the first time.. — callback, Jul 03 '20 at 14:47
Yess donno whats wrong. The values are also getting emptied in this way - click button one time and click inside input box once and the values get cleared. — Gvs Akhil, Jul 03 '20 at 14:49

score 0 · Answer 1 · answered Jul 03 '20 at 14:52

0

You can use setTimeout(() => this._cdRef.detectChanges(), 0); in your emptyArray function. It uses zones and detect changes after it.

answered Jul 03 '20 at 14:52

Anton Marinenko

2,749
1
10
16

score 0 · Answer 2 · answered Jul 03 '20 at 15:20

0

Hi guys I tried all your answers and even settimeout is not working for me. I also dont prefer using settimeout as it does change detection from app component level

This worked for me :). I really cant understand why detectChanges is working for all the rest and only for this p-chips I need to add markForCheck before it to work.

this._cdRef.markForCheck();
this._cdRef.detectChanges();

answered Jul 03 '20 at 15:20

Gvs Akhil

2,165
2
16
33

Even this didn't work in my case. :( – Johar Zaman Aug 22 '23 at 14:07

Cristian Sarghe · Answer 3 · 2020-07-03T14:53:19.387

-1

I believe the statement of this question will help.

I could not find a reason for this happening with OnPush detection strategy, but sending your detectChanges() call back in the queue (making it async) will solve your problem.

You can do that by calling the method in a setTimeout call:

setTimeout(() => this._cdRef.detectChanges(), 0);

Please check the stackblitz demo.

edited Jul 03 '20 at 14:53

answered Jul 03 '20 at 14:50

Cristian Sarghe

782
6
15

@GvsAkhil are you sure? I just tested his code, and it works! – callback Jul 03 '20 at 14:52
Lemme try again – Gvs Akhil Jul 03 '20 at 14:52
I've added a stackblitz link with the change to the answer, you can as well check it there. – Cristian Sarghe Jul 03 '20 at 14:54
@CristianSarghe but do you know why change detection is even needed here? Shouldnt the user initiated events be handled by default by onPush? – callback Jul 03 '20 at 14:55
I tried this solution its working in stackblitz but not in my local machine... Really weird may be issue with p-chips – Gvs Akhil Jul 03 '20 at 14:55
Turns out to be quite an old issue. Take a look at https://github.com/angular/angular/issues/10816 and at the related issues. – Cristian Sarghe Jul 03 '20 at 15:12
this is a hacky way to do it, you should not use such code – rottenbanana Dec 13 '22 at 10:23

changeDetection onPush is triggering only on second click

3 Answers3