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

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

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

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

HTML テンプレート

<button (click)="clicked()">ボタン</button>
<button (click)="clickedWithNumber(1)">ボタン</button>

コンポーネント(TypeScript)

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

Angular に関連するトピックは次のページにまとめてあります。


Angular 機能紹介一覧

https://kainobi2.blogspot.com/2019/02/angular.html