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

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() забезпечують чисту та ефективну комунікацію між компонентами, підтримуючи організовану та реактивну структуру.