@Output で子から親へ知らせる

導入

子で起きたこと（ボタンが押された等）を親に伝えるのが @Output と EventEmitter です。子がイベントを「発火」し、親が受け取ります。

説明

子の「いいね」ボタンが押されたら、親のカウントを増やします。

@Component({
  selector: 'app-like',
  standalone: true,
  template: `<button (click)="onClick()">♥ いいね</button>`,
})
class LikeComponent {
  @Output() liked = new EventEmitter<void>();
  onClick(): void {
    this.liked.emit();
  }
}

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [LikeComponent],
  template: `
    <p>いいねの合計: {{ total }}</p>
    <app-like (liked)="add()"></app-like>
    <app-like (liked)="add()"></app-like>
  `,
})
class AppComponent {
  total: number = 0;
  add(): void { this.total++; }
}

• @Output() liked = new EventEmitter<void>() … 子が発火できるイベントを宣言。
• this.liked.emit() … イベントを発火します（値を渡すなら emit(値)）。
• 親は (liked)="add()" と、イベントバインディングで受け取ります。
• 「入力は [ ]（@Input）、出力は ( )（@Output）」という対応がここでもそのまま当てはまります。

やってみよう

EventEmitter<void> を EventEmitter<number> に変え、emit(1) で「1」を渡し、親側で (liked)="add($event)"・add(n: number){ this.total += n; } と受け取ってみましょう。