【Angularアプリケーション開発 #5】双方向バインディング

今回は双方向バインディングを実装してみます。
イメージとしては↓こんな感じです。

入力フォームの田中太郎の「郎」の文字を消してみます。
すると、、、

入力フォームと連動して名前をh2タグのラベルも「田中太」になりました。
このように、html側→ts側、ts側→html側へと値が共有されている状態を双方向バインディングと言います。（私個人のイメージです。）

それでは実装していきましょう。

• まずはFormsModuleというモジュールをapp.module.tsに追加します。
  import文の追加と@NgModuleのimportsにFormsModuleの追加を行います。

app.module.ts

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { MembersComponent } from './members/members.component';
import { MemberDetailComponent } from './member-detail/member-detail.component';
import { FooterComponent } from './footer/footer.component';

@NgModule({
  declarations: [
    AppComponent,
    MembersComponent,
    MemberDetailComponent,
    FooterComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

• 次に双方向バインディングを扱う、htmlです。

members.component.html

<h2>{{member.name}}</h2>
<div>
  <label>id:</label>{{member.id}}
</div>
<div>
  <label>名前:
    <!-- 双方向データバインディング -->
    <input type="text" [(ngModel)]="member.name" placeholder="名前">
  </label>
</div>

• 最後に双方向バインディングを行う、tsファイル側です。

members.component.ts

import { Component, OnInit } from '@angular/core';
import { Member } from '../member';

@Component({
  selector: 'app-members',
  templateUrl: './members.component.html',
  styleUrls: ['./members.component.css']
})
export class MembersComponent implements OnInit {

  member:Member =
    {id:'1',name:'taro'};

  constructor() { }

  ngOnInit(): void {
  }
}

補足です。
memberオブジェクトはMemberインターフェースを型としています。
別ファイルにインターフェースを定義しています。
ちなみにexportを付けることで外部から参照できるようになります。

member.ts

export interface Member{
  id:string;
  name:string;
}