everything-claude-code/docs/ja-JP/skills/angular-developer/references/outputs.md

アウトレット（カスタムイベント）

アウトプットを使うと、子コンポーネントがカスタムイベントを発行でき、親コンポーネントがそれをリッスンできます。Angular はモダンなアプリケーションでは新しい output() 関数の使用を推奨しています。

関数ベースのアウトプット

output() 関数を使ってアウトプットを宣言します。これにより OutputEmitterRef が返されます。

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

@Component({
  selector: 'custom-slider',
  template: `<button (click)="changeValue(50)">Set to 50</button>`,
})
export class CustomSlider {
  // イベントデータなしのアウトプット
  panelClosed = output<void>();

  // イベントデータあり（number）のアウトプット
  valueChanged = output<number>();

  changeValue(newValue: number) {
    this.valueChanged.emit(newValue);
  }
}

テンプレートでの使用

アウトプットイベントにバインドするには括弧 () を使います。イベントがデータを発行する場合、特別な $event 変数を使ってアクセスします。

<custom-slider (panelClosed)="savePanelState()" (valueChanged)="logValue($event)" />

設定オプション

output 関数はエイリアスを指定するための設定オブジェクトを受け取ります。

@Component({...})
export class CustomSlider {
  // テンプレートでは 'valueChanged' という名前のイベントだが、
  // コンポーネントクラス内では 'changed' としてアクセスする。
  changed = output<number>({ alias: 'valueChanged' });
}

プログラム的なサブスクリプション

コンポーネントを動的に生成する場合、アウトプットにプログラムでサブスクライブできます：

const componentRef = viewContainerRef.createComponent(CustomSlider);

const subscription = componentRef.instance.valueChanged.subscribe((val) => {
  console.log('Value changed:', val);
});

// 必要に応じて手動でクリーンアップ（Angular は破棄されたコンポーネントを自動でクリーンアップする）
subscription.unsubscribe();

デコレーターベースのアウトプット（@Output）

レガシー API は @Output() デコレーターと EventEmitter を使用します。引き続きサポートされますが、新しいコードでは推奨されません。

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

@Component({...})
export class LegacyExample {
  @Output() valueChanged = new EventEmitter<number>();

  // エイリアスあり
  @Output('customEventName') changed = new EventEmitter<void>();
}

ベストプラクティス

• output() を優先する：@Output() と EventEmitter の代わりに関数ベースの output() を使用してください。
• 命名：アウトプット名には camelCase を使用します。on を前置することは避けてください（例：onValueChanged ではなく valueChanged を使用する）。
• DOM バブリングなし：Angular のカスタムイベントは、ネイティブイベントのように DOM ツリーをバブルアップしません。
• 衝突を避ける：ネイティブ DOM イベント（click や submit など）と衝突する名前は選ばないでください。