Bindung av värden till DOM-elementens egenskaper i Angular

I Angular skiljer man på två typer av bindning av värden till taggar: till taggens attribut och till DOM-elementets egenskap. Som regel är det samma sak, men ibland spelar det roll.

Låt oss titta på dessa två sätt med exempel. Låt oss säga att vi har följande klassegenskap:

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

Låt oss visa värdet på denna egenskap i texten textarea

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

Och nu i attributet placeholder:

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

Och nu skriver vi data precis i egenskapen DOM-element. För att göra detta, sätter vi attributnamnet i hakparenteser:

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