ngDoCheck for custom change detection in Angular - Mini Project: Build & Apply

Using ngDoCheck for Custom Change Detection in Angular

📖 Scenario: You are building a simple Angular component that tracks a list of tasks. You want to detect changes to the tasks array manually using Angular's ngDoCheck lifecycle hook instead of relying on default change detection.This helps when you want to perform custom checks, like detecting changes inside an array or object that Angular's default change detection might miss.

🎯 Goal: Create an Angular standalone component that holds a list of tasks. Use ngDoCheck to detect when the tasks array changes by comparing its length. When a change is detected, update a message showing the number of tasks.

📋 What You'll Learn

Create a standalone Angular component named TaskListComponent with a tasks array containing exactly these strings: 'Buy groceries', 'Walk the dog', 'Read a book'

Add a variable previousTaskCount to store the previous length of the tasks array

Implement the ngDoCheck lifecycle hook to compare the current length of tasks with previousTaskCount

Update a message string to say 'Task list updated: X tasks' when a change is detected, where X is the current number of tasks

Add a button in the template to add a new task 'New Task' to the tasks array

Display the message and the list of tasks in the template

💡 Why This Matters

🌍 Real World

Custom change detection is useful when working with complex data structures or performance-sensitive apps where Angular's default detection is not enough or too costly.

💼 Career

Understanding ngDoCheck helps developers optimize Angular apps and handle edge cases in change detection, a valuable skill for frontend Angular developers.

1

Create the initial tasks array

Create a standalone Angular component named TaskListComponent. Inside it, create a public array called tasks with these exact strings: 'Buy groceries', 'Walk the dog', and 'Read a book'.

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 create the tasks array exactly with the three strings given.

2

Add previousTaskCount variable

Inside the TaskListComponent, add a public variable called previousTaskCount and set it to the length of the tasks array.

Angular

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

@Component({
  selector: 'app-task-list',
  standalone: true,
  template: ``,
})
export class TaskListComponent {
  tasks = ['Buy groceries', 'Walk the dog', 'Read a book'];
  // Add previousTaskCount variable below
}

Need a hint?

Set previousTaskCount equal to this.tasks.length.

3

Implement ngDoCheck to detect changes

Implement the ngDoCheck lifecycle hook method inside TaskListComponent. Inside it, compare this.tasks.length with this.previousTaskCount. If they differ, update this.previousTaskCount to the new length and set a public string variable message to 'Task list updated: X tasks', where X is the current number of tasks.

Angular

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

@Component({
  selector: 'app-task-list',
  standalone: true,
  template: ``,
})
export class TaskListComponent implements DoCheck {
  tasks = ['Buy groceries', 'Walk the dog', 'Read a book'];
  previousTaskCount = this.tasks.length;
  message = '';

  // Implement ngDoCheck below
}

Need a hint?

Use implements DoCheck and define the ngDoCheck() method. Compare lengths and update message accordingly.

4

Add template with button and display

Add the component template inside the @Component decorator. It should have a button with text Add Task that adds the string 'New Task' to the tasks array when clicked. Below the button, display the message in a paragraph and list all tasks using an unordered list with *ngFor.

Angular

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

@Component({
  selector: 'app-task-list',
  standalone: true,
  template: `
    
  `,
})
export class TaskListComponent implements DoCheck {
  tasks = ['Buy groceries', 'Walk the dog', 'Read a book'];
  previousTaskCount = this.tasks.length;
  message = '';

  ngDoCheck(): void {
    if (this.tasks.length !== this.previousTaskCount) {
      this.previousTaskCount = this.tasks.length;
      this.message = `Task list updated: ${this.tasks.length} tasks`;
    }
  }

  // Add method to add new task below
}

Need a hint?

Use (click)="addTask()" on the button and *ngFor="let task of tasks" to list tasks.