DEV Community

Discussion on: Change Detection: Getting in the (Angular) Zone!

Collapse
 
evanplaice profile image
Evan Plaice • Edited

The issue here is chartData is a complex data type (ie reference based).

Angular can't see the change b/c it's watching the observable's reference. Not, it's internal data.

If you changed chartData to update with the contents of the observable rather than the observable itself, you won't need to touch the zone.

That's why you see the spread-shallow-copy pattern used a lot in React.

chartData = [...newChartData]

It creates a new complex object and -- therefore -- a new reference value, guaranteeing change detection is triggered.

Here's an article that digs deeper, specifically the "How does the default change detection mechanism work?" section

blog.angular-university.io/how-doe...

Collapse
 
scooperdev profile image
Stephen Cooper

Hi Evan, thanks for your explanation. I left out large chunks of the code but I am using the spread operator in my NgRx reducer for exactly the reason you mentioned. So the chartData observable is a new reference each time in my component.

Collapse
 
evanplaice profile image
Evan Plaice

👍