Коли компонент і його шаблон взаємодіють, між ними можна передавати дані та події різними способами. Це називається прив'язкою даних.

В Angular існує чотири типи прив'язки даних, кожен з яких виконує певну функцію.

Розглянемо, як вони працюють, на прикладі простого компонента завдання:

Тут створюється об'єкт завдання з трьома властивостями: id, title та completed. Ці властивості описують конкретне завдання — його назву та стан виконання.

Інтерполяція

Наприклад, якщо у вас є змінна, така як task.title, ви можете обгорнути її у {{ }}, і Angular відобразить її значення у HTML.

Коли Angular обробляє шаблон, він знаходить вираз {{ task.title }} і замінює його на поточне значення task.title з компонента.

Якщо значення — 'Buy groceries', саме це з'явиться всередині тегу <h3>. Той самий процес застосовується до будь-яких інших значень, які ви інтерполюєте.

Отже, інтерполяція є односторонньою: дані передаються з компонента до шаблону, і користувач просто бачить результат.

Прив'язка властивостей

Іноді потрібно не лише відображати текст — а й керувати поведінкою елементів, наприклад, вимикати кнопку, встановлювати джерело зображення або позначати прапорець.

Angular дозволяє прив'язувати значення до властивостей HTML-елементів за допомогою квадратних дужок.

Уявіть, що завдання вже виконано (task.completed = true). У такому випадку ми хочемо, щоб кнопка була неактивною. Коли Angular бачить [disabled]="task.completed", він бере значення з компонента і прив'язує його до властивості disabled DOM-елемента.

Якщо значення true, кнопка стає неактивною. Якщо false, кнопка залишається активною.

Знову ж таки, це одностороннє зв'язування: дані передаються від компонента до шаблону, і шаблон змінюється відповідно до поточного стану об'єкта task.

Зв'язування подій

Щоб ваша програма реагувала на дії користувача (наприклад, кліки), Angular надає механізм зв'язування подій. Коли користувач взаємодіє з елементом, ви можете "перехопити" цю подію та викликати метод у вашому компоненті.

Додамо метод до компонента:

І оновіть шаблон:

Коли користувач натискає кнопку, Angular виявляє подію (click) і викликає метод toggleComplete() у компоненті. Цей метод змінює значення task.completed. Після цього Angular повторно відображає шаблон, і завдяки інтерполяції ({{ task.completed ? 'Undo' : 'Complete' }}) текст кнопки миттєво оновлюється.

У цьому випадку дані рухаються в одному напрямку — від шаблону до компонента (ви передаєте дію всередину).

Двостороннє зв'язування

Іноді потрібно, щоб зміни в шаблоні (наприклад, введення в поле input) одразу оновлювали компонент — і зміни в компоненті одразу відображалися в шаблоні. Angular спрощує це завдяки двосторонньому зв'язуванню з використанням [(ngModel)].

Важливо: Щоб використовувати [(ngModel)], необхідно імпортувати FormsModule — як показано нижче:

А ось шаблон:

Саме тут відбувається магія двостороннього зв'язування. Коли користувач вводить текст у поле введення, Angular автоматично оновлює task.title у компоненті. А коли task.title змінюється у компоненті, Angular миттєво відображає цю зміну у полі введення.

На відміну від інших типів зв'язування, двостороннє зв'язування постійно підтримує синхронізацію між компонентом і шаблоном.

Основні відмінності

Кожен із цих методів прив'язки має свої особливості та найкраще підходить для різних сценаріїв взаємодії з даними в межах застосунку.