Δέσμευση τιμών σε ιδιότητες DOM στοιχείων στο Angular

Στο Angular διακρίνουμε δύο τύπους δέσμευσης τιμών σε ετικέτες: σε χαρακτηριστικό ετικέτας και σε ιδιότητα DOM στοιχείου. Γενικά, αυτό είναι το ίδιο πράγμα, αλλά μερικές φορές έχει σημασία.

Ας δούμε αυτούς τους δύο τρόπους με παραδείγματα. Ας υποθέσουμε ότι έχουμε την ακόλουθη ιδιότητα κλάσης:

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

Ας εμφανίσουμε την τιμή αυτής της ιδιότητας στο κείμενο textarea

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

Και τώρα στο χαρακτηριστικό placeholder:

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

Και τώρα ας γράψουμε δεδομένα ακριβώς στην ιδιότητα του DOM στοιχείου. Για να το κάνουμε αυτό, θα βάλουμε το όνομα του χαρακτηριστικού σε αγκύλες:

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