Angular Component Communication

Angular applications modular होते हैं, इसलिए components के बीच data और events share करना बहुत जरूरी है। Component communication में तीन main patterns हैं:

1. Parent → Child (Input)
2. Child → Parent (Output + EventEmitter)
3. Sibling / Service-based Communication

इस chapter में आप सीखेंगे:

• Parent → Child communication
• Child → Parent communication
• Sibling components के बीच communication
• Service-based data sharing
• Best practices

1. Parent → Child Communication (@Input)

Parent component से child component को data pass करना Input property से possible है।

Example

// child.component.ts
import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<p>Message from parent: {{ message }}</p>`
})
export class ChildComponent {
  @Input() message!: string;
}

<!-- parent.component.html -->
<app-child [message]="'Hello from Parent!'"></app-child>

Explanation

• @Input() decorator child को parent data accept करने देता है
• [message] parent template में bind property है
• Child template में {{ message }} display होगा

2. Child → Parent Communication (@Output + EventEmitter)

Child component parent को events or data भेज सकता है।

Example

// child.component.ts
import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `<button (click)="notifyParent()">Notify Parent</button>`
})
export class ChildComponent {
  @Output() notify = new EventEmitter<string>();

  notifyParent() {
    this.notify.emit('Hello from Child!');
  }
}

<!-- parent.component.html -->
<app-child (notify)="onNotify($event)"></app-child>

// parent.component.ts
onNotify(message: string) {
  alert(message);
}

Explanation

• @Output() → parent template में event bind करने के लिए
• EventEmitter → data emit करने के लिए
• (notify) → parent template में event handle करता है
• $event → child से emit हुआ data

3. Sibling Component Communication

Sibling components directly communicate नहीं कर सकते। इसके लिए shared service use करना best है।

Shared Service Example

// data.service.ts
import { Injectable } from '@angular/core';
import { BehaviorSubject } from 'rxjs';

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

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

// sibling1.component.ts
constructor(private dataService: DataService) {}

sendMessage() {
  this.dataService.updateMessage('Hello from Sibling 1');
}

// sibling2.component.ts
constructor(private dataService: DataService) {
  this.dataService.currentMessage.subscribe(msg => {
    console.log('Received:', msg);
  });
}

Explanation

• BehaviorSubject reactive data stream provide करता है
• Sibling1 update करता है, Sibling2 automatically receive करता है
• Service singleton nature से data globally available रहता है

4. ViewChild / ContentChild

Parent component child component के methods और properties को directly access कर सकता है:

// child.component.ts
export class ChildComponent {
  showAlert() {
    alert('Called from parent!');
  }
}

// parent.component.ts
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { ChildComponent } from './child.component';

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

  callChild() {
    this.child.showAlert();
  }
}

Explanation

• @ViewChild() → child component reference access करता है
• Parent method child method call कर सकती है

Best Practices

• Simple data → Input/Output
• Sibling communication → shared service + RxJS
• Complex parent-child interaction → ViewChild / ContentChild
• Avoid tightly coupling components
• Use observables for reactive and scalable communication

Summary

इस chapter में आपने सीखा:

• Parent → Child communication with @Input
• Child → Parent communication with @Output and EventEmitter
• Sibling communication using shared services and BehaviorSubject
• Parent access to child methods using @ViewChild
• Best practices for scalable component communication