Communication Between Components via Services

Services are an excellent way for components to communicate - like messengers between castles.

Example: Shared State Service

import { Injectable, signal, computed } from '@angular/core';

export interface CartItem {
  id: number;
  name: string;
  quantity: number;
  price: number;
}

@Injectable({ providedIn: 'root' })
export class CartService {
  // State as signals
  private items = signal<CartItem[]>([]);

  // Computed values
  readonly cartItems = this.items.asReadonly();
  readonly totalItems = computed(() =>
    this.items().reduce((sum, item) => sum + item.quantity, 0)
  );
  readonly totalPrice = computed(() =>
    this.items().reduce((sum, item) => sum + item.price * item.quantity, 0)
  );

  addItem(item: Omit<CartItem, 'quantity'>): void {
    const existing = this.items().find(i => i.id === item.id);
    if (existing) {
      this.items.update(items =>
        items.map(i => i.id === item.id
          ? { ...i, quantity: i.quantity + 1 }
          : i
        )
      );
    } else {
      this.items.update(items => [...items, { ...item, quantity: 1 }]);
    }
  }

  removeItem(id: number): void {
    this.items.update(items => items.filter(i => i.id !== id));
  }

  clearCart(): void {
    this.items.set([]);
  }
}

Usage in Components

// header.component.ts - displays the count
@Component({
  template: `<span>{{ cartService.totalItems() }}</span>`
})
export class HeaderComponent {
  cartService = inject(CartService);
}

// product.component.ts - adds to cart
@Component({
  template: `<button (click)="addToCart()">Add</button>`
})
export class ProductComponent {
  private cartService = inject(CartService);

  addToCart(): void {
    this.cartService.addItem({
      id: this.product.id,
      name: this.product.name,
      price: this.product.price
    });
  }
}