Angular Change Detection

💫 The "magic glue" that connects the view and the model, keeping them both in sync.

Angular Change Detection is one of the most complex topics in software engineering and obviously in Angular as it is relying on that a lot. It can definitely be compared to the "magic glue" that connects the view and the model, keeping them both in sync".

On a broader scale, it is a mechanism built into Angular that allows Angular to decide what actions can be performed when the state of the app changes. The good news is that most of the time, developers do not have to deal with change detection manually.

However, if you find yourself caught in a loop, the only way to simplify your journey is to follow specific strategies, for example OnPush and trigger change detection manually if you need to.

There are four ways you can trigger change detection manually. Let’s look at them in detail:

tick() on **ApplicationRef **that activates change detection for the entire application by staying consistent and respectful to the strategy component of the change detection.

**detectChanges() **on ChangeDetectorRef runs change detection on a current component.

markForCheck() on ChangeDetectorRef controls change detection through the marked components where the OnPush strategy has been set.

run() **on **NgZone that allows you to execute a function inside the Angular zone. This function, and all asynchronous operations in that function, trigger change detection automatically at the correct time.

Here is a very handy tip, which can simplify your life.