[Solved] What is wrong with this smart component template?<app-dumb [data]="items" (update)="handleUpdate($event)"></app-dumb>And dumb component code:@Input() data: string[];... | Angular

Angular - Advanced Patterns

What is wrong with this smart component template?

<app-dumb [data]="items" (update)="handleUpdate($event)"></app-dumb>

And dumb component code:

@Input() data: string[];
@Output() update = new EventEmitter();

updateData() {
  this.data.push('new');
  this.update.emit(this.data);
}

AThe smart component must not bind to update event.

BEventEmitter cannot emit arrays.

CMutating input array directly can cause unexpected side effects.

DThe dumb component should not have any outputs.

Step-by-Step Solution

Solution:

Step 1: Analyze input mutation
The dumb component modifies the input array directly, which can affect the smart component's data unexpectedly.
Step 2: Check other options
EventEmitter can emit arrays, dumb components can have outputs, and smart components can bind to outputs.
Final Answer:
Mutating input array directly can cause unexpected side effects. -> Option C
Quick Check:
Never mutate inputs directly in dumb components [OK]

Quick Trick: Clone inputs before modifying in dumb components [OK]

Common Mistakes:

Master "Advanced Patterns" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

What is wrong with this smart component template?