Default change detection strategy in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Angular's default change detection strategy behave?

Consider a component using Angular's default change detection strategy. What happens when a parent component updates a property that a child component uses in its template?

A The child component does not update unless manually triggered by a method call.

B The child component automatically updates its view to reflect the new property value.

C The child component updates only if the property is an object and its reference changes.

D The child component updates only if the property is a primitive type.

💡 Hint

Think about how Angular checks for changes by default in the component tree.

Angular's default change detection strategy checks all components in the component tree whenever an event occurs or data changes. This means child components automatically update their views when parent properties change.

❓ state_output

intermediate

What is the output after updating a nested object property with default change detection?

Given a component with a nested object property used in the template, if you update a nested property without changing the object reference, what will Angular's default change detection do?

Angular

export class MyComponent {
  user = { name: 'Alice', age: 30 };

  updateAge() {
    this.user.age = 31;
  }
}

A The template updates to show the new age immediately.

B The template updates only after manually calling detectChanges().

C Angular throws an error due to direct mutation.

D The template does not update because the object reference did not change.

💡 Hint

Remember how Angular's default change detection checks all bindings on every cycle.

Angular's default change detection checks all bindings on every cycle, so even if the object reference stays the same, changes to nested properties are detected and the view updates.

📝 Syntax

advanced

Identify the correct way to set default change detection in an Angular component

Which of the following code snippets correctly sets the default change detection strategy in an Angular component?

A

@Component({ selector: 'app-test', template: '', changeDetection: ChangeDetection.Default })
export class TestComponent {}

B

@Component({ selector: 'app-test', template: '', changeDetection: 'Default' })
export class TestComponent {}

C

@Component({ selector: 'app-test', template: '', changeDetection: ChangeDetectionStrategy.Default })
export class TestComponent {}

D

@Component({ selector: 'app-test', template: '', changeDetectionStrategy: ChangeDetectionStrategy.Default })
export class TestComponent {}

💡 Hint

Check the exact property name and enum usage in Angular component metadata.

The correct property name is changeDetection and the value is the enum ChangeDetectionStrategy.Default. It must be imported from '@angular/core'.

🔧 Debug

advanced

Why does a child component not update after parent property change with default strategy?

A parent component updates a property bound to a child component's input. The child uses the default change detection strategy but its view does not update. What is the most likely cause?

A The child component's input property is not decorated with @Input().

B The child component has a syntax error preventing change detection.

C The parent property was updated asynchronously without triggering Angular's zone.

D The parent updated a nested property without changing the object reference, and the child uses OnPush strategy instead of default.

💡 Hint

Check if Angular knows the property is an input binding.

If the child input property lacks the @Input() decorator, Angular does not detect changes to it, so the view does not update even with default change detection.

🧠 Conceptual

expert

How does Angular's default change detection strategy handle event-triggered updates?

When a user clicks a button in an Angular app using the default change detection strategy, what happens behind the scenes regarding change detection?

A Angular runs change detection only for the component where the event occurred.

B Angular runs change detection only for components with OnPush strategy.

C Angular does not run change detection automatically; it must be triggered manually.

D Angular runs change detection for the entire component tree starting from the root component.

💡 Hint

Think about how Angular detects changes after user interactions.

With the default strategy, Angular runs change detection for the whole component tree starting at the root whenever an event like a click occurs, ensuring all components update as needed.