Angular: Change Detection Strategies

Angular change detection is a specific application of change detection strategies that are used in web development frameworks such as Angular. It involves detecting changes in the state of a component or directive and updating the view accordingly. Here are some of the key change detection strategies used in Angular:

1. Default change detection:

By default, Angular uses a change detection strategy called “zone.js” to detect changes in the component’s state. This strategy involves checking for changes in the component’s properties and input values and then updating the view accordingly. It is based on the “dirty checking” approach, which involves repeatedly checking for changes until no more changes are detected. For example, consider the following component:

import { Component } from '@angular/core';

@Component({
  selector: 'app-example',
  template: `
    <div>{{ message }}</div>
    <button (click)="changeMessage()">Change Message</button>
  `
})
export class ExampleComponent {
  message = 'Hello World!';

  changeMessage() {
    this.message = 'Hello Angular!';
  }
}

In this component, the message property is initialized to “Hello World!” and displayed in a <div> element. When the user clicks the "Change Message" button, the changeMessage() method is called, which updates the message property to "Hello…