# Sending data from Child to Parent Component

Paul Tomoiu

●

Angular,

frontend,

web

●

Published 2024-01-06

This tutorial explains how we can send data from a Child component to a Parent component in Angular.

In Angular, you can send data from a child component to a parent component by emitting events from the child component and capturing those events in the parent component.

In the child component, use the @Output decorator along with EventEmitter to define an output property that emits events.

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

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

  sendDataToParent() {
    const dataToSend = 'Data from child component';
    this.sendDataEvent.emit(dataToSend);
  }
}

In the parent component template, bind to the event emitted by the child component and handle it in a method.

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child (sendDataEvent)="receiveDataFromChild($event)"></app-child>
    <p></p>
  `
})
export class ParentComponent {
  receivedData: string;

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

In this example, the (sendDataEvent)="receiveDataFromChild($event)" binding captures the event emitted by the child component and invokes the receiveDataFromChild method in the parent component.

This approach allows you to establish communication between the parent and child components, enabling the child component to notify the parent component about events or send data back to the parent.