[Solved] Given this smart component template:<app-dumb [title]="pageTitle" (clicked)="onClicked()"></app-dumb>And dumb component code:@Input()... }What happens when the dumb component's button is clicked? | Angular

Angular - Advanced Patterns

Given this smart component template:

<app-dumb [title]="pageTitle" (clicked)="onClicked()"></app-dumb>

And dumb component code:

@Input() title: string;
@Output() clicked = new EventEmitter();

handleClick() { this.clicked.emit(); }

What happens when the dumb component's button is clicked?

ANothing happens because clicked is not handled.

BThe dumb component updates the title property.

CThe smart component's onClicked() method is called.

DAn error occurs because clicked is not an input.

Step-by-Step Solution

Solution:

Step 1: Understand event binding from dumb to smart
The dumb component emits 'clicked' event. The smart component listens with (clicked) and calls onClicked().
Step 2: Analyze what happens on button click
When handleClick() emits clicked, smart component's onClicked() runs.
Final Answer:
The smart component's onClicked() method is called. -> Option C
Quick Check:
Output event triggers smart method [OK]

Quick Trick: Output events notify smart components [OK]

Common Mistakes:

Master "Advanced Patterns" in Angular

9 interactive learning modes - each teaches the same concept differently

More Angular Quizzes

Given this smart component template: