This document discusses Angular change detection. It begins by asking what change detection is and what causes changes in an Angular application. It then explains that changes can be caused by events, XHR requests, timers, and callbacks. When a change occurs, the ApplicationRef listens to NgZone events to detect the change and re-runs change detection from the root component down. Using immutable objects and Observables can make change detection smarter by only checking parts of the application that actually changed. This improves performance by reducing the number of bindings that need to be checked during each change detection cycle.

1. Angular Change Detection
Cheikh Omar SOW

2. You Should Know About Me
{
fullName: ‘Cheikh Omar SOW’
nickname: ‘cosinus’
company: ‘Coin Afrique’
twitter: ’@cos45sin45’
}

3. Programme
● What’s Change Detection ?
● What causes change ?
● Who notifies Angular ?
● Change Detection
● Smarter Change Detection
● Performance

4. What’s Change Detection ?

5. What causes change ?

6. Basically application state change can be caused by four things:
● Events - click, submit, …
● XMLHttpRequests - Fetching data from a remote server
● Timers - setTimeout(), setInterval()
● Callbacks
There are all asynchronous.

7. Who notifies Angular ?
Hey buddy, a change probably occurred in my app. Can you please check?

8. ApplicationRef do the job by listening NgZones
OnTurnDone event.

9. Change Detection
- Each component has its own change detector
- Change detector tree - performed from top to bottom

10. Smarter Change Detection
Wouldn’t be great if we could tell Angular to only run change detection for the parts of the
application that changed their state ?

11. Immutables and Observables give us guarantees of when something has changed.
- Objects are mutable by default in Javascript (except for primitives)
- Angular run change detection every single time for every component when an event
happens.
This is where immutable data structures come into play.

12. Immutable Objects
- If there’s a change, we get a new reference.
- Reduce the number of checks by setting the change detection strategy to OnPush.

13. Strategy: onPush

14. Observables
- Observables also give us the guarantee that objects can’t change.
- Unlike immutable objects, they don’t give us new references when a change is made.

15. using markForCheck method

16. using markForCheck method

17. Change detection: detach

18. Code outside ZONE

19. Once the change detection run is over,
it’ll restore the OnPush state for entire tree...

20. Performance
Change Detection Time = C * N
- C - time to check a binding
- N - number of bindings
Change Detection Time ~ C * M
- M - number of changed bindings
- M <= N
High expression changes
● Push strategy, immutability, observable
● Start from the leaf

21. Thank You