Change Detection In Angular

Change detection is the process by which 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.

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.

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

The entire source can be downloaded from the GitHub

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.

I'm delighted to inform you that with the help of ChatGPT, I have successfully finished my fifth blog post.