イベント処理

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

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

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

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

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

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

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

   AppComponentクラスにonMouseOverイベントハンドラー関数を追加します。以下のコードを実装に使用します。

         
   onMouseOver() {    this.message = 'Way to go 🚀';}
       

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

   app.component.tsのテンプレートコードを更新し、section要素のmouseoverイベントにバインドします。

         
   <section (mouseover)="onMouseOver()">
       

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