How To Achieve Change Detection In Angular

Change detection is how Angular evaluates whether the data model has changed and whether the view needs to be updated. Data moves from the component to the view in Angular’s unidirectional data flow design. When the data in a component changes, Angular uses change detection to immediately update the view with the new data.

There are two types of change detection strategies in Angular,

• Default
• OnPush

Every time an event happens, the default change detection technique examines for changes in the whole component tree, including user input, timer events, and HTTP requests. If the component tree is vast or the changes are frequent, this might cause performance concerns.

The OnPush change detection approach is a performance enhancement that only checks for changes when the component’s inputs change or an event occurs. This method has the potential to drastically reduce the number of change detection cycles while also improving application performance.

To utilise the OnPush strategy, set the component’s changeDetection property to ChangeDetectionStrategy. OnPush. Moreover, any input attributes to the component must be immutable, as Angular simply checks for changes by reference, not by value.

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’s an example of the OnPush approach in action in an Angular component:

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 example employs the OnPush approach and receives an input property named “emp” from its parent component.

Finally, Angular’s change detection system is essential for keeping the application’s Interface in sync with the underlying data model. It allows developers to design efficient code that responds to user input and modifies the user interface as needed. Angular by default has a zone-based change detection technique that scans the full component tree for updates. This strategy, however, might cause performance concerns, especially with big applications.

Thanks