How to Use @Output Decorator in Angular 14+

In the last Tutorial, we learned about how to pass data from the Parent to Child Component, Here we will learn How to pass data from the Child to Parent Component with the help of an Output decorator.

so, let’s get started…

What is an 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 the child component by using eventEmitter, and then the parent component will listen to this event and receive the data.

Also Read, How to use @input Decorator in Angular

Prerequisite

In order to create this sample app, you must have Node JS and Angular development environments set up on your machine.

For this Please follow this link, How To Install Angular 14 – Tutorial

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:

app.component.html:

<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 an 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 and Ts dile as below in as below:

HTML:

<h1>
  Parent component
</h1>
<h4>Current Price : {{price}}</h4>
<app-child (newPrice)="onchange($event)"></app-child>

TS:

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

@Component({
  selector: 'app-parent',
  templateUrl: './parent.component.html',
  styleUrls: ['./parent.component.css'],
})
export class ParentComponent {
  public price: any;
  onchange(value) {
    this.price = value;
  }
}

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: 

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.

Conclusion

In this article, we have seen, how we can use an output decorator to pass data from parent to child components in an easy way.

Happy Coding...🙂