@Output decorator with EventEmitter in Angular - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when the child component emits an event?

Consider a child Angular component that uses @Output with EventEmitter. When the child emits an event, what will the parent component receive?

Angular

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="notify()">Notify Parent</button>`
})
export class ChildComponent {
  @Output() notifyEvent = new EventEmitter<string>();

  notify() {
    this.notifyEvent.emit('Hello from child');
  }
}

A The parent receives no data because EventEmitter does not send data by default.

B The parent receives an object with a property named 'notifyEvent'.

C The parent receives the string 'Hello from child' through the event binding.

D The parent receives a boolean value true indicating the event fired.

💡 Hint

Think about what emit() sends and how the parent listens.

The @Output decorator with EventEmitter allows the child to send data to the parent. When emit() is called with a value, the parent receives that exact value through event binding.

📝 Syntax

intermediate

Identify the correct syntax to declare an @Output EventEmitter

Which of the following is the correct way to declare an @Output property named changeEvent that emits numbers?

A @Output changeEvent = EventEmitter<number>();

B @Output() changeEvent = new EventEmitter<number>();

C @Output() changeEvent: EventEmitter = new EventEmitter();

D @Output() changeEvent = new EventEmitter<string>();

💡 Hint

Remember the syntax requires parentheses after @Output and the type inside EventEmitter<>.

The correct syntax uses @Output() with parentheses and initializes the property with new EventEmitter<number>(). Option B matches this exactly.

🔧 Debug

advanced

Why does the parent not receive the event?

Given the child component below, the parent component does not receive any event when the button is clicked. What is the most likely cause?

Angular

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="send()">Send</button>`
})
export class ChildComponent {
  @Output() notify = new EventEmitter<string>();

  send() {
    this.notify.emit('data');
  }
}

A The @Output decorator is missing parentheses.

B The EventEmitter is not initialized with parentheses after new.

C The child component's selector is incorrect.

D The parent is not listening to the event with the correct selector name.

💡 Hint

Check how the parent binds to the child's output event name.

The child emits an event named 'notify'. If the parent listens to a different event name, it won't receive the event. The other options are syntactically correct.

❓ state_output

advanced

What is the value of the parent's message after event emission?

In the parent component, the message property updates when the child emits an event. What will be the value of message after clicking the button?

Angular

/* Child component */
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="send()">Send</button>`
})
export class ChildComponent {
  @Output() notify = new EventEmitter<string>();
  send() {
    this.notify.emit('Angular Rocks!');
  }
}

/* Parent component */
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `<app-child (notify)="message = $event"></app-child><p>{{ message }}</p>`
})
export class ParentComponent {
  message = 'No message yet';
}

A 'Angular Rocks!'

B 'No message yet'

C undefined

D An empty string ''

💡 Hint

Consider what $event contains when the child emits.

The child emits the string 'Angular Rocks!'. The parent listens to the notify event and sets message to the emitted value, so it updates to 'Angular Rocks!'.

🧠 Conceptual

expert

What error occurs if EventEmitter is not imported?

If you forget to import EventEmitter from @angular/core but still declare @Output() event = new EventEmitter();, what error will Angular throw during compilation?

A TS2304: Cannot find name 'EventEmitter'.

B Template parse error: 'event' is not a known property.

C No error; Angular automatically imports EventEmitter.

D Runtime error: 'event' is not a function.

💡 Hint

Think about TypeScript errors when a class is used but not imported.

If EventEmitter is not imported, TypeScript cannot find its definition and throws error TS2304 during compilation.