Data binding συνδέει την κλάση ενός component με το template του. Το Angular έχει τέσσερις μορφές, που διακρίνονται από την κατεύθυνση της ροής δεδομένων και τη χαρακτηριστική τους σύνταξη.
{{ title }}
{{ price * quantity }}
<img [src]="imageUrl" /> <!-- bind a DOM property -->
<button [disabled]="isLoading">Save</button>
<app-child [user]="currentUser"></app-child> <!-- pass to a component @Input -->
Οι τετράγωνες αγκύλες [ ] δεσμεύουν μια ιδιότητα σε μια έκφραση (one-way, τα δεδομένα ρέουν κάτω στο view).
<button (click)="save()">Save</button> <!-- DOM event → method -->
<input (input)="onInput($event)" /> <!-- $event = the event object -->
<app-child (deleted)="onDeleted($event)"></app-child> <!-- component @Output -->
Οι παρενθέσεις ( ) ακούν για events (one-way, τα δεδομένα ρέουν πάνω από το view στην κλάση).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
Η σύνταξη [(...)] ("banana in a box") συνδυάζει property + event binding για two-way sync — πιο συχνά με ngModel σε form inputs.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
Το two-way [()] είναι απλώς property binding [] συν event binding () συνδυασμένα — οι αγκύλες δείχνουν τις κατευθύνσεις.
Το data binding είναι ο τρόπος που το Angular κρατά την κλάση και το template συγχρονισμένα — είναι ο μηχανισμός πίσω από κάθε δυναμικό UI.
Το να γνωρίζετε τους τέσσερις τύπους και τη σύνταξή τους ({{}}, [], (), [()]) και ποια κατεύθυνση ρέει ο καθένας είναι απαραίτητο για την ανάγνωση και τη σύνταξη οποιουδήποτε Angular template· σχεδόν κάθε γραμμή ενός Angular template χρησιμοποιεί έναν από αυτούς.