Angular 2のイベント定義
データバインディングの一種として、画面上のボタンが押された時などのイベントを定義できます。Angular 2でコントロールにイベントを定義するにはリスト5のように記述します。
リスト5 Angular 2のイベント定義（angular2-002-event/app/app.component.ts）
<!-- (click)属性でクリックイベントを定義 --> <button (click)="onClickButton()">ボタン1</button> <button (click)="onClickButtonWithEvent($event)">ボタン2</button> <button (click)="onClickButtonWithEvent($event)">ボタン3</button>
「(click)」のように、イベント名をカッコで囲んだ属性に、イベントを処理するメソッドを記述します。1行目のように引数なしの記述と、2〜3行目のようにイベントオブジェクト$eventを指定する記述ができます。
メソッドの記述はAppComponentコンポーネントの定義内にリスト6のように行います。
リスト6 イベントハンドラの実装（angular2-002-event/app/app.component.ts）
export class AppComponent {
/**
* イベント引数なしのハンドラ ...（1）
*/
onClickButton() {
alert("ボタンが押されました");
}
/**
* イベント引数ありのハンドラ ...（2）
*/
onClickButtonWithEvent(event:any) {
// targetプロパティでイベントを発生させたオブジェクトを取得 ...（3）
var button = event.target;
// ボタンのラベルをtextContentプロパティから取得して表示 ...（4）
alert("ボタン「" + button.textContent + "」が押されました");
}
}
（1）はイベント引数なしの場合の処理です。ここではalertメソッドで固定のメッセージを表示しています。一方、（2）はイベント引数ありの場合の処理です。（3）でevent.targetプロパティからオブジェクト（ここではボタン）を取得し、ボタンオブジェクトから（4）でtextContentプロパティ（ボタンの文言）をalertメソッドで表示しています。
リスト5、6を実行してボタン1を押すとリスト6（1）の処理、ボタン2とボタン3を押すとリスト6（2）の処理で、それぞれメッセージが表示されます。ボタン2とボタン3の場合、押されたボタンの文言がメッセージに反映されます。
AngularJS 1でのリスト6と等価な記述はリスト7のようになります。(click)の代わりにng-click属性で記述します。
リスト7 AngularJS 1のイベント定義（angularjs1-samples/002-event.html）
<!-- ng-click属性でクリックイベントを定義 --> <button ng-click="onClickButton()">ボタン1</button> <button ng-click="onClickButtonWithEvent($event)">ボタン2</button> <button ng-click="onClickButtonWithEvent($event)">ボタン3</button>
