Why component communication matters in Angular

Introduction

Components in Angular are like small parts of a big machine. They need to talk to each other to work together and make the app useful.

When a child component needs to send data to its parent component.

When a parent component wants to pass information down to a child component.

When sibling components need to share data or react to each other's changes.

When different parts of the app need to stay updated with the same information.

When you want to keep your app organized by separating concerns into components.

Syntax

Angular

Use @Input() to receive data from a parent component.
Use @Output() with EventEmitter to send data to a parent component.
Use a shared service with RxJS Subjects or Signals for communication between unrelated components.

@Input() and @Output() are decorators that help components share data up and down the component tree.

Services can be used to share data across components that do not have a direct parent-child relationship.

Examples

This lets a child component receive a message from its parent.

Angular

@Input() childMessage: string;

This lets a child component send a message to its parent.

Angular

@Output() messageEvent = new EventEmitter<string>();

sendMessage() {
  this.messageEvent.emit('Hello from child');
}

A service that allows components to share messages using RxJS Subjects.

Angular

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

@Injectable({ providedIn: 'root' })
export class SharedService {
  private messageSource = new Subject<string>();
  currentMessage = this.messageSource.asObservable();

  changeMessage(message: string) {
    this.messageSource.next(message);
  }
}

Sample Program

This example shows a parent component sending a message to a child using @Input(). The child sends a message back using @Output() and an event. The parent listens and displays the child's message.

Angular

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

@Component({
  selector: 'app-child',
  template: `
    <p>Child says: {{ childMessage }}</p>
    <button (click)="sendMessage()">Send Message to Parent</button>
  `,
  standalone: true
})
export class ChildComponent {
  @Input() childMessage = '';
  @Output() messageEvent = new EventEmitter<string>();

  sendMessage() {
    this.messageEvent.emit('Hello Parent!');
  }
}

@Component({
  selector: 'app-parent',
  template: `
    <h2>Parent Component</h2>
    <app-child [childMessage]="parentMessage" (messageEvent)="receiveMessage($event)"></app-child>
    <p>Message from child: {{ messageFromChild }}</p>
  `,
  imports: [ChildComponent],
  standalone: true
})
export class ParentComponent {
  parentMessage = 'Hello Child!';
  messageFromChild = '';

  receiveMessage(message: string) {
    this.messageFromChild = message;
  }
}

Important Notes

Always use @Input() and @Output() for parent-child communication to keep components clear and reusable.

For sibling or distant components, use shared services with RxJS or Angular signals to communicate.

Good communication between components helps keep your app organized and easier to maintain.

Summary

Components need to share data to work together smoothly.

Use @Input() and @Output() for parent-child data flow.

Use services for communication between unrelated components.