Welcome to our comprehensive guide on Angular's Parent-to-Child Communication! This tutorial is designed to help beginners and intermediate learners alike understand how to effectively communicate between components in an Angular application. Let's dive in!
<a name="understanding-angular-components"></a>
In Angular, a component is a reusable and self-contained building block that consists of three parts:
Each component has an isolated view of its own. However, we can communicate between components to share data and functionality.
<a name="parent-component"></a>
The parent component is the main component that contains the child component. It is responsible for initializing the child component and providing it with the necessary data.
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
<h2>Parent Component</h2>
<app-child [data]="parentData"></app-child>
`
})
export class ParentComponent {
public parentData = 'Hello from Parent!';
}In the example above, we have a ParentComponent that contains a template with a child component app-child and a data binding [data] to pass data to the child component.
<a name="child-component"></a>
The child component is the component that receives data from the parent component. It can use this data to display dynamic content or perform some action.
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<h3>Child Component</h3>
<p>Received Data: {{ data }}</p>
`
})
export class ChildComponent {
@Input() data: string;
}In the example above, we have a ChildComponent that uses the @Input() decorator to receive data from the parent component. The received data is then displayed in the component's template.
<a name="simple-parent-to-child-communication"></a>
To establish simple parent-to-child communication, you can pass data from the parent component to the child component using the @Input() decorator.
// parent.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
<h2>Parent Component</h2>
<app-child [data]="parentData"></app-child>
`
})
export class ParentComponent {
public parentData = 'Hello from Parent!';
}
// child.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<h3>Child Component</h3>
<p>Received Data: {{ data }}</p>
`
})
export class ChildComponent {
@Input() data: string;
}In this example, the ParentComponent passes the parentData to the ChildComponent via the @Input() decorator. The ChildComponent then displays the received data in its template.
<a name="advanced-parent-to-child-communication"></a>
For more complex scenarios, you can use the EventEmitter to communicate from child to parent and pass data from parent to child.
// child.component.ts
import { Component, EventEmitter, Input, Output } from '@angular/core';
@Component({
selector: 'app-child',
template: `
<h3>Child Component</h3>
<button (click)="onClick()">Send Message</button>
`
})
export class ChildComponent {
@Output() messageEvent = new EventEmitter<string>();
public onClick() {
this.messageEvent.emit('Hello from Child!');
}
}
// parent.component.ts
import { Component, Input, Output } from '@angular/core';
@Component({
selector: 'app-parent',
template: `
<h2>Parent Component</h2>
<app-child (messageEvent)="handleMessage($event)"></app-child>
`
})
export class ParentComponent {
public handleMessage(message: string) {
console.log('Received message:', message);
}
}In this example, the ChildComponent emits a message when the "Send Message" button is clicked. The ParentComponent catches this event and logs the received message.
<a name="quiz"></a>
What is the purpose of the `@Input()` decorator in Angular?
That's it for our Parent-to-Child Communication tutorial! We hope you found this guide helpful. Happy coding! 🎉🚀