Bird
0
0

Given the following Angular code, what will be the output displayed by the dumb component?

medium📝 component behavior Q13 of 15
Angular - Advanced Patterns
Given the following Angular code, what will be the output displayed by the dumb component?
/* Smart component template */
<app-dumb [title]="pageTitle" (clicked)="onClicked()"></app-dumb>

/* Smart component class */
pageTitle = 'Hello World';
onClicked() { console.log('Clicked!'); }

/* Dumb component template */
<h1>{{ title }}</h1>
<button (click)="clicked.emit()">Click Me</button>

/* Dumb component class */
@Input() title: string;
@Output() clicked = new EventEmitter();
ADisplays 'Hello World' and logs 'Clicked!' on button click
BDisplays nothing and logs 'Clicked!' on button click
CDisplays 'Hello World' but does not log anything
DThrows an error because of missing @Output() decorator
Step-by-Step Solution
Solution:
  1. Step 1: Analyze data binding from smart to dumb

    The smart component passes 'Hello World' via [title] input, so dumb displays it.
  2. Step 2: Analyze event emission and handling

    The dumb component emits clicked event on button click, smart component listens and logs 'Clicked!'.
  3. Final Answer:

    Displays 'Hello World' and logs 'Clicked!' on button click -> Option A
  4. Quick Check:

    Input shows title, output triggers log [OK]
Quick Trick: Input shows data, output triggers event handled by smart [OK]
Common Mistakes:
  • Thinking dumb component logs directly
  • Assuming missing decorators cause runtime error here
  • Ignoring event binding from dumb to smart

Want More Practice?

15+ quiz questions · All difficulty levels · Free

Free Signup - Practice All Questions
More Angular Quizzes