Какви видове обвързвания съществуват в Angular?

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

• Обвързване на свойства (Property Binding): Позволява да свържете HTML свойство на елемент с свойство на компонента. Промените в стойността на свойството на компонента актуализират стойността на HTML свойството. Използва се с квадратни скоби [].

  <img [src]="imageUrl" alt="Изображение">
  

• Интерполация: Позволява да покажете стойността на свойство на компонента като низ в шаблона. Използва се с двойни къдрави скоби {{}}.

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

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

  <button (click)="onClick()">Кликни ме</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>