Angular イベントバインディング

Angular のイベントバインディングを利用して、HTML テンプレート上にあるコントロールのイベントを、コンポーネント(TypeScript) 側でハンドルする方法です。

ここでは２つのボタンを用意し、一つは引数なし、もう一つは引数ありのイベントハンドラーを呼び出すようにしています。

ポイントは、HTML テンプレート上でイベント名を丸かっこ () で囲むことです。こうすることで、イベントバインディングを行うことができます。

HTML テンプレート

<button (click)="clicked()">ボタン(引数なし)</button>
<button (click)="clickedWithNumber(1)">ボタン(引数あり)</button>

コンポーネント(TypeScript)

clicked() {
  console.log('クリックされました。');
}

clickedWithNumber(arg) {
  console.log('クリックされました。', arg);
}

実行結果のスクリーンショット

StackBlitz のコンソールを開いて、ボタンをクリックすると次のようにコンソール上にログメッセージが表示されることを確認します。