How To Pass Data Between The Component To Another Component In Angular

Introduction

In angular, we are able to pass different ways to share data between the components. Small components are always good to manage code in Angular. We have to define the relationship between the components. Please follow the below steps.

Here some ways to share data between components,

Parent to child component
Child to the parent component
Sharing data using ViewChild property

Parent to Child component

When you define @Input() in the child component it will receive value from the parent component. Before sharing data between components first we define our data model using interfaces.

When you declare a variable in the child component with the @Input() decorator, it allows that variable to be “received” from the parent component template.

Please follow the below to parent.component.ts file,

import {
Component
} from '@angular/core';
@Component({
selector: parent - component '
})
exportclassParentComponent {
messagelist = [{
id: 1,
msg: 'Test first notification'
}, {
id: 2,
msg: 'Test first notification'
}, ];
constructor() {}
}

parent.component.html

<h1> Parent Component </h1>
<child-component[messagelist]="messagelist"></child-component>

Here we have created messagelistlist and pass to send child.component.ts file to selector tag and receive the value from @Input().

Please follow the child.component.ts files codes below.

import {
Component,
Input
} from '@angular/core';
@Component({
selector: child - component '
})
exportclassChildComponent {
@Input() messagelist: any[];
constructor() {}
}
<divclass="messagelist"*ngFor="let m of messagelist ">
{{ m.msg }}
</div>

Child to parent component

If you want to pass data from the child component to the parent component use @Output() and EventEmitter.

To pass data from the child to the parent, you have to emit it from the child. The parent will be listening for the event will grab the data. Please follow the below codes.

child.component.ts

import {
Component,
Output,
EventEmitter
} from '@angular/core';
@Component({
selector: 'child-component'
})
exportclassChildComponent {
name: string = "";
@Output() nameEmitter = newEventEmitter < string > ();
PostData() {
this.nameEmitter.emit(this.name);
}
constructor() {}
}

child.component.html

<div>
<input[(ngModel)]="name"type="text"/>
<button(click)="PostData()"> Pass Data </button>
</div>

In our child component, we create a name emitter that sends the name anytime the user clicks the Post Data button. To receive the name in the parent, we have to create a function to grab that data and put it into a variable.

import { Component } from'@angular/core';
@Component({
selector:parent-component'
})
exportclassParentComponent {
name = 'Welcome Test';
constructor () { }
receivename($event: string) {
this.name = $event;
}
}
<h2> {{ name }} </h2>
<child-component(nameEmitter)="receivename()"></child-component>

In our parent component, (usernameEmitter) listens for the event with the message attached to it and when the message is emitted, it captures the data in the $event and sets this.username to the value of $event.

Using @ViewChild

Another simple way is to use the@ViewChild decorator. The child component file remains largely the same and the only changes we will make is to the parent.

import { AfterViewInit, Component, ViewChild } from'@angular/core';
import { ChildComponent } from'./child/child.component';
@Component({
selector:parent-component'
})
exportclassParentComponentimplementsAfterViewInit {
name = 'Welcome Test';
@ViewChild(ChildComponent) child;
constructor() { }
ngAfterViewInit() {
this.name= this.child.name;
}
}
<h2> {{ name }} </h2>
<child-component></child-component>

We are able to pass the value using services, but once the page refreshes the value is not maintained in the service so, at that time again we call the API or some static data which must be assigned the to services. I will brieflyexplain in the next article how to pass the values using services.

I hope this article was mostly helpful.