Sharing Data Between Components In Angular

Introduction

In this article, we are going learn how to share data between the components. Sometimes we want the data from one component to be sent from one component to another to perform a certain operation. The data can be sent in two ways,

  1. Parent component to child component.
  2. Child component to parent component.

prerequisites

Let us create a sample TestApp. For this you should have installed the below for the development environment,

  1. Node
  2. Npm (comes when you install node)
  3. Angular CLi.
  4. Text Editor.

For creating a new application run the below command on your location.

> ng new TestApp

Create a new component.

> ng g c test

Once your command is completed, you will have a TestApp folder created inside your sample folder.

Now, you will have your project folder called 'TestApp'.

Note
See my previous article “Getting started with Angular CLI.” If you want the installation and introduction from the basics, start with the execution of sample application.

We will create a TestApp and we will have an AppComponent as a parent component and we will create a testComponent which we will treat as a child component.

Let us start the sharing of simple data from one component to another and achieve the component interaction functionality in Angular.

Sharing of data between components is possible via ‘Input’ and ‘Output’ decorator.

Input decorator

The input decorator ‘@Input()’ is used to send the data from parent component to the child component.

Output decorator

The output decorator ‘@Output()’ is used to send data from the child component to parent component.

Sharing of data from parent to child component.

Open app.component.ts and add the below contents,

  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-root',  
  5.   templateUrl: './app.component.html',  
  6.   styleUrls: ['./app.component.css']  
  7. })  
  8. export class AppComponent {  
  9.   public parentProp = "Parent data value";  
  10.   title = 'TestApp';  
  11. }  

We have added a property ‘parentProp’ and we will send this property value to child component; i.e test component.

Open app.component.html and add the below contents,

  1. <div style="text-align:center">  
  2.   <h1>  
  3.     Welcome to {{ title }}!  
  4.   </h1>  
  5.   <app-test [parentObj]="parentProp"></app-test>  
  6. </div>  

We have used the selector tag of child component <app-test> inside app component. There we will pass the property value by assigning it to some name, say ‘parentObj’. This named property ‘parentObj’ will be used in child component as input property.

Open test.component.ts and add the below contents,

  1. import { Component, OnInit, Input } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-test',  
  5.   templateUrl: './test.component.html',  
  6.   styleUrls: ['./test.component.css']  
  7. })  
  8. export class TestComponent implements OnInit {  
  9.   @Input() public parentObj = "second";    
  10.   constructor() { }  
  11.   ngOnInit() {  
  12.   }  
  13. }  

Open test.component.html and add the below contents,

  1. <h2>This is Child component. i.e Test component!</h2>  
  2. <h3>Data from parent component - {{parentObj}}</h3>  

Run the application,

Sharing Data Between Components In Angular

Name aliasing

If we want the property name to be different  in component then we can use aliasing of property.

Eg: @Input (‘parentObj’) public prop1;

Now, in our HTML template, we will use prop1 that will work the same as that of the above example for accessing parent data.

  1. <h2>This is Child component. i.e Test component!</h2>  
  2. <h3>Data from parent component - {{prop1}}</h3>  
Sharing of data from child to parent component

The sharing of data from parent component to the child is pretty easy because we are already having the child component selector used inside it. But in case of sharing of data from child component to parent, it is not sending in the same way. The way in which data is  sent from child to parent is via ‘event’.

Let us define a simple property called ‘childProp’ and display its content to the parent component; i.e app component.

Open test.component.ts and add the below contents.

  1. import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-test',  
  5.   templateUrl: './test.component.html',  
  6.   styleUrls: ['./test.component.css']  
  7. })  
  8. export class TestComponent implements OnInit {  
  9.   
  10.   @Input() public parentObj = "second";  
  11.     
  12.   @Output() public childComponentEvent = new EventEmitter();  
  13.     
  14.   sendData(){  
  15.     this.childComponentEvent.emit('Child Component data');  
  16.   }  
  17.   
  18.   constructor() {  
  19.    }  
  20.   
  21.   ngOnInit() {  
  22.   }  
  23. }  

Import EventEmitter from @angular/core.

To send this ‘childComponentEvent’ to the parent component we use ‘output’ decorator.

We will use some method to emit the data from the child component to the parent component.

Open test.compnent.html and add the below contents.

  1. <h2>This is Child component. i.e Test component!</h2>  
  2. <h3>Data from parent component - {{parentObj}}</h3>  
  3. <button (click) = "sendData()">Send to parent</button>  

We are sending data to parent component via click event.

Open app.component.html and add the below contents

  1. <div style="text-align:center">  
  2.   <h1>  
  3.     Welcome to {{ title }}!  
  4.   </h1>  
  5.   <app-test (childComponentEvent)="childData=$event" [parentObj]="parentProp"></app-test>  
  6. </div>  

We are taking the value in property ‘childData’ so we have to declare it in the component class. $event is the value that is being emitted from child component event.

Declare this property in parent component; i.e. in app.component.ts

  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'app-root',  
  5.   templateUrl: './app.component.html',  
  6.   styleUrls: ['./app.component.css']  
  7. })  
  8. export class AppComponent {  
  9.   public parentProp = "Parent data value";  
  10.   public childData = "";  
  11.   title = 'TestApp';  
  12. }  

Run the application,

Sharing Data Between Components In Angular 

Click on ‘button’

Sharing Data Between Components In Angular 

That’s all about component interaction with the help of sharing of data from one component to another.


Similar Articles