Why change detection matters in Angular - Challenge Your Understanding

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when Angular change detection runs?

Consider an Angular component with a property count displayed in the template. What does Angular do during change detection?

Angular

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

@Component({
  selector: 'app-counter',
  template: `<p>Count: {{ count }}</p>`
})
export class CounterComponent {
  count = 0;
}

A Angular only updates the <code>count</code> property in the component class, not the template.

B Angular checks if <code>count</code> changed and updates the displayed value if needed.

C Angular waits for user input before updating any displayed values.

D Angular re-renders the entire page regardless of changes.

💡 Hint

Think about how Angular keeps the screen in sync with data.

Angular's change detection compares the current and previous values of properties used in the template. If a value changed, Angular updates the DOM to show the new value. This keeps the UI and data in sync efficiently.

❓ state_output

intermediate

What is the displayed output after a property change?

Given this Angular component, what will be shown in the browser after calling increment() once?

Angular

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

@Component({
  selector: 'app-clicker',
  template: `<button (click)="increment()">Click me</button><p>Clicks: {{ clicks }}</p>`
})
export class ClickerComponent {
  clicks = 0;
  increment() {
    this.clicks++;
  }
}

A Clicks: 1

B Clicks: 0

C Clicks: undefined

D Clicks: NaN

💡 Hint

What happens when you increase a number and Angular updates the view?

When increment() runs, it adds 1 to clicks. Angular detects this change and updates the displayed text to show the new value.

📝 Syntax

advanced

Which code snippet correctly triggers change detection after async update?

You want to update a component property after a delay and have Angular update the view. Which code correctly triggers change detection?

Angular

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

@Component({
  selector: 'app-async',
  template: `<p>Message: {{ message }}</p>`
})
export class AsyncComponent {
  message = 'Waiting...';

  ngOnInit() {
    setTimeout(() => {
      this.message = 'Done!';
      // What else is needed here?
    }, 1000);
  }
}

A No extra code needed; Angular detects the change automatically.

B Call <code>ChangeDetectorRef.detectChanges()</code> inside the timeout callback.

C Call <code>NgZone.run(() =&gt; { this.message = 'Done!'; })</code> inside the timeout.

D Call <code>ApplicationRef.tick()</code> after setting <code>message</code>.

💡 Hint

Angular knows about setTimeout and runs change detection after it.

Angular patches browser APIs like setTimeout to run change detection automatically after the callback. So no manual trigger is needed here.

🔧 Debug

advanced

Why might the view not update after changing a nested object property?

Given this Angular component, why might the displayed name not update after changing user.name?

Angular

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

@Component({
  selector: 'app-user',
  template: `<p>Name: {{ user.name }}</p><button (click)="changeName()">Change Name</button>`
})
export class UserComponent {
  user = { name: 'Alice' };

  changeName() {
    this.user.name = 'Bob';
  }
}

A Angular requires manual calls to <code>detectChanges()</code> after any property update.

B The template syntax is incorrect and does not bind to <code>user.name</code>.

C The <code>changeName</code> method is never called because the button has no click event.

D Angular does not detect changes to object properties unless the object reference changes.

💡 Hint

Think about how Angular compares old and new values for objects.

Angular's default change detection checks object references, not deep property changes. Changing a nested property without changing the object reference may not trigger view update.

🧠 Conceptual

expert

Why is OnPush change detection strategy beneficial?

What is the main advantage of using the ChangeDetectionStrategy.OnPush in Angular components?

A It forces Angular to check the component and all children on every event, ensuring fresh data.

B It disables change detection completely, so the component never updates.

C It reduces change detection runs by only checking when input references change, improving performance.

D It automatically detects deep changes inside objects without changing references.

💡 Hint

Think about how Angular decides when to check components with OnPush.

OnPush tells Angular to skip checking the component unless its input properties change by reference or an event inside it happens. This reduces unnecessary checks and boosts performance.