サンプルコードで身につける: イベントバインディング — ( ) で操作を受け取る

解説で学んだ概念を、5つの具体例で確認します。素朴な例から実務寄りの例へと進みます。

1クリックでメソッドを呼ぶ

イベントバインディングの最小例で、(click) にメソッドを割り当ててクリック回数を数えます。メソッドがプロパティを書き換えると、補間の表示も自動で更新される、という「操作→データ→表示」の流れの出発点です。

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

@Component({
  selector: 'app-like-button',
  // (click)="メソッド()" でクリックをクラスに届ける
  template:
    '<button (click)="addLike()">いいね</button>' +
    '<p>{{ likes }} 件</p>',
})
export class LikeButtonComponent {
  likes = 0;

  addLike() {
    this.likes++; // 値が変わると表示も自動で更新される
  }
}

2$event で入力された文字を受け取る

(input) イベントに $event を渡すと、イベントの詳細(どの要素で何が起きたか)をメソッドで受け取れます。入力欄の現在の値は event.target から取り出します。リアルタイムに入力内容を反映するUIの土台になるパターンです。

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

@Component({
  selector: 'app-name-input',
  // $event にはイベントの詳細情報が入っている
  template:
    '<input (input)="onInput($event)">' +
    '<p>入力中: {{ typedName }}</p>',
})
export class NameInputComponent {
  typedName = '';

  onInput(e: Event) {
    // 入力欄の現在の値は event.target から取り出す
    this.typedName = (e.target as HTMLInputElement).value;
  }
}

3マウスの出入りに反応する

イベントバインディングはクリック専用ではなく、(mouseenter) や (mouseleave) などあらゆるDOMイベントに同じ書き方で使えます。1つの要素に複数のイベントを並べられることも示しています。ツールチップの表示やホバー時の案内表示などで使われる形です。

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

@Component({
  selector: 'app-hover-area',
  // 1つの要素に複数のイベントバインディングを並べられる
  template:
    '<div (mouseenter)="onEnter()" (mouseleave)="onLeave()">' +
    '{{ message }}</div>',
})
export class HoverAreaComponent {
  message = 'マウスを乗せてください';

  onEnter() {
    this.message = 'いらっしゃいませ!';
  }

  onLeave() {
    this.message = 'またどうぞ';
  }
}

4Enterキーだけに反応する

(keyup.enter) のようにキー名を付けると、特定のキーだけに反応するバインディングが書けます。キー判定のif文を自分で書く必要がないAngularの便利な省略記法です。「Enterで確定」という操作はメモ、チャット、検索などあらゆる入力UIに登場します。

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

@Component({
  selector: 'app-memo-input',
  // keyup.enter は「Enterキーが離されたとき」だけ発火する
  template:
    '<input (input)="onInput($event)" (keyup.enter)="save()">' +
    '<p>保存済み: {{ savedMemo }}</p>',
})
export class MemoInputComponent {
  draft = '';
  savedMemo = '';

  onInput(e: Event) {
    this.draft = (e.target as HTMLInputElement).value;
  }

  save() {
    this.savedMemo = this.draft;
  }
}

5検索フォームを組み立てる

入力(input)と確定(click)という2種類のイベントを組み合わせた、実務の検索フォームの骨組みです。入力中の値は下書き用プロパティに貯めておき、検索ボタンで確定する、という2段階の設計がポイントです。確定のタイミングでAPI呼び出しを行うのが実際の検索画面の流れです。

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

@Component({
  selector: 'app-search-form',
  template:
    '<input (input)="onInput($event)" placeholder="商品名で検索">' +
    '<button (click)="search()">検索</button>' +
    '<p>検索キーワード: {{ submittedQuery }}</p>',
})
export class SearchFormComponent {
  draftQuery = '';
  submittedQuery = '';

  onInput(e: Event) {
    this.draftQuery = (e.target as HTMLInputElement).value;
  }

  search() {
    this.submittedQuery = this.draftQuery; // 実務ではここでAPIを呼ぶ
  }
}