Ви вже ознайомилися з базовими типами прив'язки даних. Тепер розглянемо, як вони застосовуються на практиці під час роботи з TaskComponent.

Структура завдання

Наш компонент завдання відображатиме назву завдання, а також дві кнопки: одну для зміни статусу завдання (з "Complete" на "Undo"), а іншу — для видалення завдання. Ось HTML-структура, яка буде використана:

Стилі вже визначені. Ви можете переглянути їх, перейшовши до файлу style.css.

Реалізація компонента

Наш компонент працюватиме з об'єктом завдання, який зберігатиме інформацію про завдання, таку як його id, title та статус completed. Ми визначимо цей об'єкт у класі компонента:

export class TaskComponent {
  task = { id: 1, title: 'Buy groceries', completed: false };
}

Ми можемо відобразити ці дані в HTML-шаблоні компонента.

Використання даних компонента в шаблоні

Щоб відобразити дані з об'єкта task, достатньо напряму звернутися до його властивостей у шаблоні. Наприклад, щоб показати назву завдання:

<div class="task-title">{{ task.title }}</div>

Якщо завдання виконано, текст кнопки має змінитися. Можна використати тернарний оператор, щоб змінювати текст кнопки залежно від значення task.completed.

<button class="complete">
  {{ task.completed ? 'Undo' : 'Complete' }}
</button>

Якщо task.completed дорівнює true, текст кнопки буде "Undo", інакше — "Complete". Таким чином, текст кнопки динамічно змінюється відповідно до поточного стану об'єкта task.

Додавання динамічних класів за допомогою прив'язки властивостей

Тепер додамо можливість змінювати вигляд завдання залежно від його стану. Для цього використаємо прив'язку властивостей, щоб умовно застосовувати CSS-клас:

<div class="task" [class.completed]="task.completed">

Це означає: якщо task.completed дорівнює true, до елемента буде додано клас completed. В іншому випадку клас застосовуватися не буде.

У результаті, коли завдання виконано, його вигляд зміниться: текст буде перекреслено, колір стане сірим, а фон — світло-сірим. Усі ці стилі визначені в CSS-класі .completed, який був описаний вище.

Прив'язка подій до кнопок

Тепер прив’яжемо події до кнопок, щоб при їх натисканні виконувалися відповідні дії. У нас є дві кнопки:

• Кнопка "Complete" / "Undo" — при натисканні перемикає статус виконання завдання;

• Кнопка "Delete" — при натисканні видаляє завдання.

Для цього створимо два методи у компоненті TaskComponent:

deleteTask() {
  // Method to delete the task. We'll implement it later.
}

toggleTask() {
  // Toggles the value of task.completed.
  this.task.completed = !this.task.completed;
}

• Метод deleteTask() поки що залишиться порожнім, оскільки ми ще не маємо списку завдань для видалення елементів;

• Метод toggleTask() просто змінює значення task.completed. Якщо завдання позначене як виконане (true), воно стане невиконаним (false), і навпаки.

Тепер, щоб ці методи працювали при натисканні кнопок, необхідно прив'язати їх до подій кліку на кнопках. Для цього використовується прив'язка подій (Event Binding) з подією click, щоб відстежувати кліки на кнопках і викликати відповідні методи.

У цьому прикладі прив'язка подій дозволяє пов'язати дії користувача з методами компонента. Кнопка "Complete" / "Undo" викликає метод toggleTask(), який перемикає стан task.completed. Це також змінює текст кнопки з "Complete" на "Undo" залежно від статусу завдання.

Кнопка "Delete" викликає метод deleteTask(), який наразі не реалізований, оскільки видалення завдання буде додано пізніше.

Тепер шаблон нашого простого компонента завдання повністю реалізовано. Ось як виглядає цей компонент:

Компонент надає дані, а шаблон забезпечує візуальне відображення. Разом вони створюють інтерактивний і зручний інтерфейс завдань, де відображаються дані, змінюється зовнішній вигляд і кнопки адаптуються до стану завдання.