Angular2のComponentへのデータバインド


スクリーンショット 2016-05-13 18.22.51

AngularJS2のデータバインドの仕方についてまとめます。

主にAngular2 Tutorial 2 “The Hero Editor”の内容を元に記述します。

@Componentのtemplateが長くなる場合、“(バッククォート)による改行含み文字列で書くとキレイです。
(更に長くなる場合、htmlファイルに分割して管理します。)

import { Component } from '@angular/core';
export class Hero {
  id: number;
  name: string;
}
@Component({
  selector: 'my-app',
  template:`
    <h1>{{title}}</h1>
    <h2>{{hero.name}} details!</h2>
    <div><label>id: </label>{{hero.id}}</div>
    <div>
      <label>name: </label>
      <input value="{{hero.name}}" placeholder="name">
    </div>
    `
})
export class AppComponent {
  title = 'Tour of Heroes';
  hero: Hero = {
    id: 1,
    name: 'Windstorm'
  };
}

このコードですが、inputの中の値を操作しても、同じものを見ているはずのh2要素が切り替わりません。
angular2では、{{}}で囲うangular式によるバインドは単方向データバインドです。

「input要素をブラウザから編集したら、自動的に他の要素に変更を波及させたい」場合は、[(ngModel)]による双方向データバインドを使います。

ですので、
@Componentアノテーションのtemplate内の

<input value="{{hero.name}}" placeholder="name">

となっている箇所を

<input [(ngModel)]="hero.name" placeholder="name">

と書き換えることで、input値の変更に合わせてh2要素が切り替わるようになります。