Какие существуют типы привязок в Angular?

В Angular существует несколько типов привязок, позволяющих синхронизировать данные между компонентом и шаблоном:

• Привязка свойств (Property Binding): Позволяет привязать HTML-свойство элемента к свойству компонента. Изменения значения свойства компонента обновляют значение HTML-свойства. Используется квадратные скобки [].

  <img [src]="imageUrl" alt="Image">
  

• Интерполяция (Interpolation): Позволяет отображать значение свойства компонента в шаблоне в виде строки. Использует двойные фигурные скобки {{}}.

  <p>{{ greeting }}</p>
  

• Привязка событий (Event Binding): Позволяет реагировать на события DOM (например, клики, ввод текста) и вызывать методы компонента. Используется круглые скобки ().

  <button (click)="onClick()">Click me</button>
  

• Двусторонняя привязка (Two-Way Binding): Объединяет привязку свойств и привязку событий, позволяя синхронизировать значение между элементом формы и свойством компонента в обе стороны. Использует синтаксис [(ngModel)]. Требует импорта FormsModule.

  <input [(ngModel)]="userName" type="text">
  

• Привязка атрибутов (Attribute Binding): Используется для привязки атрибутов HTML, которые не являются свойствами DOM (например, colspan, aria-*). Использует префикс attr..

  <td [attr.colspan]="colspanCount"></td>
  

• Привязка классов (Class Binding): Позволяет динамически добавлять или удалять CSS-классы элемента в зависимости от значения свойства компонента.

  <div [class.active]="isActive"></div>
  

• Привязка стилей (Style Binding): Позволяет устанавливать CSS-стили элемента в зависимости от значения свойства компонента.

  <div [style.backgroundColor]="bgColor"></div>