ユーザーインタラクションを処理し、それを使って作業することは、動的なアプリケーションを構築する上で重要な側面の1つです。このガイドでは、単純なユーザーインタラクションであるイベント処理について説明します。
イベント処理
要素にイベントハンドラーを追加するには、次の手順に従います。
- イベント名を含む属性を括弧内に追加する。
- イベントが発生したときに実行するJavaScript文を指定する。
<button (click)="save()">保存</button>
たとえば、clickイベントが発生したときにtransformText関数を呼び出すボタンを作成する場合は、次のようになります。
// text-transformer.component.ts@Component({ standalone: true, selector: 'text-transformer', template: ` <p>{{ announcement }}</p> <button (click)="transformText()">アブラカダブラ！</button> `,})export class TextTransformer { announcement = 'Hello again Angular!'; transformText() { this.announcement = this.announcement.toUpperCase(); }}
その他の一般的なイベントリスナーの例を次に示します。
<input (keyup)="validateInput()" /><input (keydown)="updateInput()" />
$event
イベントオブジェクトにアクセスする必要がある場合、Angularは関数に渡すことができる暗黙の$event変数を提供します。
<button (click)="createUser($event)">送信</button>