Angular @Output() Decorator

Introduction

In this article, we will discuss how to share data between the child and parent components. In the previous article, we discussed how to pass data from the Parent component to the child component using the @input decorator. Please find that article here

We are going to cover,

@Output() Decorator

How to share data from Child Component to Parent Component?

Let's see the below diagram,

Angular @Output() decorator

@Output() Decorator is used to share data from the Child component to the Parent component. As we can not access the parent selector in the child component, we need to use Events to send data from child to parent.

Let's create Angular Application to explore this concept,

Step 1. Add Parent Component in the Angular application.

ng g c “parentComponent”

Angular @Output() decorator

The component has been created.

Angular @Output() decorator

Step 2. Create Child Component

ng g c “childComponent”

Once a child component is created.

Step 3. Let's add the below code in the parent component ("parent-component.component.html")

4.	<H1>Parent Component</H1>
5.	
6.	<app-child-component></app-child-component>

<app-child-component> is a child component selector.

Step 4. Let's create an object of the EventEmitter and decorate that object with the @output decorator.

Please add the below code in the "child-component.component.ts" file.

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

@Component({
  selector: 'app-child-component',
  templateUrl: './child-component.component.html',
  styleUrls: ['./child-component.component.css']
})
export class ChildComponentComponent {
@Input('ParentData')
  public personName="";

 @Output() public childEvent = new EventEmitter();

In the above code

We have created an "EventEmitter" object called "childEvent"
"childEvent" is decorated with the "Output()" decorator.
Imported "EventEmitter" and "Output" decorator from '@angular/core'.

Step 5. Now we will add a Button and an event in the "child-component.component.html" file.

<h2>Child Component</h2>
<button (click) ="childEventCalled()"> Child Click</button>

Step 6. Let's add the method "childEventCalled()" in the "child-component.component.ts" file.

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

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

 @Output() public childEvent = new EventEmitter();
 
 public childEventCalled()
 {
   this.childEvent.emit("Hey from Child Component");
 }
}

Step 7. Open the "parent-component.component.html" file and add the below code.

8.	<H1>Parent Component</H1>
9.	
10.	<H3>Message from Child : {{message}}</H3>
11.	
12.	<app-child-component (childEvent)="message=$event"></app-child-component>

In the above code,

In the child component selector, we have called the event "childEvent" and assigned value to the parent component variable "message".
$event holds the value of the child component after the event is fired.
We have printed the "message" variable value using interpolation.

Step 8. Now we will declare the "message" variable in the parent component("parent-component.component.ts")

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

@Component({
  selector: 'app-parent-component',
  templateUrl: './parent-component.component.html',
  styleUrls: ['./parent-component.component.css']
})
export class ParentComponentComponent {
  public message :string ="";
}

Let's execute the application,

Angular @Output() decorator

Now we click the "ChildClick" button, defined in the child component. This button click event has to emit a method of event emitter that fills value from the child component and displays on the parent component.

Let's click on the button and see the output again,

Angular @Output() decorator

Great, we have received data from the child component and printed it on the parent component.

Summary

That's all for this article. We learned how to pass data from the Child component to the Parent component in this article.