Dhananjay Kumar

Change Detection is the backbone of the Angular framework, and each component has its own change detector. This article explains change detection strategies and optimizations to help you write highly performant Angular applications.

Angular can detect when data changes in the component, and can re-render the view to display the updated data. Angular makes sure that data in the component and the view are always in sync with each other.

You must have used Angular bindings to display the data from the component or handle events raised on the view. Let us consider the next code listing:

---

@Component({
    selector: 'app-root',
    template: `
  <h2>{{count}}</h2>
  <button (click)='incCount()'>Increment</button>
  `
})
export class AppComponent implements OnInit {
 
    count: number = 10;
    incCount(): void {
        this.count = this.count + 1;
    }
    ngOnInit() {
 
    }
 
}

The above component uses interpolation and event binding to display data and call a function on the click event, respectively. Each time the button is clicked, the value of count increases by 1, and the view gets updated to display the updated data. So, here you can see that Angular can detect data changes in the component, and then automatically re-render the view to reflect the change.

The part of the Angular framework that does this is called the “change detector.” Every component has a change detector that reads the binding on the template and makes sure that the data model and view are in sync with each other. Whenever, for any reason (actually there are three reasons which we cover later in the article), data model changes, it is the change detector that projects the updated data to the view, so that the view and the data model are in sync with each other.

The syncing gets complex when the data model gets updated at runtime. Let’s take a look at the next code listing:

@Component({
    selector: 'app-root',
    template: `
  <h2>{{count}}</h2>
  `
})
export class AppComponent implements OnInit {
 
    count: number = 10;
    ngOnInit() {
        setInterval(() => {
            this.count = this.count + 1;
        }, 100)
 
    }
}

The above component simply updates the value of count in every 100 milliseconds. Here, the count is a data model that is getting updated at runtime, but still the Angular change detector displays the updated value of the count in every 100 milliseconds by re-rendering the view.

So, the part of the Angular framework that makes sure the view and the data model are in sync with each other is known as the change detector.

The change detector checks the component for the data change and re-renders the view to project the updated data.

When Change Detector Runs

Angular assumes that the data in the component or the whole application state changes due to the following reasons, hence it runs the change detector when either of the following happens:

1. An event, such as click or submit, gets fired
2. An XHR is call to work with an API
3. An asynchronous JavaScript function, such as setTimeOut() or setInterval(), gets executed

In the last code example, the component uses a setInterval() asynchronous JavaScript method, which updates the values of the count. Since it’s an asynchronous method, Angular runs the change detector to update the view with the latest value of the count.

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

So, there is something called ngZone in Angular whose responsibility is to inform Angular about any asynchronous operations. We won’t get into the details of ngZone in this article, but you should know it exists.

---

Enjoying Reading so far? Continue reading full article on the Telerik Blog Here:

https://www.telerik.com/blogs/simplifying-angular-change-detection

Thanks for reading.