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:

code// 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:

code// 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:

code// 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:

code// 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:

code// 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.