Vinculando valores a propriedades de elementos DOM no Angular

No Angular, distinguimos dois tipos de vinculação de valores a tags: para um atributo da tag e para uma propriedade do elemento DOM. Geralmente, são a mesma coisa, mas às vezes faz diferença.

Vamos dar uma olhada nessas duas maneiras com exemplos. Suponha que temos a seguinte propriedade de classe:

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

Vamos exibir o valor desta propriedade no texto do textarea

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

E agora no atributo placeholder:

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

E agora vamos gravar os dados precisamente na propriedade do elemento DOM. Para fazer isso, colocamos o nome do atributo entre colchetes:

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