In Angular, communication between parent and child components is an essential concept for building structured applications. When passing data from a parent to a child component, Angular uses the @Input() decorator. This allows the parent component to bind and send data into the child component through property binding, making it easy to display or use that data inside the child.
On the other hand, communication from a child to a parent component is done using the @Output() decorator along with an EventEmitter. The child component emits an event when something happens (like a button click), and the parent component listens to that event and reacts accordingly. This creates a clear and organized flow of data, where parents control inputs and children notify parents about changes or actions.
Part 1: Parent to Child Component Data Pass
1.
Parent Component
parent.component.ts
import
{ Component } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html'
})
export
class ParentComponent {
message: string = "Hello from Parent
Component!";
student = {
name: "Ali",
rollNo: 101
};
}
parent.component.html
<h2>Parent
Component</h2>
<!--
Sending string -->
<app-child
[data]="message"></app-child>
<!--
Sending object -->
<app-child
[data]="student"></app-child>
2.
Child Component
child.component.ts
import
{ Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html'
})
export
class ChildComponent {
@Input() data: any;
}
child.component.html
<h3>Child
Component</h3>
<!--
Display string -->
<p
*ngIf="data && data.name === undefined">
Message: {{ data }}
</p>
<!--
Display object -->
<div
*ngIf="data && data.name">
<p>Name: {{ data.name }}</p>
<p>Roll No: {{ data.rollNo }}</p>
</div>
Part 2: Child to Parent Component Data Pass
1.
Parent Component
parent.component.ts
import
{ Component } from '@angular/core';
@Component({
selector: 'app-parent',
templateUrl: './parent.component.html'
})
export
class ParentComponent {
receivedMessage: string = '';
// Function to receive data from child
getMessage(message: string) {
this.receivedMessage = message;
}
}
parent.component.html
<h2>Parent
Component</h2>
<!--
Child Component -->
<app-child
(messageEvent)="getMessage($event)"></app-child>
<!--
Display received data -->
<p
*ngIf="receivedMessage">
Received from Child: {{ receivedMessage }}
</p>
2.
Child Component
child.component.ts
import
{ Component, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
templateUrl: './child.component.html'
})
export
class ChildComponent {
@Output() messageEvent = new
EventEmitter<string>();
sendMessage() {
this.messageEvent.emit("Hello from
Child Component!");
}
}
child.component.html
<h3>Child
Component</h3>
<button
(click)="sendMessage()">Send Message to Parent</button>
This is how the data is displayed when the code runs in Angular.
Output: Parent to Child Communication
Parent Component
Child Component
Message: Hello from Parent Component!
Child Component
Name: Ali
Roll No: 101
Output: Child to Parent Communication
Parent Component
Child Component
[Button: Send Message to Parent]
👉 When the button is clicked:
Received from Child: Hello from Child Component!
Comments
Post a Comment