Parent-Child Communication Patterns

Angular provides several patterns for component communication. Choosing the right one depends on the relationship between components.

Pattern Selection Guide

Inputs and Outputs (Review)

// Child
@Component({
  selector: 'app-child',
  template: `<p>{{ message }}</p><button (click)="send()">Send</button>`,
})
export class ChildComponent {
  @Input() message!: string;
  @Output() reply = new EventEmitter<string>();

  send(): void {
    this.reply.emit('Response from child');
  }
}

// Parent
@Component({
  selector: 'app-parent',
  template: `
    <app-child [message]="parentMessage" (reply)="onReply($event)"></app-child>
    <p>{{ childReply }}</p>
  `,
})
export class ParentComponent {
  parentMessage = 'Hello child';
  childReply = '';

  onReply(message: string): void {
    this.childReply = message;
  }
}

@ViewChild — Parent Accessing Child

@Component({
  selector: 'app-parent',
  template: `<app-child></app-child><button (click)="childMethod()">Call Child</button>`,
})
export class ParentComponent implements AfterViewInit {
  @ViewChild(ChildComponent) child!: ChildComponent;

  ngAfterViewInit(): void {
    // Safe to access child here
  }

  childMethod(): void {
    this.child.someMethod();
  }
}

@ContentChild — Accessing Projected Content

@Component({
  selector: 'app-wrapper',
  template: `<div class="wrapper"><ng-content></ng-content></div>`,
})
export class WrapperComponent implements AfterContentInit {
  @ContentChild('projectedHeader') header!: ElementRef;

  ngAfterContentInit(): void {
    console.log('Projected header:', this.header?.nativeElement.textContent);
  }
}

<app-wrapper>
  <h1 #projectedHeader>Hello</h1>
  <p>Content goes here</p>
</app-wrapper>

When components are not in a parent-child relationship, a shared service with an Observable enables communication.

Shared Service Pattern

@Injectable({ providedIn: 'root' })
export class MessageService {
  private messages = new BehaviorSubject<string[]>([]);
  messages$ = this.messages.asObservable();

  addMessage(message: string): void {
    this.messages.next([...this.messages.getValue(), message]);
  }

  clear(): void {
    this.messages.next([]);
  }
}

// Component A — sends messages
@Component({
  selector: 'app-sender',
  template: `
    <input [(ngModel)]="newMessage">
    <button (click)="send()">Send</button>
  `,
})
export class SenderComponent {
  newMessage = '';

  constructor(private messageService: MessageService) {}

  send(): void {
    this.messageService.addMessage(this.newMessage);
    this.newMessage = '';
  }
}

// Component B — receives messages
@Component({
  selector: 'app-receiver',
  template: `
    <div *ngFor="let msg of messages$ | async">
      {{ msg }}
    </div>
  `,
})
export class ReceiverComponent {
  messages$ = this.messageService.messages$;

  constructor(private messageService: MessageService) {}
}

Why Not Use @Input/@Output for Siblings?

Inputs and outputs require a direct parent-child relationship. For siblings, you would need to:

1. Lift state to the common parent
2. Pass data down through inputs
3. Emit events up through outputs

This creates prop drilling and tight coupling. A shared service is cleaner.

Signal-Based Service Communication (Modern)

@Injectable({ providedIn: 'root' })
export class CartService {
  private items = signal<CartItem[]>([]);
  readonly cartItems = this.items.asReadonly();

  addItem(item: CartItem): void {
    this.items.update(items => [...items, item]);
  }

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

  get total(): number {
    return this.items().reduce((sum, item) => sum + item.price, 0);
  }
}

@Component({
  selector: 'app-cart-icon',
  template: `<span class="badge">{{ cartService.cartItems().length }}</span>`,
})
export class CartIconComponent {
  constructor(public cartService: CartService) {}
}