4. イベントバインディング — ( ) で操作を受け取る

クリックや入力などのユーザー操作をクラスのメソッドにつなぐには、イベント名を丸カッコで囲んで (click)="increment()" のように書きます。これをイベントバインディングと呼び、イベントが発生するとカッコ内の式が実行されます。$event と書けば、イベントの詳細情報をメソッドに渡すこともできます。

実務では「データは角カッコで画面へ、操作は丸カッコでクラスへ」という一方向の流れを意識すると、画面の状態がどこで変わるのか追いやすくなります。ボタンのクリック、フォームの送信、キー入力など、動きのある画面のほぼすべてがこの仕組みで動いています。

サンプルコード(フレームワーク環境が必要なため表示のみ)

import { Component } from '@angular/core';

@Component({
  selector: 'app-counter',
  // (イベント名)="メソッド()" で操作をクラスに届ける
  template:
    '<p>現在の値: {{ count }}</p>' +
    '<button (click)="increment()">増やす</button>',
})
export class CounterComponent {
  count = 0;

  increment() {
    this.count++; // 値が変わると {{ count }} の表示も更新される
  }
}

公式ドキュメントで詳しく ↗