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
}

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
}

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
}

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';
  }
}

Hint

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

Practice

1. What does the default change detection strategy in Angular do?

easy

A. Requires manual updates to the view

B. Automatically updates the view when data changes

C. Disables change detection entirely

D. Only updates the view on user interaction

Solution

1. Step 1: Understand default change detection behavior

   The default strategy automatically checks for data changes and updates the view accordingly.

2. Step 2: Compare with other options

   Other options require manual updates or disable detection, which is not the default behavior.

3. Final Answer:

   Automatically updates the view when data changes -> Option B

4. Quick Check:

   Default strategy = automatic update [OK]

Hint: Default means automatic view update on data change [OK]

Common Mistakes:

• Thinking manual update is default
• Confusing default with OnPush strategy
• Believing change detection is disabled by default

2. Which of the following is the correct way to set the default change detection strategy in an Angular component?

easy

A. @Component({ changeDetection: ChangeDetectionStrategy.OnPush })

B. @Component({ changeDetection: 'default' })

C. @Component({ changeDetection: ChangeDetectionStrategy.Default })

D. @Component({ changeDetection: 'Default' })

Solution

1. Step 1: Recall Angular syntax for change detection

   The changeDetection property expects a value from the ChangeDetectionStrategy enum, not a string.

2. Step 2: Identify correct enum usage

   ChangeDetectionStrategy.Default is the correct enum value for default strategy.

3. Final Answer:

   @Component({ changeDetection: ChangeDetectionStrategy.Default }) -> Option C

4. Quick Check:

   Use enum, not string, for changeDetection [OK]

Hint: Use ChangeDetectionStrategy.Default enum, not string [OK]

Common Mistakes:

• Using strings instead of enum values
• Confusing 'default' with 'Default' string
• Mixing OnPush with default strategy

3. Consider this Angular component using the default change detection strategy:

@Component({
  selector: 'app-counter',
  template: `Count: {{count}}`
})
export class CounterComponent {
  count = 0;
  increment() {
    this.count++;
  }
}

What will happen when the button is clicked?

medium

A. An error will occur because change detection is disabled

B. The displayed count will not change until manually refreshed

C. The count will increase but the view will not update

D. The displayed count will increase by 1 automatically

Solution

1. Step 1: Understand default change detection behavior on event

   Default strategy runs change detection automatically after events like button clicks.

2. Step 2: Predict view update

   When increment() updates count, the view updates automatically to show the new count.

3. Final Answer:

   The displayed count will increase by 1 automatically -> Option D

4. Quick Check:

   Default strategy updates view on event [OK]

Hint: Default strategy updates view after events automatically [OK]

Common Mistakes:

• Thinking manual refresh is needed
• Assuming change detection is off
• Believing count changes but view stays same

4. You have this Angular component:

@Component({
  selector: 'app-sample',
  template: `{{value}}`
})
export class SampleComponent {
  value = 10;

  updateValue() {
    this.value = 20;
  }
}

After calling updateValue(), the view does not update. What is the most likely cause?

medium

A. The updateValue method is not called inside Angular zone

B. The default change detection strategy is disabled by mistake

C. The component uses OnPush strategy but input did not change

D. The value property is private and not accessible in template

Solution

1. Step 1: Check default strategy behavior

   Default strategy updates view automatically unless changes happen outside Angular zone.

2. Step 2: Identify cause of no update

   If updateValue() runs outside Angular zone, change detection won't trigger, so view stays old.

3. Final Answer:

   The updateValue method is not called inside Angular zone -> Option A

4. Quick Check:

   Outside Angular zone blocks default detection [OK]

Hint: Changes outside Angular zone don't trigger default detection [OK]

Common Mistakes:

• Assuming default strategy is disabled
• Confusing OnPush input change with default strategy
• Thinking private properties cause no update

5. In a large Angular app, you want to optimize performance by reducing unnecessary view updates. You decide to keep the default change detection strategy but want to limit checks on a specific component. Which approach fits best?

hard

A. Use ChangeDetectorRef.detach() to stop change detection on that component manually

B. Set changeDetection: ChangeDetectionStrategy.Default on that component

C. Use markForCheck() to force detection every time

D. Replace default strategy with OnPush on all components

Solution

1. Step 1: Understand default strategy limits

   Default strategy runs change detection frequently, which can be costly in large apps.

2. Step 2: Identify how to limit detection on one component

   Using ChangeDetectorRef.detach() stops change detection on that component until manually reattached.

3. Step 3: Evaluate other options

   Setting default again does nothing new; markForCheck forces detection; OnPush changes strategy globally, not selectively.

4. Final Answer:

   Use ChangeDetectorRef.detach() to stop change detection on that component manually -> Option A

5. Quick Check:

   Detach stops detection selectively [OK]

Hint: Detach change detector to pause updates on specific component [OK]

Common Mistakes:

• Thinking setting default again limits detection
• Confusing markForCheck with stopping detection
• Assuming OnPush is selective per component