3月18日、Angular v17.3が、開発者向けプレビューとして新しいoutput() APIを発表した。このAPIは、ディレクティブ内で出力を宣言するためのよりシンプルで安全な方法を提供し、より正確な型で値を発行できる。新APIは、従来の@Output APIと比較して、より安全でエラーの発生が少ない。

新しいAPIでは、output()およびoutputFromObservable()の2つの新しい関数が利用可能だ。これらの関数は、Angularの出力を宣言するための新しい手法を提供し、Angular出力を宣言し、.emit関数を使用して値を発行する。一方、outputFromObservable()関数は、RxJSストリームから値を公開するために使用される。

// output() function
import { output } from '@angular/core';

@Component({ ... })
export class MyComp {
  onNameChange = output<string>(); // OutputEmitterRef<string>
  
  updateName(newName: string) {
    this.onNameChange.emit(newName);
  }
}

// outputFromObservable() function
import { outputFromObservable } from '@angular/core/rxjs-interop';

@Component({ ... })
export class MyComp {
  onNameChange$ = new Observable<string>( ... );
  onNameChange = outputFromObservable(this.onNameChange$);
  //                                   ^ OutputRef<string>
}

これにより、Observableの機能を利用しながら、改良された出力APIの利点を享受できる。また、新APIはデコレータベースの@Outputに比べて、様々な利点がある。コードのブロックを削減し、Angularでのベストプラクティスを改善する。

開発者は今後も、新しい出力APIを使用したり、デコレータベースの@Outputを使用したりして、一貫した方法で出力を聴取できる。

詳細はMeet Angular’s new output() APIを参照していただきたい。