Polyglot, autodidact. OSS author and contributor. Addicted to writing code, seeking my next 'fix'. Love communicating with an audience whose eyes don't glaze over when I get to the 'good parts'.
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.
Polyglot, autodidact. OSS author and contributor. Addicted to writing code, seeking my next 'fix'. Love communicating with an audience whose eyes don't glaze over when I get to the 'good parts'.
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...
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.
👍