イベント処理

イベント処理は、ウェブアプリケーションにインタラクティブな機能をもたらします。開発者として、ボタンのクリック、フォームの送信など、ユーザーの操作に応答できます。

このアクティビティでは、イベントハンドラーを追加する方法を学びます。

Angularでは、()という構文を使ってイベントにバインドします。特定の要素に対して、バインドしたいイベントを括弧で囲み、イベントハンドラーを設定します。このbuttonの例を見てください。

      @Component({
    ...
    template: `<button (click)="greet()">`
})
class AppComponent {
    greet() {
        console.log('Hello, there 👋');
    }
}

この例では、greet()関数はボタンがクリックされるたびに実行されます。greet()の構文には、末尾に括弧が含まれていることに注意してください。

では、実際に試してみましょう。

イベントハンドラーを追加

AppComponentクラスにonMouseOverイベントハンドラー関数を追加します。以下のコードを実装に使用します。
```
      onMouseOver() {
    this.message = 'Way to go 🚀';
}
    
```
テンプレートイベントにバインド

app.component.tsのテンプレートコードを更新し、section要素のmouseoverイベントにバインドします。
```
      <section (mouseover)="onMouseOver()">
    
```

これで、ほんの数ステップでAngularの最初のイベントハンドラーを作成できました。うまくいっているようです。素晴らしいですね。頑張ってください。

イベントハンドラーを追加

テンプレートイベントにバインド