Angular Change Detection – Part 1: Checking Views

Change detection is a crucial concept in Angular applications as it helps in detecting changes in the application state and updating the view accordingly. In this tutorial, we will discuss the various ways of performing change detection in Angular, starting with view checking.

View checking is the default change detection mechanism used by Angular to detect changes in the components’ properties. When a component’s properties are changed, Angular checks the view associated with that component to see if any changes need to be reflected in the view.

Here’s how view checking works in Angular:

1. Angular’s Change Detection Cycle: Angular follows a change detection cycle to detect changes in the application state. When an event occurs in the application, such as a user input or a timer event, Angular triggers change detection to check for any changes in the application state.

2. Component Properties: Each component in an Angular application has properties that define the state of the component. When these properties are changed, Angular triggers change detection to update the view.

3. Change Detection Strategy: Angular provides two change detection strategies – Default and OnPush. The default strategy uses view checking to detect changes in the components’ properties, while the OnPush strategy uses reference checking to detect changes.

4. Automatic Change Detection: By default, Angular automatically performs change detection for all components in the application. This means that whenever a component’s properties are changed, Angular automatically updates the view associated with that component.

5. Zone.js: Angular uses Zone.js to intercept asynchronous events in the application and trigger change detection. Zone.js helps in detecting changes caused by asynchronous events such as timer events, XHR requests, and DOM events.

To demonstrate view checking in Angular, let’s create a simple component that displays a counter and updates the view whenever the counter value is changed. Here’s the code for the component:

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

@Component({
  selector: 'app-counter',
  template: `
    <h2>Counter: {{ counter }}</h2>
    <button (click)="increment()">Increment</button>
  `
})
export class CounterComponent {
  counter: number = 0;

  increment() {
    this.counter++;
  }
}

In this component, we have a counter property that stores the current value of the counter. We also have an increment method that increments the counter value whenever the button is clicked.

Now, let’s add this component to the app module and run the application:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { CounterComponent } from './counter.component';

@NgModule({
  declarations: [
    AppComponent,
    CounterComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

In the app component HTML file, we can add the counter component:

<app-counter></app-counter>

Now, when you run the application and click the "Increment" button, you will see that the counter value is updated in the view. This is because Angular is using view checking to detect changes in the counter property and update the view accordingly.

In the next part of this tutorial, we will discuss the OnPush change detection strategy and how it differs from view checking. Stay tuned for more on Angular change detection!