Sharing Data Between Angular Components Via @Input() And @Output()

In this article we will learn how to pass data from parent component to the respective child component and vice versa in Angular 8.

Introduction

Pass data from parent to child component using @Input() decorator, which allows data to pass through templates and child to parent component using @Output() decorator with the help of Event Emitter.

Prerequisites

Basic knowledge of Angular
Visual Studio Code must be installed
Angular CLI must be installed
Node JS must be installed

Step 1

Create a new Angular project using the following NPM command:

ng new componentSharing

Step 2

Create a Parent Component using the following NPM command:

ng g c parent

Step 3

Next step is to create a Child Component using the following NPM command:

ng g c child

Step 4

Give parent component selector in app.component.html:

<app-parent></app-parent>

Step 5

In this step we are creating a textbox and a submit button so when we click on submit data from text box would get transfer to child component.

Open parent component.html file and paste the below code inside.

parent.component.html

<div class="col-12 col-md-12">
<div class="card">
<div class="card-header">
Parent Component
</div>
<div class="card-body">
<form>
<div class="order-tracking">
<input name="yourname" type="text" [(ngModel)]="name" placeholder="Enter your name"/>
<button type="button" (click)="submit()" class="btn-btn primary">Submit</button>
<h3>{{this.message}}</h3>
</div>
</form>
</div>
</div>
</div>
<app-child [Name]="sendToChild" (getResponse)="getResponse($event)"></app-child>

Here in the above we are sending data in child component using app-child selector .

Step 6

Open parent component.ts file and paste the below code inside.

parent.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html',
styleUrls: ['./parent.component.css']
})
export class ParentComponent {
name: string;
message: any;
sendToChild: string;
getResponse($event) {
this.message = $event;
}
submit() {
this.sendToChild = this.name;
}
}

Step 7

Open child component.html file and paste the below code inside.

child.component.html

<div class="col-12 col-md-12">
<div class="card">
<div class="card-header">
Child Component
</div>
<div class="card-body">
<div class="order-tracking">
{{this.Name}}
</div>
<button type="button" (click)="onClick()">Ok</button>
</div>
</div>
</div>

Step 8

Open child component.tsfile and paste the below code inside.

child.component.ts

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html',
styleUrls: ['./child.component.css']
})
export class ChildComponent implements OnInit {
@Input() Name;
@Output() getResponse = new EventEmitter;
constructor() { }
ngOnInit() {
}
onClick() {
this.getResponse.emit('Message from child');
}
}

Output

Conclusion

In this article we have seen how to transfer data fron parent component to child component and vice versa using @Input() and @Output() decorator .

I hope you have enjoyed this article as much as I have enjoyed writing and coding the examples.

Please let me know in the comments how I could improve it and any suggestions from your end.