Angular Component Communication: Complete Guide | @Input @Output EventEmitter & ViewChild

When I first started working with Angular, component communication was one of the most confusing aspects of the framework. I'd find myself passing data through multiple levels of components, creating complex event chains, or resorting to global state when a simpler solution existed. It took building several applications before I understood when to use each communication pattern.

The truth is, Angular gives you many ways to share data between components, and each has its place. @Input and @Output are perfect for parent-child relationships. ViewChild lets you access child components directly. Services with RxJS are ideal for sibling communication or sharing state across the app. Understanding which pattern to use when is crucial for building maintainable Angular applications.

What is Angular Component Communication?

Angular Component Communication provides multiple patterns:

• @Input - Pass data from parent to child (one-way data flow)
• @Output - Emit events from child to parent
• ViewChild/ViewChildren - Access child components directly
• ContentChild/ContentChildren - Access projected content
• Services with RxJS - Share data between any components
• Route Data - Pass data through navigation

Parent to Child: Using @Input

The most common communication pattern in Angular is passing data from parent to child using @Input. This is Angular's way of implementing one-way data flow:

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

@Component({
  selector: 'app-business-settings',
  templateUrl: './business-settings.component.html'
})
export class BusinessSettingsComponent {
  @Input() public manageBusiness: boolean;
  @Input() public businessInfo: any;
  @Input() public viewDetails: boolean = false;
}

// Parent Component Template
<app-business-settings
  [manageBusiness]="canManage"
  [businessInfo]="currentBusiness"
  [viewDetails]="isViewMode">
</app-business-settings>

Child to Parent: @Output and EventEmitter

Emit events from child to parent using @Output with EventEmitter:

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

@Component({
  selector: 'app-business-settings',
  templateUrl: './business-settings.component.html'
})
export class BusinessSettingsComponent {
  @Output() public refresh: EventEmitter<boolean> = new EventEmitter<boolean>();

  public save(): void {
    this.refresh.emit(true);
  }
}

// Parent Component Template
<app-business-settings (refresh)="handleRefresh($event)"></app-business-settings>

Service-Based Communication

Share data between any components using services with RxJS:

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

@Injectable({ providedIn: 'root' })
export class DataSharingService {
  private dataSubject = new BehaviorSubject<any>(null);
  public data$ = this.dataSubject.asObservable();

  setData(data: any): void {
    this.dataSubject.next(data);
  }
}

// Component 1 (Sender)
export class Component1 {
  constructor(private dataService: DataSharingService) {}
  sendData(): void {
    this.dataService.setData({ message: 'Hello' });
  }
}

// Component 2 (Receiver)
export class Component2 implements OnInit, OnDestroy {
  private subscription: Subscription;

  constructor(private dataService: DataSharingService) {}

  ngOnInit(): void {
    this.subscription = this.dataService.data$.subscribe(data => {
      this.data = data;
    });
  }

  ngOnDestroy(): void {
    this.subscription?.unsubscribe();
  }
}

Choosing the Right Pattern

Here's my decision framework:

• Parent to Child? → Use @Input
• Child to Parent? → Use @Output with EventEmitter
• Need to Access Child Methods? → Use ViewChild or ViewChildren
• Sibling Components or App-Wide State? → Use Service with RxJS
• Need to Access Projected Content? → Use ContentChild or ContentChildren

The key is to start with the simplest pattern that works (@Input/@Output), and only move to more complex solutions when you actually need them.

Best Practices

1. Use @Input for one-way data flow from parent to child
2. Use @Output with EventEmitter for child to parent communication
3. Use services with RxJS for sibling component communication
4. Use ViewChild/ViewChildren to access child component APIs
5. Unsubscribe from observables to prevent memory leaks
6. Keep component communication simple and explicit

📖 Read the Complete Guide

This is just a brief overview! The complete guide on my blog includes:

• ✅ Detailed code examples for all communication patterns
• ✅ @Input with setters and ngOnChanges - Reacting to input changes
• ✅ ViewChild and ViewChildren - Accessing child components
• ✅ ContentChild and ContentChildren - Working with projected content
• ✅ Two-way data binding implementation
• ✅ Advanced patterns - Combining multiple communication methods
• ✅ Route data passing - Sharing data through navigation
• ✅ Memory leak prevention - Proper subscription management
• ✅ Real-world examples from production applications
• ✅ Troubleshooting tips and common pitfalls
• ✅ Performance optimization strategies

👉 Read the full article with all code examples here

What's your experience with Angular Component Communication? Share your tips in the comments! 🚀

For more Angular guides, check out my blog covering Reactive Forms, Services, Guards, and more.