how to pass data between 2 child components in angular

Daniel Parker

3 min read

·

07-02-2025

1

0

Share

Passing data between child components in Angular can seem tricky at first, but there are several effective strategies. Directly accessing another component's properties is not recommended due to encapsulation and maintainability concerns. Instead, we'll explore the best practices leveraging Angular's features. This article will focus on using a parent component as an intermediary for data flow.

Understanding the Problem

Angular components are designed to be self-contained and reusable. This encapsulation, while beneficial, creates a challenge when one child component needs to communicate directly with another. Trying to directly access a sibling component's properties breaks encapsulation and makes your code harder to maintain and test.

Solution: Using a Parent Component as an Intermediary

The recommended approach is to route data communication through their shared parent component. The parent acts as a central hub, managing data flow between its children. Let's explore this method with a practical example.

Example Scenario: A Shopping Cart and Product Details

Imagine an e-commerce application. You have a product-details component displaying product information and a shopping-cart component showing the added items. When a product is added from the product-details component, the shopping-cart component needs to update its display.

1. Parent Component (app.component.ts):

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

@Component({
  selector: 'app-root',
  template: `
    <div>
      <app-product-details (productAdded)="addProductToCart($event)"></app-product-details>
      <app-shopping-cart [cart]="cart"></app-shopping-cart>
    </div>
  `,
})
export class AppComponent {
  cart: any[] = [];

  addProductToCart(product: any) {
    this.cart.push(product);
  }
}

This parent component declares a cart array. It uses @Output() in the product-details component and @Input() in the shopping-cart component to manage data flow.

2. Child Component 1 (product-details.component.ts):

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

@Component({
  selector: 'app-product-details',
  template: `
    <button (click)="addProduct()">Add to Cart</button>
  `,
})
export class ProductDetailsComponent {
  @Output() productAdded = new EventEmitter<any>();

  addProduct() {
    const product = { name: 'Example Product', price: 10 };
    this.productAdded.emit(product);
  }
}

The product-details component emits an event (productAdded) when the "Add to Cart" button is clicked, sending the product data to the parent.

3. Child Component 2 (shopping-cart.component.ts):

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

@Component({
  selector: 'app-shopping-cart',
  template: `
    <ul>
      <li *ngFor="let item of cart">
        {{ item.name }} - ${{ item.price }}
      </li>
    </ul>
  `,
})
export class ShoppingCartComponent {
  @Input() cart: any[] = [];
}

The shopping-cart component receives the updated cart array from the parent component via @Input().

Alternative: Using a Service

For more complex applications or when components aren't directly related through a parent-child hierarchy, using a service is a better solution. A service acts as a central data store and communication channel.

1. Create a Service:

import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CartService {
  private cartSource = new BehaviorSubject<any[]>([]);
  cart$ = this.cartSource.asObservable();

  addToCart(product: any) {
    const currentCart = this.cartSource.value;
    this.cartSource.next([...currentCart, product]);
  }
}

2. Inject the service into components:

Both the product-details and shopping-cart components would inject this service and use its methods to add products and subscribe to cart updates.

Choosing the Right Approach

• Parent Component Intermediary: Best for simpler applications where components have a clear parent-child relationship. This method is simpler to implement and understand.

• Service: Best for larger applications, components with less clear hierarchical relationships, or when multiple components need to share and update the same data. This is more scalable and maintainable for complex scenarios.

Remember to always prioritize clean, maintainable code. Avoid direct communication between sibling components; leverage the power of Angular's features for a well-structured application. Choosing between parent component mediation and a service depends on the complexity and structure of your project.