[Solved] You want to create a child component that emits an event with a number when a button is clicked. Which code snippet correctly implements this? | Angular

Angular - Component Interaction

You want to create a child component that emits an event with a number when a button is clicked. Which code snippet correctly implements this?

A

import { Component, Output, EventEmitter } from '@angular/core';
@Component({ selector: 'child-comp', template: '<button (click)=\"sendNumber()\">Click</button>' })
export class ChildComponent {
  @Output() numberClicked = new EventEmitter<number>();
  sendNumber() {
    this.numberClicked.emit(42);
  }
}

B

import { Component, Output, EventEmitter } from '@angular/core';
@Component({ selector: 'child-comp', template: '<button (click)=\"sendNumber()\">Click</button>' })
export class ChildComponent {
  @Output numberClicked = new EventEmitter<number>();
  sendNumber() {
    this.numberClicked.emit('42');
  }
}

C

import { Component, Input, EventEmitter } from '@angular/core';
@Component({ selector: 'child-comp', template: '<button (click)=\"sendNumber()\">Click</button>' })
export class ChildComponent {
  @Input() numberClicked = new EventEmitter<number>();
  sendNumber() {
    this.numberClicked.emit(42);
  }
}

D

import { Component, Output, EventEmitter } from '@angular/core';
@Component({ selector: 'child-comp', template: '<button (click)=\"sendNumber()\">Click</button>' })
export class ChildComponent {
  @Output() numberClicked = new EventEmitter<string>();
  sendNumber() {
    this.numberClicked.emit(42);
  }
}

Step-by-Step Solution

Solution:

Step 1: Check @Output decorator and initialization
import { Component, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'child-comp', template: '' }) export class ChildComponent { @Output() numberClicked = new EventEmitter(); sendNumber() { this.numberClicked.emit(42); } } correctly uses @Output() with parentheses and initializes numberClicked as EventEmitter.
Step 2: Verify emit argument type
import { Component, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'child-comp', template: '' }) export class ChildComponent { @Output() numberClicked = new EventEmitter(); sendNumber() { this.numberClicked.emit(42); } } emits the number 42, matching the EventEmitter type.
Final Answer:
Option A correctly implements the child component emitting a number event. -> Option A
Quick Check:
Match EventEmitter type and emitted value [OK]

Quick Trick: Match EventEmitter type with emitted value type [OK]

Common Mistakes:

Omitting parentheses in @Output
Mismatching emitted value type
Using @Input instead of @Output

Master "Component Interaction" in Angular

9 interactive learning modes - each teaches the same concept differently

Learn Why Deep Visual Try Challenge Project Recall Perf

More Angular Quizzes

You want to create a child component that emits an event with a number when a button is clicked. Which code snippet correctly implements this?

Step 1: Check @Output decorator and initialization

Step 2: Verify emit argument type

Final Answer:

Quick Check:

Want More Practice?