Angular ngModel 활용 예시

0. 이 디렉티브를 양방향 데이터 바인딩 문법으로 [(ngModel)]라고 사용하면, Angular는 폼 컨트롤에서 발생하는 사용자의 동작과 폼 컨트롤의 값을 추적하며 이 값을 데이터 모델에 자동으로 반영합니다.

<input type="text" [(ngModel)]="test" placeholder="foo" />

1. html 템플릿에서 ngModel 속성을 활용하여 값을 양방향에서 핸들링 할 수 있습니다.

 

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';  // <<<< import it here
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule, FormsModule // <<<< And here
  ],
  providers: [],
  bootstrap: [AppComponent]
})

export class AppModule { }

2. 컴포넌트 파일에서 반드시 FormsModule 를 심볼 로드해야 합니다.

3. NgModule 데코레이터 내부에도 FormsModule 를 외부 입력 컴포넌트로서 활용한다고 명시해야 합니다.

4. 원리 : 원리는 간단합니다. 동일한 클래스의 프로퍼티를 바라보고 수정하는 방식입니다.

 

사용 예시