?➡️?‍?‍? Child to Parent

? Quick Overview

Angular allows child components to communicate with parent components using @Output and EventEmitter. This enables the child to emit events and pass data back to the parent when something happens (for example, when a button is clicked).

? Key Concepts

@Output decorator exposes an event from the child component to the parent.
EventEmitter is used to create and emit custom events with data.
The parent listens to the child event using event binding: (messageEvent)="receiveMessage($event)".
The parent method (e.g. receiveMessage()) receives the emitted value via the special variable $event.

? Syntax & Theory

In the child component class:
- Declare an output property: @Output() messageEvent = new EventEmitter<string>();
- Emit a value: this.messageEvent.emit('Some value');
In the parent template:
- Bind to the child event: <app-child (messageEvent)="receiveMessage($event)"></app-child>
In the parent class:
- Define a property (e.g. childMessage: string = '';) and a handler method receiveMessage(message: string) to store the incoming data.

? Code Examples

? Child Component (Emits Data)

? View Code Example

// child.component.ts - emits a message to the parent
import { Component, Output, EventEmitter } from '@angular/core';

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

  sendMessage() {
    this.messageEvent.emit('Hello from Child!');
  }
}

?‍?‍? Parent Component (Listens to Child)

? View Code Example

// parent.component.ts - listens to the child's event
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <app-child (messageEvent)="receiveMessage($event)"></app-child>
    <p>Message from Child: {{ childMessage }}</p>
  `,
})
export class ParentComponent {
  childMessage: string = '';

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

? Live Output / Explanation

When the user clicks the Send Message button in ChildComponent, the method sendMessage() is called.

Inside sendMessage(), the child emits an event: this.messageEvent.emit('Hello from Child!');

The parent template is listening to this event using (messageEvent)="receiveMessage($event)". As soon as the child emits, receiveMessage() in ParentComponent runs and receives the value 'Hello from Child!'.

Finally, the parent stores that value in childMessage and displays it in the UI: Message from Child: Hello from Child!

✅ Tips & Best Practices

Always initialize variables in the parent (like childMessage = '';) to avoid undefined errors.
You can emit any type of data: strings, numbers, objects, arrays, or custom interfaces.
Use $event to capture the emitted value in the parent template.
Give meaningful names to events (e.g. userSelected, itemAdded) to make the intent clear.
Keep emitted payloads as small and focused as possible to simplify data flow.

? Try It Yourself

Create a child component that emits a number to the parent when a button is clicked. Display the number in the parent.
Emit an object (e.g. user with name and age) from the child to the parent and display its properties.
Combine @Input and @Output to allow two-way communication between parent and child, such as updating a form field from both sides.