【Angular】ngModelを使おう！【双方向データバインディング】

みなさんこんにちは、現役エンジニアのサメハックです

アパレル企業でトップ販売員を経て
未経験からWebエンジニアに転職し、
現在正社員として5年働いています！

Angularの解説シリーズです。

今回はngModelの使い方について学んでいきましょう！

駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます！

この記事を読むと・・・

ngModelが何かがわかる
双方向データバインディングがわかる

※PCにnpm、nodeがインストールされている前提で記述します。
　yarn等をお使いの方は読み替えてください。

環境がない人はcodesansboxを使ってね！

作りたいもの
ngModelを導入しよう
まとめ

作りたいもの

今回作りたいものは、変換ボタン押下でinput内のテキストが大文字に変換され、
アラートボタン押下でinput内のテキストがアラート表示されるアプリケーションです。

これが今回の完成形だよ！
他のファイルは左上のハンバーガーメニューをクリックして確認してね！

ngModelを導入しよう

そもそもngModelとは？

ngModelとは、双方向データバインディングを行うためのディレクティブです。

双方向データバインディングとは、画面上の表示(DOM)とデータ上の値が紐づいている状態で、
データを操作→DOMも書き換わる
DOMを操作→データも書き換わる
という挙動をすることです。

■構文

<input [(ngModel)]="値">

FormsModuleのインポート

ngModelを使用するにはFormsModuleという
Angularのフォーム操作用モジュールのインポートが必要です。

app.module.ts

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

import { AppComponent } from './app.component';
// ngModelを使用するためのモジュール
import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    // ngModelを使用するためのモジュール
    FormsModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

基本的にルートのapp.module.tsでインポートするよ！

バインディング対象の値と、関数の設定

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
})
export class AppComponent {
  title = 'ngModelの使い方';

　// バインディング対象
  myMessage = 'hello world!';

  /**
   * inputからテキストを受け取り、アラートに表示
   * @param message
   */
  myAlert(message: string): void {
    alert(message);
  }

  /**
   * inputからテキストを受け取り、大文字に変換
   * @param message
   */
  changeMessage(message) {
    this.myMessage = message.toUpperCase();
  }
}

ここでは特別な記述はいらないよ！

画面側の設定

<h1>{{ title }}</h1>

<!-- 入力欄とmyMessageを紐付ける -->
<input type="text" [(ngModel)]="myMessage" />
<!-- クリックすると大文字に変換される -->
<button type="" (click)="changeMessage(myMessage)">変換</button>
<!-- クリックするとアラートが上がる -->
<button type="submit" (click)="myAlert(myMessage)">アラート</button>

<div>
  <!-- 内部データをそのまま表示。
       入力欄と連動しているので、
       双方向データバインディングがされていることがわかる
  -->
  <p>
    myMessage確認用：
    {{ myMessage }}
  </p>
</div>

画面確認

初期表示

変換ボタンを押下

入力欄のテキストを変更

アラートボタンを押下

すべて入力欄と、実データの値が一致することが確認できたね！
これで基本的なデータバインディングができたよ！

まとめ

ngModelを使用するにはFormsModuleというモジュールのインポートが必要
＜input　[(ngModel)]=”値”＞
双方向データバインディングとは、画面上の表示(DOM)とデータ上の値が紐づいている状態

満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈

twitter
instagram