Свързване на стойности към свойства на 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>