@Output decorator with EventEmitter in Angular

Introduction

The @Output decorator with EventEmitter lets a child component send messages or data to its parent component. It helps components talk to each other.

When a child button click needs to tell the parent to do something.

When a form inside a child component submits data to the parent.

When a child component changes a value and the parent needs to know.

When you want to keep components separate but still communicate events.

Syntax

Angular

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

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

  sendData() {
    this.eventName.emit('data');
  }
}

The @Output decorator marks a property as an event the parent can listen to.

EventEmitter is used to create and send events with optional data.

Examples

This example sends a string message to the parent when the button is clicked.

Angular

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

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

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

This example emits a number whenever the input changes.

Angular

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

@Component({
  selector: 'child-comp',
  template: `<input (input)="onInput($event.target.value)" />`
})
export class ChildComponent {
  @Output() valueChanged = new EventEmitter<number>();

  onInput(value: string) {
    this.valueChanged.emit(+value);
  }
}

Sample Program

This example shows a child component sending a message to the parent when the button is clicked. The parent listens to messageEvent and updates its message display.

Angular

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

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

  sendMessage() {
    this.messageEvent.emit('Hi Parent!');
  }
}

@Component({
  selector: 'app-root',
  template: `
    <h1>Parent Component</h1>
    <child-comp (messageEvent)="receiveMessage($event)"></child-comp>
    <p>Message from child: {{ message }}</p>
  `
})
export class AppComponent {
  message = '';

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

Important Notes

Always import Output and EventEmitter from @angular/core.

The parent listens to the child's event using parentheses: (eventName)="handler($event)".

You can emit any data type, like strings, numbers, objects, or even no data.

Summary

@Output lets child components send events to parents.

EventEmitter creates and sends these events.

Parents listen to child events with (eventName) in the template.