AngularでHello,world／バインディング

はじめに

この記事では Angular バインディングについて記載します。
バインディングとは、テンプレートファイル(.htmlファイル)と、コンポーネントファイル(.tsファイル)の間で、変数やイベントを共有する機能です。

例えば、コンポーネントファイルで宣言した変数の内容を、テンプレートファイルで表示するといったことです。
公式リファレンスではさまざまなバインディングが解説されていますが、ここではよく使われるプロパティ、イベントのバインディングについて解説します。
公式リファレンス Binding syntax

なお、開発環境については、環境準備編を参照してください。
AngularでHello,world／環境準備

1. プロパティへのバインディング

input タグの value や、img タグの src 等の値を動的に変更する場合のバインディングについて解説します。
方法は2つあり、テキスト補完の応用と、バインディングを使うことで実現できます。

1. テキスト補完の応用
   まず、テキスト補完をつかって、input タグの value に値を設定するサンプルを以下に示します。
   テキスト補完
   コンポーネントファイルは、上記テキスト補完と同じなので省略します。

   app.component.html

   <input value="{{message}}">
   

   テキスト入力欄内に「hello, world!」と表示されましたね。
   このようにダブルクォーテーションで囲われた中でも、テキスト補完は有効になります。

2. プロパティへの一方向バインド記号
   次に、input の value など、タグのプロパティへのバインドに使える方法を示します。

   app.component.html

   <input [value]="message">
   

   こちらでも、テキスト入力欄に「hello, world!」と表示されましたね。
   Angular のプロパティバインドでは、こちらの記述が一般的です。

2. イベントへのバインディング

さて、ここまで動的な変更が確認できないサンプルコードでしたね。
そこで、動的な変更を確認するために、ボタンを押したら表示が変更されるサンプルを作成してみましょう。
そのために、「ボタンを押した」というイベントに対応するため、イベントへのバインディングを示します。
サンプルコードは以下の通りです。

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  public title = 'my-app-bind';

  public message = 'hello, world';

  public test() {
    this.message = 'hoge! hoge!';
  }
}

app.component.html

<input [value]="message">
<button (click)="test()">テスト</button>

「テスト」のボタンを押すと、テキスト入力欄が「hoge! hoge!」に変わりましたね。
このように、テンプレートからコンポーネントへのバインドとして、() でイベント名を囲み、対応する関数を記述すると呼び出すことができます。
イベントのバインディングは複雑なので、おって独自イベント作成の回で深堀りしたいと思います。

---

メニューに戻る