Binding dei valori alle proprietà degli elementi DOM in Angular

In Angular si distinguono due tipi di associazione dei valori ai tag: all'attributo del tag e alla proprietà dell'elemento DOM. Di norma, sono la stessa cosa, ma a volte fa la differenza.

Diamo un'occhiata a questi due metodi con degli esempi. Supponiamo di avere la seguente proprietà della classe:

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

Visualizziamo il valore di questa proprietà nel testo di textarea

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

E ora nell'attributo placeholder:

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

E ora scriviamo i dati precisamente nella proprietà dell'elemento DOM. Per fare questo, mettiamo il nome dell'attributo tra parentesi quadre:

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