Angular - What are @Input and @Output

Both are use to transform the data from one component to another component.  Or, you can say pass the different types of data form parent to child component and child to parent component.

Or

 

In a simple way, transform/exchange data between two components.

 

@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.

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. 

1. <div> <app-student></app-student></div>  

1. import { Component, Input, OnInit } from '@angular/core';  
2.   
3. @Component({  
4.    selector: 'app-student',  
5.    templateUrl: './student.component.html',  
6.    styleUrls: ['./student.component.css']  
7. })  
8.   
9. export class StudentComponent implements OnInit {  
10. @Input() myinputMsg:string;  
11.   
12. constructor() { }  
13.   
14. ngOnInit() {  
15.    console.log(this.myinputMsg);  
16.    }  
17.   
18. }  

1. <div>  
2. <app-student [myinputMsg]="myInputMessage"></app-student>  
3. </div>  

@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."  

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

1. @Component({  
2.    selector: 'app-student',  
3.    templateUrl: './student.component.html',  
4.    styleUrls: ['./student.component.css']  
5. })  
6. export class StudentComponent implements OnInit {  
7.    @Input() myinputMsg:string;  
8.    @Output() myOutput:EventEmitter<string>= new EventEmitter();  
9.    outputMessage:string="I am child component."  
10.    constructor() { }  
11.   
12.    ngOnInit() {  
13.       console.log(this.myinputMsg);  
14.    }  
15. }  

tudent.component.html

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

sendValues(){  

   this.myOutput.emit(this.outputMessage);  

}  

References 

https://www.c-sharpcorner.com/article/input-and-output-decorator-in-angular/