changeDetection onPush is triggering only on second click

Viewed 436

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

3 Answers

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.

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

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();
Related