How to Pass Data from Child to Parent in Angular

In Angular, you pass data from a child to a parent component using @Output and EventEmitter. The child emits an event with data, and the parent listens to that event to receive the data.

Syntax

Use @Output in the child component to create an event emitter. The child calls emit() to send data. The parent listens to this event in the template using parentheses (eventName).

• @Output() eventName = new EventEmitter<type>();: Declares the event in child.
• this.eventName.emit(data);: Sends data from child.
• <child (eventName)="parentHandler($event)"></child>: Parent listens and handles data.

typescript

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

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

  sendData() {
    this.dataEvent.emit('Hello Parent!');
  }
}

Example

This example shows a child component sending a message string to its parent. The parent displays the received message.

typescript

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

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

  sendData() {
    this.dataEvent.emit('Hello Parent!');
  }
}

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

  receiveData(data: string) {
    this.message = data;
  }
}

Output

Message from child: Hello Parent!

Common Pitfalls

Common mistakes include:

• Not using @Output decorator on the event emitter.
• Forgetting to call emit() to send data.
• Not binding the event in the parent template with parentheses (eventName).
• Trying to pass data directly without using events.

typescript

/* Wrong: Missing @Output decorator */
import { EventEmitter } from '@angular/core';

export class ChildComponent {
  dataEvent = new EventEmitter<string>(); // No @Output()

  sendData() {
    this.dataEvent.emit('Hello');
  }
}

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

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

  sendData() {
    this.dataEvent.emit('Hello');
  }
}

Quick Reference

• @Output(): Decorate an EventEmitter in child to send data.
• emit(data): Call to send data from child.
• (eventName): Parent listens to child event in template.
• $event: Holds the data sent by child in parent handler.

Key Takeaways

Use @Output and EventEmitter in the child to send data to the parent.

The parent listens to the child's event using (eventName) in the template.

Always call emit() on the EventEmitter to send data.

Bind the event properly in the parent template to receive data.

Avoid forgetting the @Output decorator or emit call to prevent errors.