Ви вже ознайомилися з основними типами прив'язки даних. Тепер розглянемо, як вони застосовуються на практиці під час роботи з 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(), який наразі не реалізований, оскільки видалення завдання буде додано пізніше.

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

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