Vázání hodnot na vlastnosti DOM elementů v Angular

V Angular se rozlišují dva typy vazby hodnot na tagy: na atribut tagu a na vlastnost DOM elementu. Obecně platí, že je to stejné, ale někdy na tom záleží.

Podívejme se na tyto dva způsoby na příkladech. Předpokládejme, že máme následující vlastnost třídy:

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

Vypišme hodnotu této vlastnosti do textu textarea

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

A nyní do atributu placeholder:

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

A nyní zapišme data přímo do vlastnosti DOM elementu. K tomu vezmeme název atributu do hranatých závorek:

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