@Input and @Output decorator in Angular

In this article we are gonna understand @Input and @Output decorator in angular. @Input and @Output decorators are one of the important concept of the angular.

@Input Decorator

@Input decorator is used to pass data from parent to child components .Lets create a new angular app called my-app, which have two components one is app component which is our parent component another is student component which is our child component.

app.component.html

<div>
<h1>This is parent components</h1>
<div>
<app-student></app-student>
</div>
</div>

app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
message: string = 'this message from parent';
}

We have declared a variable in app.components.ts called message .Lets pass that variable to our child component i.e student component.

<div>
<h1>This is parent components</h1>
<div>
<app-student [myMessage]="message"></app-student>
</div>
</div>

Here in above code myMessage will be used by child to fetch data from parent and message is the variable passed from parent to child component.

student.component.ts

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() myMessage: string;
constructor() {}
ngOnInit(): void {}
}

student.component.html

<div>
{{ myMessage }}
</div>

@Output decorator

@Output decorator is used to pass data from child to parent. @Output decorator binds a property of the type of angular EventEmmiter class.

student.component.ts

import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-student',
templateUrl: './student.component.html',
styleUrls: ['./student.component.css'],
})
export class StudentComponent implements OnInit {
@Input() myMessage: string;
@Output() myOutMsg: EventEmitter<string> = new EventEmitter();
constructor() {}
ngOnInit(): void {}
}

student.component.html

<div>
{{ myMessage }}
<button (click)="sendMsg()">send message to parent</button>
</div>

Now add the sendMsg function to student.component.ts file.

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

Now add the below code to app.component.html

<div>
<h1>This is parent components</h1>
<div>
<app-student [myMessage]="message" (myOutMsg)="messageFromchild($event)"></app-student>
</div>
</div>

Now add the messageFromchild function to the app.component.ts file

import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
export class AppComponent {
message: string = 'this message from parent';
msgFromchild: string = '';
messageFromchild(data) {
this.msgFromchild = data;
}
}

Finally we can add the value we get from our child using @Output decorator can display in html page of parent i.e app.component.html

<div>
<h1>This is parent components</h1>
<h1>{{ msgFromchild }}</h1>
<div>
<app-student
[myMessage]="message"
(myOutMsg)="messageFromchild($event)"
></app-student>
</div>
</div>

Final output