[(ngModel)]

[ngModel]은 Angular의 양방향 데이터 바인딩을 구현하는 디렉티브입니다. 이를 사용하면 입력 요소의 값을 컴포넌트의 속성과 연결하여 데이터를 동적으로 업데이트할 수 있습니다. [ngModel]을 사용하는 방법을 설명하기 위해 코드 예시를 제공하겠습니다.

1. 모듈에 FormsModule import:
   ngModel 디렉티브를 사용하려면 먼저 Angular의 FormsModule를 애플리케이션 모듈에 import해야 합니다. AppModule과 같은 루트 모듈에서 다음과 같이 수행합니다:

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

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. ngModel 디렉티브 사용:
   이제 ngModel 디렉티브를 사용하여 데이터 바인딩을 설정할 수 있습니다. 다음은 입력 요소와 컴포넌트 속성 간의 양방향 데이터 바인딩을 보여주는 예시입니다:

<input type="text" [(ngModel)]="name">
<p>Welcome, {{ name }}!</p>

위의 코드에서 name은 컴포넌트의 속성입니다. 입력 요소에 사용자가 값을 입력하면 name 속성에 동적으로 업데이트됩니다. 마지막 줄에서는 name 속성 값을 보여줍니다.

3. ngModel 디렉티브와 이벤트 결합:
   ngModel 디렉티브와 함께 입력 요소에서 발생하는 이벤트를 활용할 수도 있습니다. 예를 들어, ngModelChange 이벤트를 사용하여 입력 값이 변경될 때 특정 함수를 호출할 수 있습니다. 다음은 ngModelChange 이벤트를 사용한 예시입니다:

<input type="text" [(ngModel)]="name" (ngModelChange)="onNameChange()">
<p>Welcome, {{ name }}!</p>

위의 코드에서 onNameChange()는 입력 값이 변경될 때 호출되는 컴포넌트의 메서드입니다. ngModelChange 이벤트는 입력 값이 변경될 때마다 onNameChange() 메서드가 실행됩니다.

이와 같이 [ngModel] 디렉티브를 사용하면 컴포넌트의 속성과 입력 요소의 값을 양방향으로 바인딩하여 데이터를 동적으로 업데이트할 수 있습니다. 사용자 입력을 캡처하고 데이터 모델을 업데이트하는 데 유용한 기능입니다.