What is Change Detection in Angular?

Change detection is the strategy by which Angular decides what actions to be performed when the state of the app or component is changed

Deepak Pandey
Oct 9, 2019 · 3 min read

The changes to the state of the components can be triggered by user interactions like clicking a button, changing input values, or by HTTP requests, etc.

For example, if we have a component as below …

import { Component } from "@angular/core";@Component({selector: "app-root",template: `Title: {{title}}<button (click)="changeTitle()">Change title</button>`,styleUrls: ["./app.component.css"]})export class AppComponent {title = "CodeSandbox";changeTitle(){this.title = "I am the new title."}}

… we can see that when a user interacts with the application by clicking the Change Title button, the title property of the component is changed.

Every component in Angular is provided with a change detector that tracks the change of state.

As we all know, the Angular application is a tree of components. So for each component in the tree, we have an associated change detector created at application startup.

So we end up with a tree of change detectors.

When the state of one of the components changes, no matter where it is in the tree, a change detection pass is triggered for the whole tree. This happens because Angular scans for changes from the top component node, all the way to the bottom leaves of the tree.

So as the size of application increases, this check may lead to slow performance. But there are ways we can customize the change detection strategy.


Optimizing the Change-Detection Strategy

Now, if we want to make this component change only when its input attribute changes, we just need to change the change-detection strategy by setting its changeDetection attribute to ChangeDetectionStrategy.OnPush.

The default value for the changeDetection attribute is ChangeDetectionStrategy.Default.

In the below component, we changed the changeDetection attribute of the component decorator to ChangeDetectionStrategy.OnPush.

import { Component, Input, ChangeDetectionStrategy } from "@angular/core";import { IAlert } from "./alert.model";@Component({
selector: "app-alert",
template: `<div class="alert" [ngClass]="alert.type">{{ alert.message }}</div>`,
styles:[
`.alert{
position: relative;
padding: .75rem 1.25rem;
margin-bottom: 1rem;
border: 1px solid transparent;
border-radius: .25rem;
},
.success {
color: #155724;
background-color: #d4edda;
border-color: #c3e6cb;
},
.error {
color: #721c24;
background-color: #f8d7da;
border-color: #f5c6cb;
}`],
changeDetection: ChangeDetectionStrategy.OnPush
})
export class AlertComponent {
@Input() alert: IAlert;
}
export interface IAlert {
type: string;
message: string;
}

On changing the changeDetection to ChangeDetectionStrategy.OnPush, the change-detection cycle will only be run for this component when one of its input attributes change. Changing other components of the tree doesn’t trigger this component’s change detector.

Note: Angular uses the Zone.js library to detect changes and run the change-detection cycle.

Zones will automatically tell Angular something has changed under the most common scenarios when:

• A DOM event occurs (e.g., click, change, etc.)

• An HTTP request is resolved

• Timer is triggered (e.g., setTimeout, setInterval)

Better Programming

Advice for programmers.

Deepak Pandey

Written by

Angular | Vue | Angular JS | JavaScript | Python | Java

Better Programming

Advice for programmers.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade