How to do Component Communication in Angular?

sharepointcafe

December 10, 2018

Share with

In Angular Apps, you are going to come across a scenario where component needs to communicate with each other.

Table of Contents

In this blog, we will see how to send data from one component to another component in Angular application.

You can send data from parent to child or child to parent component.

How to pass data from one component to another component in Angular?

If parent component wants to send data to child component then we have to use @Input decorator
in case child component wants to send data to parent component then we use @Output decorator.

Below diagram explains about communication between component.

Read:- Angular Interview Questions

How to send data from Parent to Child Component?

Let’s demonstrate the component interaction by an example.

We have a by default App component available with every Angular application.

In our case we will create a new component called product.

To create you must follow proper naming convention, so name of product component will be product.component.ts

There is an alternate to create component and that is Angular CLI, and below is the command.

ng generate component product

Now, open app.component.ts file and add below line.

public productName = “Laptop”;

Please refer below screen shot.

Now in parent component within selector we need to bind the property i.e. productName.

Now open child component and add the variable and decorate it with @Input(). See below screen shot.

Finally, you may access the variable name in child component .

Browse the url and you will see the result.

How to send data from Child Component to Parent Component?

To do this we must use @Output() decorator with EventEmitter class.

@Output() public childEvnt = new EventEmitter();

So, final code will look like this.

Child Component –

import { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
  selector: 'app-product',
  templateUrl: './products.component.html',
  styleUrls: ['./products.component.css']
})

export class ProductListComponent {
  title = 'This is a Product List';
  @Input() public parentCompTest;
  @Output() public childEvnt = new EventEmitter();
  Test() {
    this.childEvnt.emit('Welcome to Parent Component');
  }
}

Add below line in child component template –

 <button (click)="Test()">Click Here</button>

In Parent Component Template, write this code

<app-product (childEvnt)="componentTest=$event"></app-product>
<h1>{{componentTest}}</h1>

Or you can use like this, in Parent template file –

<app-product (childEvnt)="getData($event)"></app-product>

In parent ts file –

getData(e)
{
console.log(e);
}

Declare variable in Parent component –

public componentTest = '';

Run your browser and click on button, you will see the result.

Note: Make sure you import EventEmitter class from angular/core

import { Component, Input, Output, EventEmitter } from ‘@angular/core’; and not from protactor. This is because in Visual Studio 2017, if you create instance of EventEmitter the compiler will automatically add import statement from protactor and that is going to give you error in browser.