Binding nilai ke properti elemen DOM di Angular

Di Angular, terdapat dua jenis binding nilai ke tag: ke atribut tag dan ke properti elemen DOM. Biasanya, keduanya sama, tetapi terkadang ada perbedaannya.

Mari kita lihat kedua cara ini dengan contoh. Misalkan kita memiliki properti kelas berikut:

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

Mari kita tampilkan nilai properti ini di teks textarea

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

Dan sekarang di atribut placeholder:

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

Dan sekarang mari kita tulis data tepatnya ke properti elemen DOM. Untuk melakukannya, kita letakkan nama atributnya di dalam tanda kurung siku:

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