Change detection in Angular

 What is change detection?

The basic mechanism of the change detection is to perform checks against two states, one is the current state, the other is the new state. If one of this state is different of the other, then something has changed, meaning we need to update (or re-render) the view.

Change Detection means updating the view (DOM) when the data has changed.

How Change Detection Works

A change detection cycle can be split into two parts:

• Developer updates the application model
• Angular syncs the updated model in the view by re-rendering it

Let us take a more detailed look at this process:

• Developer updates the data model, e.g. by updating a component binding
• Angular detects the change
• Change detection checks every component in the component tree from top to bottom to see if the corresponding model has changed
• If there is a new value, it will update the component’s view (DOM)

The following GIF demonstrates this process in a simplified way:

Reference: https://www.mokkapps.de/