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

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

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

app/app.component.tsexport class AppComponent {
  public text: string = 'abcde';
}

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

app/app.component.html<textarea>{{ text }}</textarea>

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

app/app.component.html<textarea placeholder="{{ text }}"></textarea>

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

app/app.component.html<textarea [value]="text"></textarea>