【Angular】ngModelChangeを使って入力監視をしよう!

<input [(ngModel)]="変数名">

<input [(ngModel)]="変数名" (ngModelChange)="関数名($event)">

ng new my-app
cd my-app
ng serve -o

<textarea
  [(ngModel)]="myText"
  (ngModelChange)="onChangeText($event)"
></textarea>

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);
  }
}

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 {}