Change Detection Techniques In Angular

In this article, We will explore Change Detection Mechanisms in Angular.

The Basic mechanism of change Detection is to perform a check against two-state,one is the current State, the other is a new state if any of the states is different from others then something has changed, so we need to update or re-render the view.

Change Detection can be performed in two steps:-

1. Update The Application Model
2. Reflect the state of the model in view

• In the First step, the developer updates the application model. He can do it by changing the component’s property or emitting an event , the second step is Angular job’s to reflect the state of the model in the view, by re-rendering it.

How Change Detection Works

Angular performs change Detection on all the components from top to bottom whenever a change detects in the app.

For Example:-

1. The developer is making changes to the model (like a component’s bindings).
2. Angular’s change detection kicks in to detect the changes.
3. Change detection goes through every component in the component tree (from top to bottom) to check if the model depends on change.
4. If Yes, it will update the component.
5. Angular updates the component’s view (DOM).

the way angular perform change detection is from the top and continuing until it reaches the bottom.

Change Detection Strategies

there are two types of change detection strategies,the Default, and the onPush.

1. ChangeDetectionStrategy.Default

• • • In order to check whether the view should be updated, Angular needs to access the new value and compare it with the old one and check where there is a need to update the view or not.
    • by default, angular makes no assumption on what the component depends so it has to be conservative and will check every time if something has changed or not.
    • more precisely it will perform checks for each browser event, XMLHttpRequest (XHR), timmers, and promises.
    • to perform change detection by default add the following line in the component declaration in your app.component.ts or in the component where you want to use change detection

  changeDetection: ChangeDetectionStrategy.Default

1. ChangeDetectionStrategy.onPush

• • • when we are using onPush we basically say angular not to perform change detection by its self, it should rely on some trigger to be fired by itself(Component) or by its child component.
    • to perform change detection onPush add the following line in a component declaration in your app.component.ts or in the component where you want to use change detection.

  changeDetection: ChangeDetectionStrategy.OnPush

  • • and add this line in the constructor

  private _changeDetectorRef: ChangeDetectorRef

Methods Of Change Detection

1. markForCheck()

   • • • add below line where you want to trigger change detection mostly used with onPush Strategy.

     this._changeDetectorRef.markForCheck();

2. detach()

   • • A detached view is not checked until it is reattached. Use with detectChanges() to implement local change detection checks.

     • this._changeDetectorRef.detach()

3. detectChanges()

   • • • to make view detect every time use the

     this._changeDetectorRef.detectChanges();

4. checkNoChanges()

   • • • Checks the change detector and its children, and throws if any changes are detected.
       • Mostly use in development mode to verify that running change detection doesn’t introduce other changes.

     this._changeDetectorRef.checkNoChanges();

5. reattach()

   • • • Re-attaches the previously detached view to the change detection tree.

     this._changeDetectorRef.reattach();

Hope this article helps you guys