13. output() — 親へイベントを通知する

子コンポーネントから親へ「ボタンが押された」などの出来事を伝えるには、子側で output() を宣言します。deleted = output<number>() と書いて deleted.emit(42) を呼ぶと、親はテンプレートの (deleted)="onDeleted($event)" でそれを受け取れます。$event にはemitした値が入ります。

実務の鉄則は「子は親のデータを直接書き換えず、出来事を通知して親に処理してもらう」ことです。データの変更箇所が親に集約されるので、不具合が起きたときに調べる場所が一箇所で済みます。削除ボタン、選択の変更、フォームの送信完了などがoutputの典型例です。

output() は以前の @Output() デコレータと EventEmitter を置き換える新しいAPIです。通知に値が不要なときは output<void>() と宣言し、引数なしで emit() を呼びます。

サンプルコード(フレームワーク環境が必要なため表示のみ)

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

@Component({
  selector: 'app-delete-button',
  template: '<button (click)="confirmDelete()">削除</button>',
})
export class DeleteButtonComponent {
  // 親へ通知する出力。emit() で発火する
  deleted = output<number>();

  confirmDelete() {
    this.deleted.emit(42); // 削除対象のIDなどを親へ渡せる
  }
}

// 親側のテンプレート。$event に emit した値が入る:
// <app-delete-button (deleted)="onDeleted($event)" />

公式ドキュメントで詳しく ↗