Ի՞նչ տեսակների կապեր կան 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>