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

Ми додамо можливість створювати нове завдання за допомогою зручної кнопки та модальної форми.

Ми реалізуємо:

• Стильну кнопку Add;

• Модальне вікно з полем введення для назви завдання;

• Логіку додавання завдання до списку у TaskService;

• Автоматичну генерацію унікального ідентифікатора.

Початок роботи

Перш за все, нам потрібно розширити наш TaskService, щоб він міг створювати та зберігати нові завдання. Сервіс повинен не лише зберігати завдання, а й обробляти всю бізнес-логіку, пов’язану з ними.

Ми створимо метод addTask у сервісі. Генерація унікального ідентифікатора, створення об’єкта завдання та його збереження у списку відбуватимуться всередині сервісу. Метод отримуватиме лише title, який буде передаватися з TaskListComponent.

Метод addTask() приймає лише назву завдання та створює об'єкт Task всередині себе. Спочатку він знаходить максимальний ідентифікатор серед існуючих завдань, потім додає до нього 1, щоб згенерувати унікальний ідентифікатор. Нове завдання завжди встановлюється як невиконане (completed: false) і одразу додається до масиву tasks.

Такий підхід усуває зайву логіку з компонента та робить сервіс самодостатнім і багаторазово використовуваним.

Оновлення TaskListComponent

Тепер, коли вся логіка створення нового завдання перенесена до сервісу, компонент відповідає лише за отримання введення користувача, передачу назви завдання до сервісу та оновлення локального списку завдань. Такий підхід спрощує компонент і централізує бізнес-логіку в TaskService.

У компоненті ми додамо дві змінні:

• showAddTask — прапорець, що керує видимістю модального вікна для додавання завдання;

• newTaskTitle — рядок для збереження введеної користувачем назви завдання.

Також реалізуємо метод addTask(), який:

1. Перевіряє, що введений рядок не порожній;

2. Передає назву завдання до методу сервісу addTask(title: string);

3. Оновлює локальний список завдань;

4. Очищає поле введення та закриває модальне вікно.

Метод addTask() тепер максимально спрощений: він лише обробляє взаємодію з користувачем і делегує всю бізнес-логіку сервісу. Це робить код легшим для підтримки та тестування.

Також переконайтеся, що у вашому модулі імпортовано FormsModule, оскільки він необхідний для двостороннього зв'язування даних із newTaskTitle.

Додавання кнопки та модального вікна

Тепер додамо частину інтерфейсу: кнопку "Додати" та HTML-розмітку для модального вікна, яке містить поле введення та кнопки.

Коли користувач натискає кнопку Add, змінна showAddTask набуває значення true, і з'являється модальне вікно. Поле введення пов'язане зі змінною newTaskTitle через [(ngModel)], а дії кнопок або зберігають завдання, або закривають модальне вікно без змін.

Користувачі зможуть зручно додавати завдання через модальну форму. Нове завдання одразу з'являється у списку без необхідності оновлення сторінки.

Тепер ми реалізували інтерактивність, яка робить наш застосунок повнофункціональним і зручним для щоденного використання.