Passing the Data Between Component in Angular

Posted By : Puneet Sharma | 17-Dec-2018

Input and Output are two decorators is responsible for the communication between the two components. In this post, we will see how to pass data using @Input and how to pass data to flow data back with @Output.

 

How to pass data?

Before we move the input and output decorator to start coding, see how to pass data to any component.

Think that we have two components parents and children, the selector says for the child that hairpiece now, if we are in the parent component, then we will add a feature to the tag inside the parent template.

import { Component } from '@angular/core'

@Component({
  selector: 'my-app',
  template: `
    <child-comp [parentCount]="count"></child-comp>
  `
})

export class App {
  count: number = 10;
}

 

@Input

@Input Decorator, has been passed from one component which is to get the data.

Let's continue with the example above. Now, we have data that is coming from parents, we have to capture data in child component using @Input All we have to do is add a variable with the name as the parent's name and use it to bind the element in the template.


Ex: @Input() parentCount: number; Therefore, the component of the child will look like this.

import { Component, Input } from '@angular/core';

@Component({
  selector: 'child-comp',
  template: `
    <div>
      {{ parentCount }}
    </div>
  `
})

export class ChildComponent {
  @Input()
  parentCount: number;
}

 

@Output

So far, we have only passed data in one direction, i.e., from the basic components to the child component. Now, let's see how to build an important relationship between parents and children.

@Output is not just a single thing that can pass data back from child to parent. We need to use EventEmitter to emit the event so that parents can capture exposed events and recover data.

In order to keep the initial data close to the child component and using the @Output Decorator and the Event emitter, we need to add the @Input Decorator to bring back the updated data.

//import Output, EventEmitter from angular core
import {Component, Input, Output, EventEmitter} from '@angular/core'

//define the event emitter
 @Output()
 change: EventEmitter = new EventEmitter();
 
 //emit the event with the above change event
this.change.emit(11); //11 will be emitted to the parent

In the above code, we have to import the input, output and EventEmitter for pushing the child to parent.

The event emitter will emit for parents to emit() method. Whenever parents should be informed of that change call the last line


import {Component} from '@angular/core'

//import the child component
import {ChildComponent} from 'src/child.component'

@Component({
  selector: 'parent',
  template: `
   <child-comp 
            [parentCount]="count" 
            (change)="updateFromChild($event)"></child-comp>
  `
});

export class ParentComponent {
  count: number = 0; //initial value of count
  
  updateFromChild($event){
    this.count++;
  }
}

 

As you can see, I've added a change to the tag and given a method that can be obtained if the event is emitted. The $event parameter on the UpdateFromChild method will contain content that is sent to the event with the emitted component.

About Author

Author Image
Puneet Sharma

Puneet is an experienced Lead UI Developer, having good knowledge of Angular Js, TypeScript, HTML5, CSS3, Javascript, Jquery, Photoshop.

Request for Proposal

Name is required

Comment is required

Sending message..