Let’s Deep Down To Change Detection In Angular Part-1

Changes Detection in angular is a very hot topic and, nowadays everyone talking about change detection in angular, Who is responsible for detecting the changes, Is there someone who detects every change and updates the view, how the angular change detection affects our Application performance.

So Today in this blog we are going to explore everything related to change detection.

So whenever we heard change detection in angular in general terms we think when we trigger any event then angular detects the change. Ex: button click.

Right, so the first question is-

What is change detection?

Change detection is the process through which Angular checks to see whether your application state has changed and if any DOM needs to be updated.

It’s top to bottom approach.

In Angular, every component has its own change detector.

Angular runs a change detector when data changes in the component, and re-renders the view to display the updated data. Angular makes sure that data in the view and the component must always in sync with each other.

Now the second question arises When will the change detector run is there any limit?

When does Change Detector Run

It runs the change detector:

• When you click or submit, an event is fired.
• An XHR is called to work with an API.
• setTimeOut() or setInterval() like asynchronous JavaScript function, gets executed.

Now the question arises: Who notifies Angular of these asynchronous operations?

Who notifies Angular of these asynchronous operations?

In angular there is a ngZone library that is responsible is to informing Angular about any asynchronous operations.

We will not go into detail about ngZone as this is full one topic for discussion. I will share the separate blog on ngZone.

Now in the above, I describe its top-to-bottom approach known as the Change detection Tree.

What is Change Detection Tree?

A change Detection Tree is a directed graph tree that detects changes in a unidirectional way. By this angular detects changes and re-renders the view.

In first question, I explained that

• Change detection run from top to bottom
• Every component has its own change detector.

So let’s understand the meaning of angular every component has its own change detector.

ChangeDetectorRef in Angular

The change detector can be referred to inside the component using the ChangeDetectorRef service, and if required you can inject the ChageDetectorRef in a component by making a reference to it in the constructor as shown in the code:

export class AppComponent implements OnInit {


  constructor(private cd: ChangeDetectorRef) {

    console.log(this.cd);

  }


  ngOnInit() {

     // write your logic here

  }
}

It provides various APIs to work with the change detector like detach(), detectChanges(), and many more. We will also explore these APIs.

The change detector always works from top to bottom in the angular, and even if an event gets fired in any children node component, Angular always runs the change detector from the top component. For example, in the above change detector tree, if an event gets fired in the component CC-121, which is the bottom node component in the tree, Angular still runs the change detector from the top component node and for all the components.

Now you are thinking this causes a performance issue, However, that is not true, because of

1. An angular component tree is a directed graph as I explained in the definition, which means there is a unidirectional flow of the change detector from root to bottom.
2. There is no circular or bidirectional traversal of the change detector tree because Angular is aware of the direction in which the tree must be traversed.
3. the change detection tree gets stable after signals passed.

In AngularJS we need to perform binding with a generic function that updates the view but in angular as every component have own change detector so we don’t need to bind.

The definition of the generated change detector class is very particular for a specific component; hence JavaScript VM can optimize it for better performance.

Let’s Recap:

So today in this blog we learn how angular detects changes.

NgZone is the one that detects all the asynchronous changes and updates angular to update the view.

The change detection tree run from top to bottom and the change detected tree is a directed graph.

It detects changes in a unidirectional way, if any change is triggered in children then the change detector will also run in parents’ components.

So In this blog, I believe I have covered plenty of things so in my next blog we will learn how can we reduce the number of checks and how can we optimize the performance of our Applications.

For more updates on such topics, please follow our LinkedIn page- Frontend Studio.