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

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

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

<button (click)="show()">
	button
</button>

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

export class AppComponent {
	public show(): void {
		alert('test');
	}
}

2つのボタンを作成してください。1つ目のボタンをクリックするとユーザーに挨拶し、2つ目のボタンをクリックすると別れを告げるようにします。