Legarea valorilor la proprietățile elementelor DOM în Angular

În Angular se disting două tipuri de legare a valorilor la tag-uri: la atributul tag-ului și la proprietatea elementului DOM. De regulă, acestea sunt același lucru, dar uneori are importanță.

Să analizăm aceste două metode cu exemple. Să presupunem că avem următoarea proprietate a clasei:

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

Să afișăm valoarea acestei proprietăți în textul textarea

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

Și acum în atributul placeholder:

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

Și acum să scriem datele chiar în proprietatea elementului DOM. Pentru aceasta, vom pune numele atributului între paranteze pătrate:

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