Angular에서 DOM 요소 속성에 값 바인딩하기

Angular에서는 태그에 값을 바인딩하는 두 가지 유형이 있습니다: 태그의 속성(attribute)에 바인딩하는 것과 DOM 요소의 프로퍼티(property)에 바인딩하는 것입니다. 일반적으로 둘은 동일하지만, 경우에 따라 차이가 있습니다.

예제를 통해 이 두 가지 방법을 살펴보겠습니다. 다음과 같은 클래스 프로퍼티가 있다고 가정해 보겠습니다:

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

이 프로퍼티의 값을 textarea의 텍스트로 출력해 봅시다.

<textarea>{{ text }}</textarea>

이번에는 placeholder 속성에 출력해 보겠습니다:

<textarea placeholder="{{ text }}"></textarea>

이번에는 데이터를 DOM 요소의 프로퍼티에 직접 기록해 보겠습니다. 이를 위해 속성 이름을 대괄호로 묶습니다:

<textarea [value]="text"></textarea>

인풋이 주어져 있습니다. 데이터를它的 value 프로퍼티에 기록하세요.