Angularテンプレートにおけるイベントハンドラのバインド

Angularでは、イベントハンドラは特別な方法 - 属性を使用して - タグにバインドされます。 括弧内にイベント名を指定し、属性値にはそのイベント発生時に実行されるコンポーネントクラスのメソッドを呼び出します。

例として、ボタンクリック時にコンポーネントクラスの show メソッドが実行されるようにしてみましょう：

app/app.component.html<button (click)="show()">
  button
</button>

次に、コンポーネントクラス内に show メソッドの実装を記述します：

app/app.component.tsexport class AppComponent {
  public show(): void {
    alert('test');
  }
}