How to Use @Input() And @Output() Decorator in Angular

Introduction

In this article, I am exploring two very important points, related to Angular 2 + version, which the part of Parameter Decorator and these points are called @Input and @Output decorators.  Both are used to transform the data from one component to another component.  Or, you can say pass the different types of data from parent to child component and child to parent component.  Or, in a simple way transform/exchange data between two-component.

Let’s explore each, one by one.

@Input Decorator

@Input is a decorator to mark a property as an input.  @Input is used to define an input property, to achieve component property binding.  @Inoput decorator is used to pass data (property binding) from parent to child component.  The component property should be annotated with @Input decorator to act as input property.

Let’s explore it practically.

I have created an angular application which is AngApp.  I have created two components.  They are app components and student components.  I will transfer the data from parent to child component, using @Input decorator.  I am assuming my, app-component is the parent component and student-component is the child component.

To make the parent-child relation, keep the instance (selector of student component) of student component inside the template URL (app.component.html) of app component.

Open app.component.html:  Inside this file, we keep an instance of student component.

Example

<div> <app-student></app-student></div> 

In the above image, the selected area is the child component.

Now, we want to send the message from parent to child component.

Let’s open the parent component’s .ts file (app.component.ts) and declare a variable inside AppComponent class, to store the message.  This message is received by the child component.

myInputMessage:string ="I am the parent comppnent"  

import { Component, Input, OnInit } from '@angular/core';  
  
@Component({  
   selector: 'app-student',  
   templateUrl: './student.component.html',  
   styleUrls: ['./student.component.css']  
})  
  
export class StudentComponent implements OnInit {  
@Input() myinputMsg:string;  
  
constructor() { }  
  
ngOnInit() {  
   console.log(this.myinputMsg);  
   }  
  
}  

In the above image, we have declared a variable( myInputMessage) shown in the selected area.

Now, let’s open parent component views (app.component.html) pass this variable inside child component instance, which is passed inside parent component.

<div>  
<app-student [myinputMsg]="myInputMessage"></app-student>  
</div> 

The above image, represents 2 points.  Let’s explain each of the points.

1. Denotes those variables which will be used by child component (student component) with @Input decorator to fetch the message from parent component and,
2. denotes those variables which are passed the parent component message to child component.

Now, open the child component’s .ts file (student.component.ts) and import Input decorator, using the myinputMsg variable with @Input decorator and print it inside constructor or ngOnInit().

import { Component, Input, OnInit } from '@angular/core';  
  
@Component({  
   selector: 'app-student',  
   templateUrl: './student.component.html',  
   styleUrls: ['./student.component.css']  
})  
  
export class StudentComponent implements OnInit {  
@Input() myinputMsg:string;  
  
constructor() { }  
  
ngOnInit() {  
   console.log(this.myinputMsg);  
   }  
  
}  

** Output**

Output

In image 4, represent 3 points. Let’s explain each of the points.

1. First import the Input decorator, which is provided by angular and full path is @anuglar/core.
2. Use @Input decorator and declare those variables which are passed by parent component Html(app.component.html) file’s point 1.  When we declare those variable (myinputMsg) with @Input decorator it automatically fetches the value of the parent component variable with the help of @Input decorator.
3. Print the values of this variable inside constructor or ngOnInit(). We have used inside ngOnInit().

Let’s output,

@Output Decorator

@Output decorator is used to pass the data from child to parent component.  @Output decorator binds a property of a component, to send data from one component to the calling component.  @Output binds a property of the type of angular EventEmitter class.

To transfer the data from child to parent component, we use @Output decorator.

Lets’s Open the child component’ .ts file (student.component.ts).

For use the @Output decorator we have to import, two important decorators, they are Output and EventEmitter.

EventEmitter

Use in components with the @Output directive to emit custom events synchronously or asynchronously, and register handlers for those events by subscribing to an instance.

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

Now, create any variable with @Output decorator.

@Output() myOutput:EventEmitter<string>= new EventEmitter();  

Here in the place of string, we can pass different types of DataTypes.

After that create a variable to store and pass the message to the parent component.

outputMessage:string="I am child component."  

Code

import { Component, Input, Output,EventEmitter, OnInit } from '@angular/core';  
  
@Component({  
   selector: 'app-student',  
   templateUrl: './student.component.html',  
   styleUrls: ['./student.component.css']  
})  
export class StudentComponent implements OnInit {  
   @Input() myinputMsg:string;  
   @Output() myOutput:EventEmitter<string>= new EventEmitter();  
   outputMessage:string="I am child component."  
   constructor() { }  
  
   ngOnInit() {  
      console.log(this.myinputMsg);  
   }  
}  

Send the value of output message, to the parent component.  Then we create a button and click on this button.  We will send the values to the parent component.

Let’s open the child component Html page and create a button and click event of this button.  We then send the values.

student.component.html

<button (click)="sendValues"> Send Data </button>  

Now fire the click on student.component.ts.

sendValues(){  
   this.myOutput.emit(this.outputMessage);  
}  

Now, to fetch the value we have to go app.component.html file and use the below code.

<app-student [myinputMsg]="myInputMessage" (myOutput) ="GetChildData($event)"></app-student>  

function which is GetChildData() on parent component' .ts file, for fetch the data from child component.  
Open the app.component.ts:  
  
Code:  
  
GetChildData(data){  
   console.log(data);  
}  

Conclusion

In this article, we have learned how to pass data from parent to child component and vice versa, and which decorators are more responsible for doing this task, called @Input() and @Output() decorator.

I hope it will help you. Thanks!

#angular #programming