Як вони пов'язані?

TaskListComponent керуватиме масивом завдань, де кожне завдання є об'єктом з полями id, title та completed. Для відображення кожного завдання ми використаємо TaskComponent.

Крім того, TaskComponent буде повідомляти батьківський компонент про дії користувача, наприклад, коли завдання потрібно видалити або позначити як виконане. Ця взаємодія відбуватиметься через генерацію подій.

Реалізація логіки TaskListComponent

Створимо компонент, який відповідатиме за керування списком завдань. У ньому ми визначимо масив завдань, а також додамо два методи — deleteTask() та toggleStatus() — для обробки керування завданнями.

• Список завдань (tasks) управляється всередині компонента, що робить TaskListComponent центральним контролером;
• Метод deleteTask() фільтрує завдання за його id;
• Метод toggleStatus() знаходить завдання за id та перемикає його статус completed.

Цей код використовує директиву *ngFor для ітерації по масиву tasks і створення TaskComponent для кожного завдання. Детальніше розглянемо, як працює *ngFor, у наступному розділі.

• [task]="task" — передає поточне завдання дочірньому компоненту для його відображення;

• (onDelete)="deleteTask($event)" — прослуховує подію onDelete від дочірнього компонента та викликає deleteTask() для видалення завдання;

• (onToggle)="toggleStatus($event)" — прослуховує подію onToggle та викликає toggleStatus() для зміни статусу завдання.

Декоратори: @Input() та @Output()

Тепер настав час з'єднати TaskComponent з TaskListComponent, і для цього ми використаємо декоратори @Input() та @Output().

В Angular декоратори @Input() та @Output() є ключовими інструментами для взаємодії між компонентами. Вони дозволяють передавати дані в компонент і генерувати події з компонента. Ось короткий огляд:

Ось приклад того, як це працює у TaskComponent:

У нашому випадку, task — це об'єкт, який передається з батьківського компонента TaskListComponent до TaskComponent.

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

@Output() та EventEmitter використовуються для сповіщення батьківського компонента про події, що відбуваються у дочірньому. Ці декоратори дозволяють дочірньому компоненту повідомляти про дії, такі як видалення завдання або зміна статусу, батьківському компоненту.

Метод deleteTask() викликається, коли користувач бажає видалити завдання. Він випромінює id завдання, що дозволяє батьківському компоненту видалити це завдання зі свого списку.

Метод toggleTask() перемикає статус виконання завдання та інформує про цю зміну батьківський компонент.

Як це працює разом

1. TaskListComponent передає завдання до TaskComponent за допомогою @Input();

2. Користувач взаємодіє із завданням (наприклад, натискає "Видалити");

3. TaskComponent випромінює подію (onDelete або onToggle) з id завдання;

4. TaskListComponent перехоплює подію та оновлює список завдань;

5. Angular автоматично оновлює інтерфейс користувача на основі змінених даних.

Таким чином, @Input() та @Output() забезпечують чисту та ефективну комунікацію між компонентами, підтримуючи організовану та реактивну структуру.