Change detection strategies

Change detection is the mechanism that Angular uses internally to detect changes that occur in component properties and reflect this change to the view. It is a non-deterministic process that is triggered on specific events such as when the user clicks on a button, an asynchronous request is completed, or a setTimeout and setInterval method is executed. Angular monkey patches these types of events by overwriting their default behavior using a library called Zone.js.

Every component has a change detector that detects whether a change has occurred in its properties by comparing the current value of a property with the previous one. If there are differences, it applies the change to the template of the component. In the following snippet, when the name input property changes, as a result of an event that we mentioned earlier, the change detection mechanism runs for this component and updates the template accordingly:

@Input() name: string;

...