Привязка значений к свойствам DOM элементов в Angular

В Angular различают два типа привязки значений к тегам: к атрибуту тега и к свойству DOM элемента. Как правило, это одно и тоже, но иногда имеет значение.

Давайте посмотрим на эти два способа на примерах. Пусть у нас есть следующее свойство класса:

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

Давайте выведем значение этого свойства в текст textarea

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

А теперь в атрибут placeholder:

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

А теперь запишем данные именно в свойство DOM элемента. Для этого имя атрибута возьмем в квадратные скобки:

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

Дан инпут. Запишите данные его свойство value.