Angular Emit Event: A Comprehensive Guide to Parent-to-Child Component Communication
Introduction
Angular is a powerful web application framework known for its component-based architecture, which promotes modularity and code reusability. While Angular provides several mechanisms for components to communicate, in this blog post, we'll focus on parent-to-child communication using the @Input()
decorator and a custom event emitter. We'll guide you through the implementation process, ensuring you can effectively apply this pattern in your Angular applications.
Overview of Angular Components and Communication
Components in Angular
Angular applications are made up of a hierarchy of components, which are reusable, encapsulated UI elements with their logic, template, and styles. Components provide the building blocks for complex user interfaces and facilitate the creation of maintainable applications.
Component Communication In Angular,
there are multiple ways for components to communicate, including input/output properties, services, and event emitters. In this blog, we'll focus on using input properties and a custom event emitter for parent-to-child component communication.
Implementing Parent-to-Child Communication Using @Input()
The @Input() Decorator
The @Input()
decorator is a simple and effective way for parent components to pass data to child components. By marking a property in the child component with the @Input()
decorator, we can bind it to a value in the parent component's template.
Example:
Passing Data from Parent to Child Using @Input() Parent component TypeScript file:
// parent.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-parent',
template: ` <app-child [message]="parentMessage"></app-child> `,
})
export class ParentComponent {
parentMessage = 'Hello from the parent component!';
}
Child component TypeScript file:
// child.component.ts
import { Component, Input } from '@angular/core';
@Component({
selector: 'app-child',
template: ` <p>Message from parent: { { message }}</p> `,
})
export class ChildComponent {
@Input() message: string;
}
Implementing Parent-to-Child Communication Using a Custom EventEmitter
Creating a Custom EventEmitter in the Parent Component
To create a custom event emitter, import the EventEmitter
class from the @angular/core
module and instantiate it as a property of the parent component. This event emitter will be used to pass data to the child component.
Example:
// parent.component.ts
import { Component, EventEmitter } from '@angular/core';
@Component({
selector: 'app-parent',
template: ` <app-child [eventEmitter]="parentEmitter"></app-child> `,
})
export class ParentComponent {
parentEmitter = new EventEmitter<string>();
ngOnInit() {
this.parentEmitter.emit('Hello from the parent component!');
}
}
Using a Custom EventEmitter in the Child Component
To receive the custom event emitter from the parent component, use the @Input()
decorator in the child component. Then, create a method in the child component to handle the emitted events.
Example:
// child.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { EventEmitter } from '@angular/core';
@Component({
selector: 'app-child',
template: ` <p>Message from parent: { { message } }</p> `,
})
export class ChildComponent implements OnInit { @
Input() eventEmitter: EventEmitter<string>;
message: string;
ngOnInit(): void {
this.subscribeToParentEmitter();
}
subscribeToParentEmitter(): void {
this.eventEmitter.subscribe((data: string) => {
this.message = data;
});
}
}
Unsubscribing from the EventEmitter
Implementing the OnDestroy Lifecycle Hook
When subscribing to an event emitter, it's important to unsubscribe from it when the component is destroyed to prevent memory leaks. To do this, implement the OnDestroy
lifecycle hook in the child component and unsubscribe from the event emitter when the component is destroyed.
Example:
// child.component.ts
import { Component, Input, OnInit, OnDestroy } from '@angular/core';
import { EventEmitter } from '@angular/core';
import { Subscription } from 'rxjs';
@Component({
selector: 'app-child',
template: ` <p>Message from parent: { { message } }</p> `,
})
export class ChildComponent implements OnInit, OnDestroy {
@Input() eventEmitter: EventEmitter<string>;
message: string;
private subscription: Subscription;
ngOnInit(): void {
this.subscribeToParentEmitter();
}
ngOnDestroy(): void {
this.subscription.unsubscribe();
}
subscribeToParentEmitter(): void {
this.subscription = this.eventEmitter.subscribe((data: string) => {
this.message = data;
});
}
}
Conclusion
Parent-to-child component communication is crucial for building maintainable and scalable Angular applications. By understanding how to use the @Input()
decorator and custom event emitters, you can efficiently pass data between parent and child components, ensuring smooth communication in your Angular applications.