Why change detection matters in Angular - See It in Action

Why change detection matters

📖 Scenario: You are building a simple Angular app that shows a list of tasks. Users can add new tasks. You want the app to update the list on the screen automatically when tasks change.

🎯 Goal: Build a small Angular standalone component that holds a list of tasks and a button to add a new task. Use Angular's change detection to update the displayed list when tasks change.

📋 What You'll Learn

Create a standalone Angular component called TaskListComponent.

Use Angular signals to hold the list of tasks.

Add a button that adds a new task to the list when clicked.

Display the list of tasks in the template using Angular's *ngFor.

Ensure the list updates automatically when a new task is added.

💡 Why This Matters

🌍 Real World

Change detection is how Angular knows when to update the screen. Using signals makes your app fast and responsive without manual DOM updates.

💼 Career

Understanding change detection and reactive data is essential for building modern Angular apps that perform well and are easy to maintain.

1

Set up the initial tasks signal

Create a standalone Angular component called TaskListComponent. Inside it, create a signal called tasks initialized with an array containing the strings 'Buy groceries' and 'Walk the dog'.

Angular

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

@Component({
  selector: 'app-task-list',
  standalone: true,
  template: ``,
})
export class TaskListComponent {
  // Your code here
}

Hint

Use signal from Angular to create a reactive list of tasks inside the component class.

2

Add a button to add new tasks

Inside the TaskListComponent, add a method called addTask that adds the string 'New task' to the tasks signal array. Also, add a button in the template with the text Add Task that calls addTask() when clicked.

Angular

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

@Component({
  selector: 'app-task-list',
  standalone: true,
  template: `
    
  `,
})
export class TaskListComponent {
  tasks = signal(['Buy groceries', 'Walk the dog']);

  // Your code here
}

Hint

Use the update method on the signal to add a new task. Bind the button's click event to the addTask method.

3

Display the list of tasks using Angular's *ngFor

In the component template, below the button, use Angular's *ngFor directive to loop over tasks() and display each task inside a <li> element. Wrap the list items inside a <ul>.

Angular

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

@Component({
  selector: 'app-task-list',
  standalone: true,
  template: `
    Add Task
    
       -->
    
  `,
})
export class TaskListComponent {
  tasks = signal(['Buy groceries', 'Walk the dog']);

  addTask() {
    this.tasks.update(tasks => [...tasks, 'New task']);
  }
}

Hint

Use Angular's *ngFor directive to loop over the tasks signal's current value by calling tasks().

4

Complete the component with accessibility and change detection

Add an aria-label attribute with the value Task list to the <ul> element for accessibility. Confirm the component is standalone and uses Angular signals so the list updates automatically when new tasks are added.

Angular

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

@Component({
  selector: 'app-task-list',
  standalone: true,
  template: `
    Add Task
    
      {{ task }}
    
  `,
})
export class TaskListComponent {
  tasks = signal(['Buy groceries', 'Walk the dog']);

  addTask() {
    this.tasks.update(tasks => [...tasks, 'New task']);
  }

  // Your code here if needed
}

Hint

Adding aria-label helps screen readers understand the list. The component is already standalone and uses signals for automatic updates.

Practice

1. Why is change detection important in Angular applications?

easy

A. It updates the user interface when data changes.

B. It compiles the Angular code into JavaScript.

C. It manages routing between pages.

D. It handles HTTP requests automatically.

Solution

1. Step 1: Understand the role of change detection

   Change detection watches for data changes and updates the screen accordingly.

2. Step 2: Compare with other Angular features

   Compiling code, routing, and HTTP handling are separate Angular tasks, not change detection.

3. Final Answer:

   It updates the user interface when data changes. -> Option A

4. Quick Check:

   Change detection = UI updates [OK]

Hint: Change detection means screen updates when data changes [OK]

Common Mistakes:

• Confusing change detection with routing
• Thinking it compiles code
• Assuming it handles HTTP requests

