Angular Change detection

What we need to know about (quick resume) ?

• It’s a process which Angular uses to check your application state’s change, and if any DOM needs to be updated.
• Each component in Angular has its changeDetection.
• It can be triggered manually or through an asynchronous event:

ChangeDetectionStrategy:

- Default (dirty checking):

Angular walks throught your components from top to bottom, it checks every single one components, to find changes, then update the view.

- OnPush:

• It deactivate automatic change detection.
• It compares with object reference instead of value by Input(when data is not mutate directly by component).
• Angular will check only the tree if the reference passed to the component is changed. It will be most performant with RxJS, which emit new values without changing object’s reference.

Change detection execution:

- detectChanges:

When there is thing changed on your model or class, which has not reflected the view, you need to notify Angular to detect those changes manually by using detectChanges() method.

However, on large applications, manually traggering change detection too often may ruin the performance.

- markForCheck:

By using this method, component will be flagged (dirty flag) to notify angular that it has been updated and needs to be check for changes. It’ll mark the component and its ancestors as dirty.

Each method can have an impact in your application performance, because they re-render the view in a deferent ways.

Remember that change detection is an essential part of Angular’s rendering cycle, and Angular’s change detection mechanism is highly optimized. It’s important to strike a balance between performance optimizations and maintaining the desired functionality of your application.

I hope it’ll help you to understand more about change detection.Thank you for reading and don’t hesitate to add comment if you have any remarks or suggestion. ;) .

Connect with me on Medium ✍ https://medium.com/@sophieelsa