Performance impact of change detection in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

How does Angular's default change detection strategy affect component updates?

Consider an Angular component using the default change detection strategy. What happens when a parent component updates a property that a child component uses?

Angular

ParentComponent template:
<child-component [data]="parentData"></child-component>

ChildComponent:
@Input() data: string;

// Default change detection strategy

// Parent updates parentData on button click

A The child component never updates unless manually triggered by the developer.

B The child component always runs change detection and updates its view whenever the parent changes, even if the input value is the same.

C The child component updates only if the parent component calls detectChanges() explicitly.

D The child component only updates if the input value changes by reference, ignoring primitive value changes.

💡 Hint

Think about how Angular's default change detection checks all components on every event.

With the default change detection strategy, Angular runs change detection for all components in the component tree whenever an event happens. This means the child component will always check and update its view if needed, even if the input value has not changed.

❓ state_output

intermediate

What is the effect of using OnPush change detection strategy on a component's update behavior?

Given a component with ChangeDetectionStrategy.OnPush, which of the following triggers the component to update?

Angular

Component decorator:
@Component({
  selector: 'my-comp',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class MyComp {
  @Input() data: string;
}

A The component updates only when its input reference changes or an event inside the component occurs.

B The component updates only when detectChanges() is called manually.

C The component updates on every change detection cycle regardless of input changes.

D The component never updates after initial rendering.

💡 Hint

OnPush optimizes by checking inputs by reference and internal events.

OnPush strategy tells Angular to check the component only when its input properties change by reference or when an event inside the component triggers change detection. This reduces unnecessary checks and improves performance.

📝 Syntax

advanced

Identify the correct way to detach change detection manually in Angular

Which code snippet correctly detaches change detection for a component using ChangeDetectorRef?

A constructor(private cd: ChangeDetectorRef) { this.cd.pause(); }

B constructor(private cd: ChangeDetectorRef) { this.cd.stop(); }

C constructor(private cd: ChangeDetectorRef) { this.cd.detach(); }

D constructor(private cd: ChangeDetectorRef) { this.cd.disable(); }

💡 Hint

Look for the official method name to stop change detection.

The detach() method on ChangeDetectorRef stops Angular from running change detection for that component until reattach() is called.

🔧 Debug

advanced

Why does a component with OnPush not update when a nested object property changes?

Given a component with ChangeDetectionStrategy.OnPush and an input object, why does updating a nested property not update the view?

Angular

Parent template:
<child-comp [data]="parentData"></child-comp>

Parent component:
parentData = { name: 'Alice', age: 30 };

// Later update
this.parentData.age = 31;

A Because the parent component must use ChangeDetectorRef.markForCheck() after mutation.

B Because Angular does not detect any changes inside objects regardless of strategy.

C Because the child component must call detectChanges() manually after mutation.

D Because OnPush only checks for input reference changes, mutating a nested property does not change the object reference.

💡 Hint

Think about how OnPush compares input values.

OnPush strategy triggers change detection only when the input reference changes. Mutating a nested property keeps the same object reference, so Angular does not detect the change.

🧠 Conceptual

expert

What is the main performance benefit of using OnPush change detection in Angular?

Why does using ChangeDetectionStrategy.OnPush improve performance in large Angular applications?

A It reduces the number of components Angular checks by only running change detection when input references change or events occur inside the component.

B It disables change detection entirely, so Angular never updates the component after initial render.

C It forces Angular to check components more frequently to catch changes faster.

D It caches component views to avoid re-rendering even when inputs change.

💡 Hint

Consider how Angular decides when to check components with OnPush.

OnPush strategy optimizes performance by limiting change detection to only when input references change or internal events happen, avoiding unnecessary checks of components that have not changed.

Practice

1. What is the main purpose of Angular's change detection?

easy

A. To manage routing between pages

B. To compile TypeScript code

C. To handle user authentication

D. To update the view when data changes

Solution

1. Step 1: Understand change detection role

   Change detection in Angular watches for data changes to update the screen accordingly.

2. Step 2: Identify the correct purpose

   Updating the view when data changes matches the role of change detection.

3. Final Answer:

   To update the view when data changes -> Option D

4. Quick Check:

   Change detection updates view [OK]

Hint: Change detection updates the screen on data change [OK]

Common Mistakes:

• Confusing change detection with routing
• Thinking it compiles code
• Mixing it with authentication

2. Which syntax correctly sets the change detection strategy to OnPush in an Angular component?

easy

A. @Component({ detectionStrategy: OnPush })

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

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

D. @Component({ changeDetectionStrategy: 'OnPush' })

Solution

1. Step 1: Recall correct property name

   The property to set change detection is 'changeDetection' inside @Component decorator.

2. Step 2: Use correct enum value

   The enum value for OnPush is ChangeDetectionStrategy.OnPush, not a string or other property name.

3. Final Answer:

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

4. Quick Check:

   Use changeDetection with ChangeDetectionStrategy.OnPush [OK]

Hint: Use changeDetection: ChangeDetectionStrategy.OnPush exactly [OK]

Common Mistakes:

• Using wrong property name like detectionStrategy
• Passing 'OnPush' as string
• Confusing Default with OnPush

3. Given this Angular component with OnPush strategy:

  @Component({
    selector: 'app-counter',
    template: `{{ counter }}`,
    changeDetection: ChangeDetectionStrategy.OnPush
  })
  export class CounterComponent {
    @Input() counter = 0;
  }

What happens if the parent updates counter by setting the same number value again?

medium

A. The component view updates because input changed

B. The component view does not update because value is unchanged

C. Angular throws an error due to OnPush

D. The component view updates only after manual detectChanges call

Solution

1. Step 1: Understand OnPush behavior with inputs

   OnPush triggers change detection only if input references change or events occur.

2. Step 2: Same primitive value means no change

   Setting the same number value again does not change the input reference or value.

3. Final Answer:

   The component view does not update because value is unchanged -> Option B

4. Quick Check:

   OnPush skips unchanged input values [OK]

Hint: OnPush skips updates if input value unchanged [OK]

Common Mistakes:

• Assuming view always updates on input set
• Thinking OnPush causes errors
• Believing manual detectChanges is always needed

4. You have an Angular component using Default change detection. The component updates slowly. Which fix improves performance?

medium

A. Switch to OnPush change detection strategy

B. Remove all @Input properties

C. Use setTimeout to delay updates

D. Disable change detection entirely

Solution

1. Step 1: Identify performance issue cause

   Default strategy checks all components frequently, which can slow large apps.

2. Step 2: Apply OnPush to reduce checks

   OnPush limits checks to when inputs change or events happen, improving speed.

3. Final Answer:

   Switch to OnPush change detection strategy -> Option A

4. Quick Check:

   OnPush improves performance by fewer checks [OK]

Hint: Use OnPush to reduce unnecessary checks [OK]

Common Mistakes:

• Removing inputs breaks data flow
• Using setTimeout doesn't fix detection speed
• Disabling detection breaks UI updates

5. In a large Angular app, you want to optimize change detection. You have a parent component with Default strategy and a child with OnPush. The parent updates a complex object property but mutates it instead of replacing it. What is the impact on the child component's view update?

hard

A. Child view does not update because OnPush checks object reference

B. Child view updates because parent changed object property

C. Child view updates only if detectChanges is called manually

D. Child view updates automatically regardless of mutation

Solution

1. Step 1: Understand OnPush and object mutation

   OnPush triggers on input reference changes, not internal mutations.

2. Step 2: Mutation keeps same object reference

   Mutating object property does not change the reference, so OnPush skips update.

3. Step 3: Child view remains unchanged without manual trigger

   Without new reference or manual detection, child view won't update.

4. Final Answer:

   Child view does not update because OnPush checks object reference -> Option A

5. Quick Check:

   OnPush needs new object reference to update [OK]

Hint: OnPush tracks object references, not internal mutations [OK]

Common Mistakes:

• Assuming mutation triggers update
• Thinking child updates automatically
• Forgetting manual detectChanges option