Change Detection

Respond when Angular sets or resets data-bound input properties. The method receives a SimpleChanges object of current and previous property values.

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 the states is different from the other, then something has changed, meaning we need to update (or re-render) the view.

Change Detection is done in two steps

Angular’s change detection is done in two steps, the first one is done by having the developer updating the application model. He can do it by changing the property of a component or emitting an event. Then Angular’s job will be to reflect the state of the model in the view, by re-rendering it. Usually, this means that Angular will update by sending an event and/or by property bindings.

1. Update the application model (developer);

2. Reflect the state of the model in the view (Angular).

The Flow

To be able to properly demonstrate the flow of Angular’s Change Detection, we need to take an example. In Angular, each application is a bunch of components glued together with some Inputs and Outputs to be able to propagate data and model states. Your application is basically composed of what we call a component tree.

If we take a todo application, represented by the graphic above. We have a fairly simple application that has a TodosComponent managing a list of TodoComponent. If we modify this list, by changing the value of the first item of the todos’ list (in yellow), we will have the following flow:

1. The developer is making changes to the model (like a component’s bindings);

2. Angular’s change detection kicks in to propagate the changes;

3. Change detection goes through every components in the component tree (from top to bottom) to check if the model it depends on changed;

4. If Yes, it will update the component;

5. Angular updates the component’s view (DOM).