angular2でngFormを用いて双方向データバインディングを実現

angular2で双方向データバインディング

angularJSとangular2では、双方向データバインディングの方法が異なります。 今日はangular2を使って双方向データバインディングを実現していきましょう。

手順

1. 準備
2. FormsModuleを読み込む
3. componentのテンプレートに[(ngModel)]を記述

準備

angular tutorialからgit cloneしてきます。

もろもろのmoduleのinstallを行い、ローカルサーバをスタートさせます。

git clone https://github.com/angular/quickstart.git
cd quickstart
npm install
npm start

FormsModuleを読み込む

app.module.tsにて、以下矢印部分２つを追記します。

// app.module.ts
import { FormsModule } from '@angular/forms’; // ←

@NgModule ({
  imports: [FormsModule] // ←
})

componentのテンプレートに[(ngModel)]を記述

// app.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  template: `
  <input [(ngModel)]="name">
  <h1>{{name}}</h1>
  `,
})

export class AppComponent  {
  name = 'Angular';
}

結果