Embedded Files
In Angular, component communication is a crucial aspect of building complex applications. It allows different components to share data, coordinate actions, and work together to create a cohesive user experience. In this blog post, we’ll explore the various techniques available for component communication in Angular. By the end, you’ll have a solid understanding of how to establish effective communication between your components. Let’s get started!
Following are the commonly used methods by which one can pass data between components in angular:
Parent to child using @Input decorator
Consider the following parent component:
@Component({
selector: ‘app-parent’,
template: `
<app-child [data]=data></app-child>
` ,
styleUrls: [‘./parent.component.css’]
})
export class ParentComponent{
data:string = “Message from parent”;
constructor() { }
}
In the above parent component, we are passing “data” property to the following child component:
import { Component, Input} from ‘@angular/core’;
@Component({
selector: ‘app-child’,
template:`
<p>{{data}}</p>
`,
styleUrls: [‘./child.component.css’]
})
export class ChildComponent {
@Input() data:string
constructor() { }
}
In the child component, we are using @Input decorator to capture data coming from a parent create tree view mysql php component and using it inside the child component’s template.
Child to parent using @ViewChild decorator
Child component:
import {Component} from ‘@angular/core’;
@Component({
selector: ‘app-child’,
template:`
<p>{{data}}</p>
`,
styleUrls: [‘./child.component.css’]
})
export class ChildComponent {
data:string = “Message from child to parent”;
constructor() { }
}
Parent Component
import { Component,ViewChild, AfterViewInit} from ‘@angular/core’;
import { ChildComponent } from ‘./../child/child.component’;
@Component({
selector: ‘app-parent’,
template: `
<p>{{dataFromChild}}</p>
` ,
styleUrls: [‘./parent.component.css’]
})
export class ParentComponent implements AfterViewInit {
dataFromChild: string;
@ViewChild(ChildComponent,{static:false}) child;
ngAfterViewInit(){
this.dataFromChild = this.child.data;
}
constructor() { }
}
In the above example, a property named “data” is passed from the child component to the parent component.
@ViewChild decorator is used to reference the child component as “child” property.
Using the ngAfterViewInit hook, we assign the child’s data property to the messageFromChild property and use it in the parent component’s template.
Child to parent using @Output and EventEmitter
In this method, we bind a DOM element inside the child component, to an event ( click event for example ) and using this event we emit data that will captured by the parent component:
Child Component:
import {Component, Output, EventEmitter} from ‘@angular/core’;
@Component({
selector: ‘app-child’,
template:`
<button (click)=”emitData()”>Click to emit data</button>
`,
styleUrls: [‘./child.component.css’]
})
export class ChildComponent {
data:string = “Message from child to parent”;
@Output() dataEvent = new EventEmitter<string>();
constructor() { }
emitData(){
this.dataEvent.emit(this.data);
}
}
As you can see in the child component, we have used @Output property to bind an EventEmitter. This event indian blog writing sites emitter emits data when the button in the template is clicked.
In the parent component’s template we can capture the emitted data like this:
<app-child (dataEvent)=”receiveData($event)”></app-child>
Then inside the receiveData function we can handle the emitted data:
receiveData($event){
this.dataFromChild = $event;
}
Page updated
Google Sites
Report abuse