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

• HTML, CSS, and JS
• Basics of Typescript.
• Components

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 the 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 the ‘Input’ and ‘Output’ decorators.

Input decorator

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

Output decorator

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

Sharing of data from parent to child component.

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

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public parentProp = "Parent data value";
  title = 'TestApp';
}

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

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

<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <app-test [parentObj]="parentProp"></app-test>
</div>

We have used the selector tag of the child component <app-test> inside the 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 the child component as input property.

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

import { Component, OnInit, Input } from '@angular/core';
@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  @Input() public parentObj = "second";
  constructor() { }
  ngOnInit() {
  }
}

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

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

Run the application

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 which will work the same as that of the above example for accessing parent data.

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

Sharing of data from child to parent component

The sharing of data from the parent component to the child is pretty easy because we already have the child component selector used inside it. But in the case of sharing of data from child component to parent, it is not sent in the same way. How 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.

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styleUrls: ['./test.component.css']
})
export class TestComponent implements OnInit {
  @Input() public parentObj = "second";
  @Output() public childComponentEvent = new EventEmitter();
  sendData() {
    this.childComponentEvent.emit('Child Component data');
  }
  constructor() {
  }
  ngOnInit() {
  }
}

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.

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

We are sending data to the parent component via click event.

Open app.component.html and add the below contents

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

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

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

import { Component } from '@angular/core';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public parentProp = "Parent data value";
  public childData = "";
  title = 'TestApp';
}

Run the application

Click on ‘button’

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