Child to Parent Communication in Angular 18: A Complete Guide Using Angular EventEmitter

Last updated on January 19th, 2025

Learn how to implement child-to-parent communication in Angular 18 using EventEmitter. A step-by-step guide with examples and best practices.

Introduction to Angular EventEmitter

Angular’s EventEmitter is a core feature that facilitates the communication between child and parent components. It allows a child component to send data or trigger an event that can be handled by the parent component. In this guide, we’ll demonstrate how to use EventEmitter to build a shopping cart application with two components—a parent component and a child component.

Understanding Parent-Child Communication in Angular

Parent-child communication in Angular can be achieved through:

1. Input Properties – Passing data from parent to child.
2. Output Properties and EventEmitter – Sending data or events from child to parent.
3. Service-Based Communication – Using shared services for complex communication.

This article focuses on the second approach, leveraging Angular’s EventEmitter and @Output decorator for child-to-parent communication.

Setting Up the Shopping Cart Application

Prerequisites

1. Node.js and Angular CLI installed.
2. Basic understanding of TypeScript and Angular.

If you are new to angular refer Angular project Setup Step by Step Practical Tutorial – Full Stack Tutorials Hub.

Project Initialization

1. Create a new Angular project:

ng new shopping-cart
cd shopping-cart

Generate the parent and child components:

ng generate component parent
ng generate component child

Creating the Parent and Child Components

Parent Component: app-parent.component.ts

The parent component will display the list of items in the cart and handle events emitted by the child component.

import { Component } from '@angular/core';

@Component({
  selector: 'app-parent',
  template: `
    <h1>Shopping Cart</h1>
    <app-child (addToCart)="handleAddToCart($event)"></app-child>
    <h2>Cart Items:</h2>
    <ul>
      <li *ngFor="let item of cartItems">{{ item }}</li>
    </ul>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {
  cartItems: string[] = [];

  handleAddToCart(item: string) {
    this.cartItems.push(item);
  }
}

Child Component: app-child.component.ts

The child component will display a list of products and emit an event when an item is added to the cart.

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
    <h2>Product List</h2>
    <ul>
      <li *ngFor="let product of products">
        {{ product }} <button (click)="addToCart(product)">Add to Cart</button>
      </li>
    </ul>
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {
  @Output() addToCart = new EventEmitter<string>();

  products = ['Apple', 'Banana', 'Cherry'];

  addToCart(product: string) {
    this.addToCart.emit(product);
  }
}

Implementing EventEmitter in the Shopping Cart Application

The shopping cart application utilizes EventEmitter to facilitate communication between the child and parent components. Here’s how it works in detail:

1. Child Component Behavior:
   • The products array in the child component contains a list of items (e.g., Apple, Banana, Cherry).When the user clicks the “Add to Cart” button, the addToCart method is triggered.This method emits an event using the addToCart EventEmitter, passing the selected product as an argument.
   Example:

addToCart(product: string) {
  this.addToCart.emit(product);
}

2.Parent Component Behavior:

• The parent component listens to the addToCart event from the child component using Angular’s event binding syntax: (addToCart)="handleAddToCart($event)".
• The handleAddToCart method is triggered whenever the event is emitted, receiving the product name as the $event parameter.
• The product is then added to the cartItems array, dynamically updating the shopping cart display.

Example:

handleAddToCart(item: string) {
  this.cartItems.push(item);
}

3.Dynamic UI Updates:

• The parent component’s template uses Angular’s *ngFor directive to loop through the cartItems array and display each product as a list item.
• As items are added to the cart, the UI updates automatically.

4.Scalability:

This architecture is scalable, allowing you to expand the child component to include more features (e.g., product quantity, price) and pass that data to the parent component.

Property binding is another essential aspect of Angular communication. It enables you to pass values dynamically from the parent to the child component. For a detailed guide on property binding, refer to the Property Binding in Angular 18: Step by Step Guide with Example – Full Stack Tutorials Hub.

Best Practices for Angular EventEmitter

1. Use Clear Event Names: Ensure the event names are descriptive and self-explanatory.
2. Avoid Overusing EventEmitter: For complex communication, consider using shared services.
3. Use Strong Typing: Always define the type of data being emitted.