Change Detection In Angular

Introduction

• Angular checks if the data model has changed and whether the view has to be updated as a result using change detection. Data travels from the component to the view according to the unidirectional data flow architecture used by Angular. Angular immediately starts change detection when a component’s data changes so that the view may be updated with the updated data.

There are two types of change detection strategies in Angular,

• Default
• OnPush

Default : Every time an event, such as user input, timer events, or HTTP requests, takes place, the default change detection technique examines for changes throughout the whole component tree. Performance problems may arise if the component tree is extensive or the changes happen often.

OnPush : As a speed enhancement, the OnPush change detection technique only looks for changes when an event is fired or when the component’s inputs change. The performance of the application may be enhanced and the number of change detection cycles can be greatly decreased using this method.

You must set the component’s changeDetection attribute to ChangeDetectionStrategy in order to utilise the OnPush strategy. OnPush. Moreover, because Angular only checks for modifications by reference and not by value, you must verify that any input attributes to the component are immutable.

I have used the below tools to prepare this tutorial.

• Angular CLI – 15.1.6
• Node: 18.14.0
• NPM – 9.3.1
• Visual Studio Code

Here is an illustration of an Angular component using the OnPush strategy :

import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
import { Observable } from 'rxjs';
import { EmployeeService } from './employee.service';
import { EmployeeInterface } from './employeeinterface'

@Component({
    selector: 'app-employee',
    templateUrl: './employee.component.html',
    styleUrls: ['./employee.component.scss'],
    //comment this line and see the difference in rendering
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class EmployeeComponent {
    @Input('emp')
    emprecord!: EmployeeInterface;
    filter$: Observable < string > | undefined;
    constructor(private empService: EmployeeService) {
        this.filter$ = empService.filter$;
    }
    checkRender(): boolean {
        console.log('checking Render!!');
        return true;
    }
    changeText(): void {
        this.emprecord.name = 'Name changed from inside';
    }
    changeFilter(): void {
        this.empService.filter$.next('active');
    }
}

The EmployeeComponent component in this illustration employs the OnPush technique and receives the input property “emp” from its parent component.

Conclusion :

• In order to keep the application’s user interface (UI) in sync with the underlying data model, Angular’s change detection method is essential. It enables programmers to create effective code that reacts to user input and changes the user interface (UI) accordingly. By default, Angular watches the whole component tree for changes using a zone-based change detection method. This strategy, meanwhile, could cause performance problems, especially with big applications.