ngModel을 사용한 양방향 바인딩

양방향 바인딩이란?

바나나-인-어-박스

<!-- shorthand -->
<input [(ngModel)]="name">

<!-- equivalent to -->
<input [ngModel]="name" (ngModelChange)="name = $event">

ngModel 소개

<input [(ngModel)]="username">
<p>Hello, {{ username }}</p>

FormsModule 가져오기

import { FormsModule } from "@angular/forms";

@Component({
  selector: "app-demo",
  standalone: true,
  imports: [FormsModule],
  template: "<input [(ngModel)]='name'>"
})
export class DemoComponent {
  name = "";
}

텍스트 입력 바인딩

<input [(ngModel)]="email">
<p>Current: {{ email }}</p>

체크박스 바인딩

<input type="checkbox" [(ngModel)]="agreed">
<p>Agreed: {{ agreed }}</p>

// component
agreed = false;

선택 상자 바인딩

<select [(ngModel)]="color">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
</select>
<p>Picked: {{ color }}</p>

폼 안에서 ngModel 사용하기

<form #f="ngForm">
  <input name="city" [(ngModel)]="city">
</form>

독립형 ngModel

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

ngModel을 사용할 때

변경에 반응하기

<input [ngModel]="q" (ngModelChange)="onSearch($event)">

빠른 확인

복습