まず、HTMLテンプレート内のinput要素に「(input)="onChange($event)"」ディレクティブを追加します。このディレクティブは、入力値が変更されたときに指定されたメソッドを呼び出します。
次に、Angularのコンポーネントクラスで、指定したメソッド(この例では「onChange」)を実装します。このメソッドは、入力値が変更されたときに実行されます。以下は、具体的なコード例です。
// コンポーネントクラス
export class MyComponent {
onChange(event: any) {
// 入力値の変更に対する処理をここに追加する
}
}
このコード例では、入力値の変更に対する処理を「onChange」メソッド内に追加することができます。ここでは、eventオブジェクトを使用して、変更された値にアクセスすることができます。
「input on change」イベントを使用することで、ユーザーがフォームの入力値を変更した際に、リアルタイムで処理を実行することができます。これは、フォームのバリデーションやフィルタリングなど、さまざまなシナリオで役立ちます。
以上が、Angular 2における「input on change」の使い方と簡単なコード例の紹介です。これを参考にして、自身のAngularプロジェクトで「input on change」を活用してみてください。