Component Communication

export class ParentComponent {
  selectedProduct = { id: 1, name: 'Laptop', price: 999 };
}

<!-- parent.component.html -->
<app-product-card [product]="selectedProduct"></app-product-card>

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

@Component({
  selector: 'app-product-card',
  template: `
    <div class="card">
      <h3>{{ product.name }}</h3>
      <p>${{ product.price }}</p>
    </div>
  `
})
export class ProductCardComponent {
  @Input() product: any; // Receives data from parent
}

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

@Component({
  selector: 'app-delete-btn',
  template: `<button (click)="onDelete()">Delete {{ itemName }}</button>`
})
export class DeleteBtnComponent {
  @Input() itemId!: number;
  @Input() itemName: string = &#039;&#039;;

  @Output() itemDeleted = new EventEmitter<number>();

  onDelete(): void {
    this.itemDeleted.emit(this.itemId); // Sends event UP to parent
  }
}

<!-- parent.component.html -->
<app-delete-btn
  [itemId]="product.id"
  [itemName]="product.name"
  (itemDeleted)="handleDelete($event)">
</app-delete-btn>

export class ParentComponent {
  products = [...];

  handleDelete(productId: number): void {
    this.products = this.products.filter(p => p.id !== productId);
    console.log('Product deleted:', productId);
  }
}

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

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

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

export class SenderComponent {
  constructor(private notifService: NotificationService) {}
  sendAlert(): void { this.notifService.sendMessage('Item saved successfully!'); }
}

export class ReceiverComponent implements OnInit, OnDestroy {
  notification: string = '';
  private sub!: Subscription;

  constructor(private notifService: NotificationService) {}

  ngOnInit(): void {
    this.sub = this.notifService.message$.subscribe(msg => this.notification = msg);
  }
  ngOnDestroy(): void { this.sub.unsubscribe(); }
}

import { ViewChild, AfterViewInit } from '@angular/core';
import { CounterComponent } from './counter/counter.component';

export class ParentComponent implements AfterViewInit {
  @ViewChild(CounterComponent) counterChild!: CounterComponent;

  ngAfterViewInit(): void {
    console.log('Child count:', this.counterChild.count);
  }
}

Parent → Child:       @Input()
Child → Parent:       @Output() + EventEmitter
Sibling → Sibling:    Shared Service + Subject
Parent ↔ Child:       @ViewChild (direct access)
Any → Any:            Shared Service + BehaviorSubject