Child to parent communication flow in Angular

Introduction

Sometimes a child component needs to send information back to its parent. This helps the parent know what the child did or wants.

When a button click inside a child component should trigger an action in the parent.

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

When a child component changes a value and the parent needs to update something based on it.

When you want to keep the parent informed about events happening inside the child.

Syntax

Angular

In child component:
@Output() eventName = new EventEmitter<type>();

To send data:
this.eventName.emit(data);

In parent template:
<child-component (eventName)="parentHandler($event)"></child-component>

In parent component:
parentHandler(data: type) {
  // handle data
}

The @Output decorator marks an event the child can send out.

The parent listens to this event using parentheses (eventName) in the template.

Examples

The child sends a string message to the parent, which logs it.

Angular

Child component:
@Output() notify = new EventEmitter<string>();

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

Parent template:
<app-child (notify)="receiveMessage($event)"></app-child>

Parent component:
receiveMessage(msg: string) {
  console.log(msg);
}

The child sends a number to the parent whenever the count changes.

Angular

Child component:
@Output() countChanged = new EventEmitter<number>();

increment() {
  this.count++;
  this.countChanged.emit(this.count);
}

Parent template:
<counter (countChanged)="updateCount($event)"></counter>

Parent component:
updateCount(newCount: number) {
  this.currentCount = newCount;
}

Sample Program

The child component has a button. When clicked, it sends a string to the parent using an event. The parent listens and shows the received data below the child.

Angular

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

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

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

/* parent.component.ts */
import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <h2>Parent Component</h2>
    <app-child (dataSent)="handleData($event)"></app-child>
    <p>Received: {{ receivedData }}</p>
  `
})
export class ParentComponent {
  receivedData = '';

  handleData(data: string) {
    this.receivedData = data;
  }
}

Important Notes

Always import EventEmitter and @Output from @angular/core.

The parent uses $event to get the data sent by the child.

Use simple data types or objects for the event payload to keep communication clear.

Summary

Child to parent communication uses @Output and EventEmitter.

The child emits events, and the parent listens and reacts.

This keeps components loosely connected and easy to manage.