Pass Data From Child Component To Parent Component Using @Output() In Angular 9

Yasin Panwala May 14, 2020 0 5.5K

In this article, we will learn how to pass data from child component to parent component using @Output() and EventEmitter in Angular 9.

@Output() allow Angular to share data between the parent context and child directives or components. An @Output() property is observable.

Use the @Output() decorator in the child component or directive to allow data to flow from the child out to the parent. An @Output() property should normally be initialized to an Angular EventEmitter with values flowing out of the component as events.

Prerequisites:

Basic knowledge of Angular
Code editor like Visual Studio Code

Create a new Angular project by typing the following command in the VSCode terminal.

ng new child-to-parent

Now, open the newly created project and execute the commands given below. It will create two components parent and child.

ng g c parent
ng g c child

Open the parent.component.ts file and add the code in it.

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css']
})
export class ParentComponent implements OnInit {

  message: string;

  constructor() { }

  ngOnInit(): void {
  }

  getChildData($event) {
    this.message = $event
  }

}

Open the parent.component.html file and add the code in it.

<app-child (dataEvent)="getChildData($event)"></app-child>
<p>{{message}}</p>

Open the child.component.ts file and add the code in it.

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

@Component({
  selector: 'app-child',
  templateUrl: './child.component.html',
  styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {

  data: string = "The Code Hubs";
  @Output() dataEvent = new EventEmitter<string>();

  constructor() { }

  ngOnInit(): void {
  }

  sendData() {
    this.dataEvent.emit(this.data);
  }

}

Open the child.component.html file and add the code in it.

<button (click)="sendData()">Get Data</button>

Open the app-routing.module.ts file and add the code in it.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { ParentComponent } from './parent/parent.component';
import { ChildComponent } from './child/child.component';

const routes: Routes = [
  {
    path: 'parent',
    component: ParentComponent,
  },
  {
    path: 'child',
    component: ChildComponent,
  }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Open the app.component.html file and add the code in it.