2. Which of the following is the correct way to trigger change detection manually in Angular?

easy

A. this.changeDetectorRef.updateView()

B. this.changeDetectorRef.refresh()

C. this.changeDetectorRef.detectChanges()

D. this.changeDetectorRef.runChange()

Solution

1. Step 1: Recall Angular's ChangeDetectorRef API

   The method to trigger change detection manually is detectChanges().

2. Step 2: Verify method names

   Other options like updateView(), refresh(), or runChange() do not exist in Angular's API.

3. Final Answer:

   this.changeDetectorRef.detectChanges() -> Option C

4. Quick Check:

   Manual trigger method = detectChanges() [OK]

Hint: Use detectChanges() to manually trigger change detection [OK]

Common Mistakes:

• Using non-existent methods like updateView()
• Confusing detectChanges() with refresh()
• Trying to call runChange() which is invalid

3. Consider this Angular component snippet:

export function Counter() {
  const [count, setCount] = useState(0);
  function increment() {
    setCount(count + 1);
  }
  return `Count: ${count}`;
}

What happens if increment() is called but Angular's change detection does not run?

medium

A. The button label stays the same and does not show the updated count.

B. Angular throws a runtime error.

C. The button label updates immediately to show the new count.

D. The component reloads completely.

Solution

1. Step 1: Understand change detection role in UI update

   Change detection updates the screen to reflect data changes like count.

2. Step 2: Analyze effect of no change detection

   If change detection does not run, the UI does not refresh, so the button label stays the same.

3. Final Answer:

   The button label stays the same and does not show the updated count. -> Option A

4. Quick Check:

   No change detection = no UI update [OK]

Hint: Without change detection, UI won't reflect data changes [OK]

Common Mistakes:

• Assuming UI updates automatically without change detection
• Expecting a runtime error
• Thinking component reloads fully

4. You wrote this Angular code:

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

@Component({ selector: 'app-test', template: `
{{value}}
` })
export class TestComponent {
  value = 0;
  constructor(private cdr: ChangeDetectorRef) {}
  update() {
    this.value = 1;
    // Missing change detection trigger here
  }
}

Why does the displayed value not update after calling update()?

medium

A. Angular templates cannot display variables.

B. Change detection was not triggered after changing the value.

C. The component selector is incorrect.

D. The value variable is not declared properly.

Solution

1. Step 1: Identify missing change detection trigger

   The update method changes value but does not call detectChanges() or similar.

2. Step 2: Understand Angular's automatic detection limits

   Sometimes Angular does not detect changes automatically, so manual trigger is needed.

3. Final Answer:

   Change detection was not triggered after changing the value. -> Option B

4. Quick Check:

   Missing change detection = no UI update [OK]

Hint: Always trigger change detection after manual data changes [OK]

Common Mistakes:

• Blaming variable declaration
• Thinking selector is wrong
• Assuming templates can't show variables

5. You have a list of user objects and want to display their names in Angular. You update the list by replacing it with a new array but the UI does not refresh. What is the best way to ensure Angular detects the change?

hard

A. Restart the Angular application.

B. Modify the existing array without replacing it.

C. Use setTimeout to delay the update.

D. Manually call changeDetectorRef.detectChanges() after updating the list.

Solution

1. Step 1: Understand Angular's change detection on object references

   Angular detects changes when object references change or manual detection runs.

2. Step 2: Analyze options for updating the list

   Replacing the array changes reference but sometimes Angular needs manual detectChanges() call to update UI immediately.

3. Step 3: Evaluate other options

   Modifying existing array may not trigger detection; setTimeout delays but is unreliable; restarting app is extreme.

4. Final Answer:

   Manually call changeDetectorRef.detectChanges() after updating the list. -> Option D

5. Quick Check:

   Manual detectChanges() ensures UI updates [OK]

Hint: Call detectChanges() after replacing data arrays [OK]

Common Mistakes:

• Modifying array without changing reference
• Using setTimeout as a fix
• Restarting app instead of fixing detection