イベントバインディング ― ( )

導入

クリックなどのイベントに処理を結び付けるには、イベント名を丸かっこ ( ) で囲みます。角かっこ [ ] が「入力（値を受け取る）」、丸かっこ ( ) が「出力（イベントを出す）」と覚えます。

説明

定番のカウンターです。(click) にメソッドを結び付けます。

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <h1>{{ count }}</h1>
    <button (click)="increment()">+1</button>
    <button (click)="decrement()">-1</button>
    <button (click)="reset()">リセット</button>
  `,
})
class AppComponent {
  count: number = 0;
  increment(): void { this.count++; }
  decrement(): void { this.count--; }
  reset(): void { this.count = 0; }
}

• (click)="increment()" … クリックされたら increment() を呼びます。
• メソッドの中では this.count のように、this. を付けてプロパティにアクセスします。
• 値が変われば、Angular が自動でテンプレートを再描画します（変更検知）。

やってみよう

「+10」するメソッドとボタンを追加してみましょう。count の初期値を 100 に変えると最初の表示がどうなるか確かめてください。