[Solved] Consider this Angular component snippet:items = [1, 2, 3]; ngDoCheck() { if (this.items.length !== this.... } }What will be logged if items.push(4) is called and Angular runs change detection? | Angular

Angular - Lifecycle Hooks

Consider this Angular component snippet:

items = [1, 2, 3];

ngDoCheck() {
  if (this.items.length !== this.oldLength) {
    console.log('Items changed');
    this.oldLength = this.items.length;
  }
}

What will be logged if items.push(4) is called and Angular runs change detection?

AError: oldLength is undefined

BNothing is logged

CItems changed twice

DItems changed

Step-by-Step Solution

Solution:

Step 1: Check initialization of oldLength
The code uses this.oldLength but it is never initialized, so it's undefined initially.
Step 2: Runtime behavior after items.push(4)
this.items.length becomes 4, and 4 !== undefined is true, so 'Items changed' is logged. No error occurs.
Final Answer:
Items changed -> Option D
Quick Check:
4 !== undefined -> true, logs [OK]

Quick Trick: Always initialize variables used in ngDoCheck before use [OK]

Common Mistakes:

Assuming oldLength is automatically defined
Expecting ngDoCheck to detect changes without setup
Thinking accessing undefined properties causes runtime errors

Master "Lifecycle Hooks" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

More Angular Quizzes

Consider this Angular component snippet:

Step 1: Check initialization of `oldLength`

Step 2: Runtime behavior after `items.push(4)`

Final Answer:

Quick Check:

Want More Practice?

Consider this Angular component snippet:

Step 1: Check initialization of oldLength

Step 2: Runtime behavior after items.push(4)

Final Answer:

Quick Check:

Want More Practice?

Step 1: Check initialization of `oldLength`

Step 2: Runtime behavior after `items.push(4)`