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.
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Puneet Sharma
Puneet is an experienced Lead UI Developer, having good knowledge of Angular Js, TypeScript, HTML5, CSS3, Javascript, Jquery, Photoshop.