Angular에서의 양방향 데이터 바인딩

Angular에서는 입력 필드에 텍스트를 입력할 때마다 해당 텍스트가 자동으로 클래스의 속성으로 전달되도록 할 수 있습니다. 이를 양방향 데이터 바인딩이라고 합니다.

이러한 바인딩이 작동하려면 먼저 활성화해야 합니다. 이를 위해 컴포넌트 파일에서 FormsModule을 가져옵니다:

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

그런 다음 데코레이터 @Component의 imports 속성에 추가합니다:

@Component({
	selector: 'app-root',
	standalone: true,
	imports: [FormsModule, UserComponent],
	templateUrl: './app.component.html',
	styleUrl: './app.component.css'
})

이 후 양방향 데이터 바인딩이 활성화되고 이를 사용할 수 있습니다. 한번 해보겠습니다.

먼저, 양방향 바인딩할 클래스 속성을 선언합니다:

export class AppComponent {
	public text: string = '';
}

디브와 입력 필드가 있다고 가정합니다. 디브에 클래스의 어떤 속성이 출력되도록 해봅시다:

<div>
	{{ text }}
</div>
<input>

이제 text 속성을 입력 필드의 변경에 바인딩해 보겠습니다. 이를 위해 입력 필드에 특별한 지시문 [(ngModel)]를 작성하고, 그 값으로 클래스의 속성을 지정해야 합니다:

<div>
	{{ text }}
</div>
<input [(ngModel)]="text">

이제 코드를 실행하고 입력 필드에 텍스트를 입력하기 시작하면, 그 텍스트가 디브에 즉시 표시되기 시작할 것입니다.

입력 필드와 단락이 주어집니다. 입력 필드에 숫자가 출력됩니다. 입력 필드에 숫자를 입력할 때마다 단락에 그 숫자의 제곱이 표시되도록 하세요.

두 개의 입력 필드와 단락이 주어집니다. 입력 필드에 숫자를 입력합니다. 단락에 입력된 숫자들의 합이 표시되도록 하세요.