Deciding on a Change Detection Strategy

Change detection is the mechanism that Angular uses internally to detect changes that occur in component properties and reflect these changes to the view. It is triggered on specific events such as when the user clicks a button, an asynchronous request is completed, or a setTimeout and setInterval method is executed. Angular monkey patches these event types 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 component template. In the product detail component, 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.

However, there are cases where this behavior is not desired, such as components ...