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

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

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

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.


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>

Parent Component Template -

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

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 on browser.


 Hope you like this blog. Please share this blog on social media.


Comments

Popular