Привязка данных соединяет класс компонента с его шаблоном. 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 -->
Квадратные скобки [ ] связывают свойство с выражением (односторонняя, данные текут вниз в представление).
<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 -->
Скобки ( ) слушают события (односторонняя, данные текут вверх из представления в класс).
<input [(ngModel)]="name" /> <!-- the "banana in a box" [()] -->
<p>{{ name }}</p> <!-- stays in sync as you type -->
Синтаксис [(...)] ("банан в коробке") объединяет привязку свойства + привязку события для двусторонней синхронизации — чаще всего с ngModel на входах формы.
{{ }} → interpolation (class → view, text)
[ ] → property (class → view)
( ) → event (view → class)
[( )] → two-way (both) — it's literally [ ] + ( )
Двусторонний [()] — это просто привязка свойства [] плюс привязка события () в совокупности — скобки показывают направления.
Привязка данных — это способ, которым Angular синхронизирует класс и шаблон — это механизм, стоящий за каждым динамическим интерфейсом.
Знание четырех типов и их синтаксиса ({{}}, [], (), [()]) и того, в каком направлении течет каждый, необходимо для чтения и написания любого шаблона Angular; почти каждая строка шаблона Angular использует один из них.