みなさんこんにちは、現役エンジニアのサメハックです
未経験からWebエンジニアに転職し、
正社員として5年働いたのちフリーランスとして独立しました。
Angularの解説シリーズです。
今回はngModelChangeの使い方について学んでいきましょう!
駆け出しエンジニアや未経験の方、
また新入社員を指導する先輩社員にとっても
わかりやすいように解説していきます!
この記事を読むと・・・
- ngModelの使い方がわかる
- ngModelChangeの使い方がわかる
- GitHubのコードがダウンロードできる
※PCにnpm、nodeがインストールされている前提で記述します。
yarn等をお使いの方は読み替えてください。
環境がない人はcodesansbox等を使ってね!
作りたいもの
これが今回の完成形だよ!
実行環境
Angularのバージョンが古いと動かないことがあるよ!
うまく動かなければアップデートしてね!
うまく動かなければアップデートしてね!
ngModelChangeの使い方をマスターしよう!
ngModelChangeとはngModelChangeで指定した値が更新されるたびに発火するウォッチャです。
主にテキストの入力監視や、チェックボックスの変更監視等に使われます。
正式に言うとngModelディレクティブの@Outputプロパティだよ!
ngModelChangeを使用するための下準備
ngModelChangeを使用するには、以下の3つの準備を行う必要があります。
- moduleファイルにFormsModuleのインポート
- ngModelディレクティブの設定
- ngModelChangeの設定
ngModelを使用する構文
<input [(ngModel)]="変数名">
これで双方向データバインディングが出来るよ!
ngModelについて詳しく知りたい人は↓を参考にしてね!
ngModelについて詳しく知りたい人は↓を参考にしてね!
【Angular】ngModelを使おう!【双方向データバインディング】
ngModelChangeを使う構文
<input [(ngModel)]="変数名" (ngModelChange)="関数名($event)">
$eventには変数の新しい値が入るよ!
ちなみにchangeとの違いはイベントの変更部分のみが受け取れる点だよ、
HTMLのIDやクラス名を取得したい場合はchangeを使おう!
404 NOT FOUND – サメハック
Infomation for Engineer🦈
実際に作ってみよう!
初期設定
ng new my-app
cd my-app
ng serve -o
app.component.html
<textarea
[(ngModel)]="myText"
(ngModelChange)="onChangeText($event)"
></textarea>
myTextの値が更新されるたびonChangeText関数が呼ばれるよ!
app.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss'],
})
export class AppComponent {
myText = 'サメハックです!';
/**
* 入力欄が更新されるたびに呼び出される
* eventとしてmyTextの値が渡される
*/
onChangeText(event: string) {
console.log(event);
}
}
app.module.ts
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule, //ngModelを使うためのモジュール
],
providers: [],
bootstrap: [AppComponent],
})
export class AppModule {}
これで同じものが出来上がるよ!
GitHubのサンプルコード
今回作ったものはGitHubにあげているので
使いたい人やうまく動かなかった方は是非ダウンロードしてみてください。
GitHub - same-hack/Angular-ngModelChange
Contribute to same-hack/Angular-ngModelChange development by creating an account on GitHub.
まとめ
- ngModelChangeとはngModelChangeで指定した値が更新されるたびに発火するウォッチャ
満足いただけたら、1クリックなのでSNSフォローしてもらえると嬉しいです🦈