ngModel 使い方 #Angular

今回は現場でフロント開発を担当しており、その際に利用して興味を持った、ngModelに関して、まとめていきたいと思います。

ngModelとは

ngModelを利用することで、プロパティを双方向（HTML ↔ TypeScript）でバインディングできる。

HTMLのフォームの要素である、　input　や　select　などの入力や選択を伴う操作は、
画面での入力が内部のTypeScriptのコードに反映させたり、
TypeScriptの処理で取得してきた文字や値を画面に反させたいような場合があります。
そのような場合に　ngModel　を使用して、画面と内部処理の双方向で値を扱うことができます。

プロジェクトの準備

まずはAngularを使用できるようにするところから・・・
以下のコマンドでAngularをインストールすることができます。

$npm install -g @angular/cli

Angularのインストールが完了したら、次はプロジェクトを立ち上げていきます。

// new以降で、作成したプロジェクト名を指定します
$ng new ngModel-sample

// 以下から、プロジェクトの作成にあたり、オプションを聞かれています
// こちらはAngular上でrouting機能を実装するかどうかを聞かれています
? Would you like to add Angular routing? (y/N)

// 次にスタイルシートのテンプレートエンジンを選択します
❯ CSS 
  SCSS   [ http://sass-lang.com/documentation/file.SASS_REFERENCE.html#syntax ] 
  Sass   [ http://sass-lang.com/documentation/file.INDENTED_SYNTAX.html       ] 
  Less   [ http://lesscss.org                                                 ] 
  Stylus [ http://stylus-lang.com                                             ]  

// この後に色々と必要な資材を作成してくれます

// そして以下の文言が表示されれば、プロジェクトの作成は完了です！
✔ Packages installed successfully.
    Successfully initialized git.

プロジェクトの作成が完了したら、簡単なngModelを使用したプログラムを作成していきます。

app.module.ts

ngModel は angular/forms の FormsModule に含まれています。
そのため、まずは FormsModule をインポートします。

/src/app/app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
// こちらを追加
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    // こちらを追加
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

app.component.html

次は、画面上で名前を入力するテキストボックスと、
入力された名前が反映される、 ngModel を使用したhtmlファイルを編集していきます。

/src/app/app.component.html

<div>
  <!-- インプットタイプをテキストボックにし、入力された値を変数 name として受け取る -->
  <input type="text" [(ngModel)]="name">
</div>
<div>
  <!-- {{name}} に入力された値が反映される -->
  <p>あなたのお名前は {{name}} さん</p>
</div>

app.component.ts

htmlファイルで入力された名前を、 name として扱うように設定しました。
ngModel で双方向バインディングとして扱うため、JavaScriptファイル側でも、
name をどのように扱うかを定義していきます。
今回は、 name = ' '; として初期表示状態では空欄になるように設定していきます。

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'ngModel-sample';
  // こちらを追加
  name = ' ';
}

まとめ

ngModel の使い方と簡単な実装の紹介をさせていただきました。
実装自体はとても単純なものですが、便利な機能ですので忘れずに覚えておき、
実践でもしっかりと使いこなせるようにしていきたいと思います。