見出し画像

Angular_双方向データバインディングの設定　#262日目

モリユウキ|YM202110

データバインディングとは、アプリのUIと、そこに表示されるデータとの間の接続を確立する処理です。適切に設定されていれば、データの値が変更されると、そのデータにバインドされている要素に変更が自動的に反映されます。

Angularでは、「双方向データバインディング」を設定することができます。


双方向データバインディングとは

双方向の前に「片方向データバインディング」を理解しておきます。その名の通り片方向のデータバインディングなので、データの反映を、以下のように一方通行に行う設定です。

・コンポーネント(モデル) → テンプレート(ブラウザ)
・テンプレート(ブラウザ) → コンポーネント(モデル)

用途によってはこの設定が適切な場合も多いと思います。ただ、テンプレート側でもコンポーネント側でもデータの変更ができるようにしておきたい場合、一気に双方向で設定できた方が便利です。

「双方向データバインディング」は、コンポーネントの値とテンプレート上の値を双方向に同期させるためのバインド構文です。

・コンポーネント(モデル) ⇔ テンプレート(ブラウザ)

コンポーネントの値 (プロパティ)が変化したらテンプレートにも反映し、テンプレートの値を変えたら (テキストボックスに値が入力される等) コンポーネントのプロパティにも書き戻す、そんなバインド構文です。


テンプレート側をどう記述するか

HeroesComponentというコンポーネントのテンプレートで、双方向データバインディング構文を記述してみます。

[heroes.component.html]

<div>
  <label for="name">Hero name: </label>
  <input id="name" [(ngModel)]="hero.name" placeholder="name">
</div>

[(ngModel)]が、Angularの双方向データバインディング構文です。たったこれだけでhero.nameプロパティをHTMLのテキストボックスにバインドし、双方向にデータを流せるようになっています。

・hero.nameプロパティ ⇔ テキストボックス (HTML)


FormsModuleをオプトインする

上記の[(ngModel)]はデフォルトでは使用できないので、オプトイン(許諾の意思を示す)をする必要があります。具体的には、ngModelが属している「FormsModule」を、@NgModuleデコレーター内でオプトインします。

@NgModuleはアプリのルートレベルにあるAppModuleクラスのデコレーターです。これは「ng new プロジェクト名」コマンドでプロジェクトを作成した際、「src/app/app.module.ts」に自動生成されています。

FormsModuleをインポートし、@NgModule内のimports配列に設定します。

[src/app/app.module.ts]

import { FormsModule } from '@angular/forms'; // <-- NgModel lives here

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

ちなみに@Ngmoduleデコレーターや@Componentデコレーターに設定する情報はメタデータと呼ばれます。これはそのアプリケーションが必要とする他のファイルやライブラリの情報、という意味です。


ここまで設定すれば「ngModel」が使えるようになり、ブラウザでは以下のように表示されます。データに「Windstorm」という値が入っている状態です。

コンポーネント側のデータが反映されていますし、ブラウザから入力するとデータの値が更新されます。


ここまでお読みいただきありがとうございました！！


参考


この記事が気に入ったらサポートをしてみませんか？