angular

How to Use @Output Decorator in Angular 11+

How to Use @Output Decorator in Angular 11+

In last Tutorial, we learned about how to pass data from Parent to Child Component, Here we will learn How to pass data from Child to Parent Component.

so, let’s get started…

What is Output decorator?

“Output decorator binds a property of a component to send data from child component to parent component”.

In this scenario, the child component does not have any reference to the parent component. So in this case, we need to emit an event from child component with using eventEmitter and then the parent component will listen to this event and receive the data.

Step by Step Guide for Passing Data from Child to Parent Component in Angular:

Step -1: Create New Project

Create Blank Project in angular using the below command, Skip this step if you have already:

ng new angularDemo

Step-2: Add Components

Now add two new components with name parent and child component, using below command

ng g c parent 
ng g c child

Step-3: Add parent Component

To render our parent component HTML we need to include it to app.component.html file as HTML tag as shown below:

<div style="text-align:center">
<h1>Welcome to {{ name }}</h1>
<hr>
<app-parent></app-parent>
</div>

Step-4: HTML for Parent and Child Component

Now suppose we have a scenario where we have to change the price from parent component and it should be effect on child component, so let’s do HTML for this as below:

HTML for parent component:

<h1>Parent component</h1>
<h4>Current Price : {{price}} </h4>
<app-child></app-child>

 HTML for child component:

<h1>Child component</h1>
<h4><input type="text"/></h4>

In Parent HTML code we have added <app-child> tag to use it as child component.

 Step-5: Pass data using Output decorator and Eventemitter

 Now, add event listener to child component input as follows:

<h1>Child component</h1>
<h4><input type="text" #price (keyup)="onChange(price.value)"/></h4>

Next, to make able parent component to receive value from child component we need to use output decorator with eventEmitter which allows us to emit the event and then parent component will listen to this event, see below code:

import { Component, OnInit,EventEmitter,Output } from '@angular/core';
@Component({selector: 'app-child',  
templateUrl: './child.component.html', 
styleUrls: ['./child.component.css']
export class ChildComponent implements OnInit 
constructor() { }
@Output() public newPrice = new EventEmitter<any>();
 public price:any; ngOnInit() { }  onChange(value) {   this.newPrice.emit(value); }}

Step-6: Listen to Event from Child Component

Then, we need to listen emit event from child event emitter, so update HTML as below in parent.component.ts as below:

<app-child (newPrice)="onchange($event)"></app-child>

Step-7: Run Application

Now our Application is ready, run application using ng serve command then go to a browser it will look like this: 

Angular-Output-Decorator
Angular-Output-Decorator

Now you can update any value from the child component input and it will emit to the parent component then it will display the received value.

So, using the Output decorator we can pass data from the Child component to the parent component.

View Live Demo

If You Appreciate What We Do Here On TutsCoder, You Should Consider:

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Support Us

We are thankful for your never ending support.

Leave a Comment