How to Use EventEmitter in Angular: Simple Guide

In Angular, EventEmitter is used to send events from a child component to its parent. You create an @Output property with EventEmitter and call emit() to send data, which the parent listens to with event binding.

Syntax

The basic syntax involves importing EventEmitter and Output from @angular/core. You declare an @Output property as an instance of EventEmitter with a type for the data it sends. Use emit() method to send the event.

• @Output(): Decorator to mark the event property.
• EventEmitter<T>: Class to create the event emitter with type T.
• emit(value: T): Method to send the event with data.

typescript

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

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

  sendData() {
    this.dataSent.emit('Hello from child');
  }
}

Example

This example shows a child component sending a message to its parent using EventEmitter. The parent listens to the dataSent event and displays the received message.

typescript

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

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

  sendData() {
    this.dataSent.emit('Hello from Child');
  }
}

@Component({
  selector: 'parent-comp',
  template: `
    <child-comp (dataSent)="receiveMessage($event)"></child-comp>
    <p>Message: {{ message }}</p>
  `
})
export class ParentComponent {
  message = '';

  receiveMessage(msg: string) {
    this.message = msg;
  }
}

Output

Message: Hello from Child

Common Pitfalls

• Forgetting to add @Output() decorator causes the event not to be exposed to the parent.
• Not subscribing to the event in the parent template means the event is emitted but ignored.
• Emitting data of a different type than declared can cause type errors.
• Using EventEmitter for communication between unrelated components is not recommended; use services instead.

typescript

/* Wrong: Missing @Output decorator */
export class ChildComponent {
  dataSent = new EventEmitter<string>(); // This won't work as output

  sendData() {
    this.dataSent.emit('Hi');
  }
}

/* Right: With @Output decorator */
import { Output, EventEmitter } from '@angular/core';

export class ChildComponent {
  @Output() dataSent = new EventEmitter<string>();

  sendData() {
    this.dataSent.emit('Hi');
  }
}

Quick Reference

EventEmitter Quick Tips:

• Always import EventEmitter and Output from @angular/core.
• Use @Output() to expose the event to the parent.
• Emit events with emit() method.
• Listen to events in the parent template with (eventName) binding.
• Use proper typing for event data to avoid errors.

Key Takeaways

Use @Output() with EventEmitter to send events from child to parent components.

Call emit() on the EventEmitter instance to send data or signals.

Listen to the event in the parent template using event binding syntax (eventName).

Always type your EventEmitter to ensure consistent data handling.

Avoid using EventEmitter for unrelated components; prefer services for that.