かろてんはこう思いました

フロントエンドエンジニアになりたいバックエンドエンジニアの雑記。

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にて、以下矢印部分2つを追記します。

// 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';
}

結果

f:id:karoten512:20170709120655g:plain