Односторонняя привязка данных:
[property]="value": Поток данных из компонента в шаблон. Используется для установки значений атрибутов HTML-элементов (например, [src], [href], [disabled]).{{ value }}: Поток данных из компонента в шаблон. Преобразует значение выражения в строку и вставляет его в DOM.[attr.attribute-name]="value": Поток данных из компонента в шаблон. Используется для установки значений атрибутов, которые не имеют соответствующих свойств DOM (например, aria-*, colspan).Двусторонняя привязка данных:
[(ngModel)]="value": Сокращение для комбинации привязки свойств и привязки событий ([ngModel]="value" и (ngModelChange)="value = $event"). Обеспечивает синхронизацию данных между свойством компонента и элементом формы. Требует импорта FormsModule.Односторонняя привязка событий:
(event)="method()": Поток данных из шаблона в компонент. Реагирует на события DOM (например, click, input, submit) и вызывает метод в компоненте.| Тип привязки | Направление потока данных | Синтаксис | Примеры использования |
|---|---|---|---|
| Привязка свойств | Компонент -> Шаблон | [src]="imgUrl" | Установка src изображения |
| Интерполяция | Компонент -> Шаблон | {{ title }} | Отображение текста заголовка |
| Привязка атрибутов | Компонент -> Шаблон | [attr.colspan]="colspan" | Установка colspan в табличной ячейке |
| Двусторонняя привязка | Компонент <=> Шаблон | [(ngModel)]="name" | Связывание поля ввода формы с переменной компонента |
| Привязка событий | Шаблон -> Компонент | (click)="onClick()" | Вызов метода компонента при клике на кнопку |