December 22, 2024
Headlines

Change Detection In Angular

Craig Johnson04 mins

Change detection is how Angular determines whether the data model has changed and needs to update the view accordingly. Angular uses a unidirectional data flow architecture, where data flows from the component to the view. When a component’s data changes, Angular automatically triggers change detection to update the view with the new data.hfl-new-banner

There are two types of change detection strategies in Angular,

  • Default
  • OnPush

Default change detection strategy checks for changes in the entire component tree every time an event occurs, including user input, timer events, and HTTP requests. This can result in performance issues if the component tree is large or the changes are frequent.

OnPush change detection strategy is a performance optimization that checks for changes only when the component’s inputs change or when an event is fired. This strategy can significantly reduce the number of change detection cycles and improve the application’s performance.

To use the OnPush strategy, you need to set the changeDetection property of the component to ChangeDetectionStrategy.OnPush. Additionally, you must ensure that any input properties to the component are immutable, as Angular only 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 how to use the OnPush strategy 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');
    }
}

In this example, the EmployeeComponent component uses the OnPush strategy, and it has an input property called “emp” passed from its parent component.

In conclusion, Angular’s change detection mechanism is vital in keeping the application’s UI up to date with the underlying data model. It enables developers to write efficient code that responds to user input and updates the UI accordingly. By default, Angular uses a zone-based change detection strategy that monitors the entire component tree for changes. However, this approach can lead to performance issues, especially with large applications.

Related News