ユーザーインタラクションの処理

ユーザーインタラクションを処理し、それを使って作業することは、動的なアプリケーションを構築する上で重要な側面の1つです。このガイドでは、単純なユーザーインタラクションであるイベント処理について説明します。

イベント処理

要素にイベントハンドラーを追加するには、次の手順に従います。

イベント名を含む属性を括弧内に追加する。
イベントが発生したときに実行するJavaScript文を指定する。

      <button (click)="save()">保存</button>

たとえば、clickイベントが発生したときにtransformText関数を呼び出すボタンを作成する場合は、次のようになります。

      // text-transformer.component.ts
@Component({
  standalone: true,
  selector: 'text-transformer',
  template: `
    <p>{{ announcement }}</p>
    <button (click)="transformText()">アブラカダブラ！</button>
  `,
})
export class TextTransformer {
  announcement = 'Hello again Angular!';
  transformText() {
    this.announcement = this.announcement.toUpperCase();
  }
}

その他の一般的なイベントリスナーの例を次に示します。

<input (keyup)="validateInput()" />
<input (keydown)="updateInput()" />

$event

イベントオブジェクトにアクセスする必要がある場合、Angularは関数に渡すことができる暗黙の$event変数を提供します。

      <button (click)="createUser($event)">送信</button>

イベント処理

$event

次のステップ