Component Communication with @Output (Child to Parent)

Use @Output when a child needs to notify its parent, like “button clicked” or “user selected.”

Step 1: Child component emits event

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

@Component({
  selector: 'app-like-button',
  standalone: true,
  template: `<button (click)="like()">👍 Like</button>`,
})
export class LikeButtonComponent {
  @Output() liked = new EventEmitter<number>();
  private count = 0;

  like() {
    this.count++;
    this.liked.emit(this.count);
  }
}

Step 2: Parent listens to event

<app-like-button (liked)="onLiked($event)"></app-like-button>
<p>Total likes: {{ likes }}</p>

export class PostComponent {
  likes = 0;

  onLiked(newCount: number) {
    this.likes = newCount;
  }
}

Mental model

Parent passes data down with @Input.
Child sends events up with @Output.

Next: Services and dependency injection, the real backbone of Angular apps.