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
}

Need a 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
}

Need a 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']);
  }
}

Need a 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
}

Need a hint?

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