Default change detection strategy in Angular - Mini Project: Build & Apply

Default Change Detection Strategy in Angular

📖 Scenario: You are building a simple Angular app that shows a list of tasks. Each task has a name and a status. You want to understand how Angular updates the view automatically when the data changes using the default change detection strategy.

🎯 Goal: Build an Angular standalone component that displays a list of tasks. Update the task status and see how Angular's default change detection updates the view automatically.

📋 What You'll Learn

Create a standalone Angular component named TaskListComponent

Initialize a list of tasks with exact names and statuses

Add a variable to track the index of the task to update

Use a method to update the status of a task in the list

Use Angular's default change detection to reflect changes in the template

💡 Why This Matters

🌍 Real World

This project shows how Angular automatically updates the user interface when data changes, which is common in real apps like to-do lists, shopping carts, or dashboards.

💼 Career

Understanding Angular's default change detection is essential for frontend developers to build responsive and efficient web applications.

1

Set up the initial tasks list

Create a standalone Angular component named TaskListComponent. Inside it, create a public property called tasks which is an array of objects. Each object should have name and status properties. Initialize tasks with these exact entries: { name: 'Laundry', status: 'Pending' }, { name: 'Groceries', status: 'Done' }, and { name: 'Homework', status: 'Pending' }.

Angular

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

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

Need a hint?

Remember to use standalone: true in the component decorator and create the tasks array exactly as shown.

2

Add a variable to track the task index to update

Inside TaskListComponent, add a public property called selectedTaskIndex and set it to 0. This will track which task's status you want to update.

Angular

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

@Component({
  selector: 'app-task-list',
  standalone: true,
  template: ``,
})
export class TaskListComponent {
  tasks = [
    { name: 'Laundry', status: 'Pending' },
    { name: 'Groceries', status: 'Done' },
    { name: 'Homework', status: 'Pending' }
  ];

  // Your code here
}

Need a hint?

Add a number property selectedTaskIndex and set it to zero.

3

Add a method to update the task status

Inside TaskListComponent, add a public method called updateStatus that takes no parameters. This method should change the status of the task at selectedTaskIndex to 'Done'.

Angular

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

@Component({
  selector: 'app-task-list',
  standalone: true,
  template: ``,
})
export class TaskListComponent {
  tasks = [
    { name: 'Laundry', status: 'Pending' },
    { name: 'Groceries', status: 'Done' },
    { name: 'Homework', status: 'Pending' }
  ];

  selectedTaskIndex = 0;

  // Your code here
}

Need a hint?

Write a method updateStatus that sets the status of the task at selectedTaskIndex to 'Done'.

4

Add template to display tasks and update status

In the template of TaskListComponent, add an unordered list (<ul>) that uses *ngFor to display each task's name and status. Below the list, add a button with the text Mark Selected Task Done that calls the updateStatus() method when clicked.

Angular

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

@Component({
  selector: 'app-task-list',
  standalone: true,
  template: `
    
  `,
})
export class TaskListComponent {
  tasks = [
    { name: 'Laundry', status: 'Pending' },
    { name: 'Groceries', status: 'Done' },
    { name: 'Homework', status: 'Pending' }
  ];

  selectedTaskIndex = 0;

  updateStatus() {
    this.tasks[this.selectedTaskIndex].status = 'Done';
  }
}

Need a hint?

Use *ngFor to loop over tasks and display each task's name and status. Add a button that calls updateStatus() on click.