Wiązanie danych łączy klasę komponentu z jego szablonem. Angular ma cztery formy, rozróżniane przez kierunek przepływu danych i ich charakterystyczną składnię.
1. Interpolacja — klasa → widok (tekst)
html
{{ title }}
{{ price * quantity }}
Wiązanie danych łączy klasę komponentu z jego szablonem. Angular ma cztery formy, rozróżniane przez kierunek przepływu danych i ich charakterystyczną składnię.
{{ 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 -->
Nawiasy kwadratowe [ ] wiążą właściwość z wyrażeniem (w jednym kierunku, dane płyną w dół do widoku).
<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 -->
Nawiasy ( ) nasłuchują zdarzeń (w jednym kierunku, dane płyną w górę z widoku do klasy).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
Składnia [(...)] ("banan w pudełku") łączy wiązanie właściwości + wiązanie zdarzeń do dwukierunkowej synchronizacji — najczęściej z ngModel na wejściach formularza.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
Dwukierunkowe [()] to po prostu wiązanie właściwości [] plus wiązanie zdarzeń () połączone — nawiasy pokazują kierunki.
Wiązanie danych to sposób, w jaki Angular utrzymuje klasę i szablon w synchronizacji — jest to mechanizm stojący za każdym dynamicznym interfejsem użytkownika.
Znajomość czterech typów i ich składni ({{}}, [], (), [()]) oraz kierunku, w którym przepływa każdy, jest niezbędna do czytania i pisania dowolnego szablonu Angular; prawie każdy wiersz szablonu Angular używa jednego z nich.