Triggering detection manually in Angular - Mini Project: Build & Apply

Triggering Change Detection Manually in Angular

📖 Scenario: You are building a simple Angular component that shows a counter. The counter updates when you click a button. However, the update happens outside Angular's usual detection, so you need to trigger change detection manually to update the view.

🎯 Goal: Create an Angular standalone component that displays a counter starting at 0. Add a button that increments the counter by 1 when clicked. Use manual change detection to update the displayed counter value.

📋 What You'll Learn

Create a standalone Angular component named ManualDetectComponent.

Initialize a count variable with 0.

Add a button that calls an increment() method when clicked.

Use Angular's ChangeDetectorRef to trigger change detection manually inside increment().

Display the current count value in the template.

💡 Why This Matters

🌍 Real World

Sometimes Angular does not detect changes automatically, especially when updates happen outside Angular's zone (like in third-party libraries or manual event handlers). Manually triggering change detection ensures the UI stays in sync.

💼 Career

Understanding manual change detection is important for Angular developers to optimize performance and handle edge cases where automatic detection does not work.

1

Set up the component and initial count

Create a standalone Angular component named ManualDetectComponent with a count variable initialized to 0. Import Component from @angular/core and set standalone: true in the component decorator.

Angular

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

@Component({
  selector: 'app-manual-detect',
  standalone: true,
  template: `
    Count: {{ count }}
  `
})
export class ManualDetectComponent {
  // Your code here
}

Need a hint?

Remember to set count = 0 inside the component class and use standalone: true in the decorator.

2

Import ChangeDetectorRef and inject it

Import ChangeDetectorRef from @angular/core and inject it in the component constructor as private cdr: ChangeDetectorRef.

Angular

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

@Component({
  selector: 'app-manual-detect',
  standalone: true,
  template: `
    Count: {{ count }}
  `
})
export class ManualDetectComponent {
  count = 0;

  constructor(private cdr: ChangeDetectorRef) {
    // Your code here
  }
}

Need a hint?

Use Angular's dependency injection to get ChangeDetectorRef in the constructor.

3

Add increment method and button in template

Add an increment() method that increases count by 1. Update the template to include a button with (click)="increment()" that calls this method.

Angular

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

@Component({
  selector: 'app-manual-detect',
  standalone: true,
  template: `
    Count: {{ count }}
    Increment
  `
})
export class ManualDetectComponent {
  count = 0;

  constructor(private cdr: ChangeDetectorRef) {}

  // Your code here
}

Need a hint?

Define the increment() method and add a button in the template that calls it on click.

4

Trigger change detection manually inside increment

Inside the increment() method, after increasing count, call this.cdr.detectChanges() to manually trigger Angular's change detection and update the view.

Angular

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

@Component({
  selector: 'app-manual-detect',
  standalone: true,
  template: `
    Count: {{ count }}
    Increment
  `
})
export class ManualDetectComponent {
  count = 0;

  constructor(private cdr: ChangeDetectorRef) {}

  increment() {
    this.count += 1;
    // Your code here
  }
}

Need a hint?

Call this.cdr.detectChanges() right after updating count to refresh the view.