Які компоненти потрібні?

Ви вже знаєте, що таке компонент. Тепер настав час створити власний компонент, який можна використовувати у додатку.

Додаток складатиметься з двох компонентів. Перший — це TaskComponent, який відповідає за відображення окремого завдання. У цьому компоненті ви показуєте id, title та status завдання. Також будуть додані кнопки, які дозволяють користувачу завершити або видалити завдання.

Другий компонент — це TaskListComponent, який є обгорткою для всіх завдань. Він містить масив завдань і відображає кожне за допомогою TaskComponent. Цей компонент також відповідає за логіку додавання, оновлення та видалення завдань.

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

Правила створення компонента

В Angular для створення компонентів використовується Angular CLI. Це зручний інструмент, який автоматично генерує всі необхідні файли та інтегрує компонент у відповідну частину вашого проєкту.

Потрібно створити два компоненти: TaskComponent та TaskListComponent. Один відповідатиме за відображення окремих завдань, а інший — за керування списком завдань.

Структура проєкту

Для впорядкування коду створюється окрема папка для кожного компонента всередині директорії src/app. Це спростить навігацію та підтримку коду, особливо у міру зростання застосунку.

Створення TaskComponent

Для генерації компонента використовується Angular CLI. Відкрийте термінал у VS Code та переконайтеся, що ви знаходитеся в кореневій папці проєкту. Потім виконайте наступну команду:

Або коротша версія:

Ось детальний розбір команди:

Після виконання команди в папці task буде створено нову папку src/app, яка міститиме чотири файли:

Це стандартне налаштування для будь-якого компонента. Єдина відмінність — префікс у назвах файлів (task у цьому випадку), який походить від імені, вказаного у команді генерації.

Створення TaskListComponent

Тепер створимо компонент для списку завдань, так само, як і раніше. Виконайте наступну команду:

Це створить нову папку task-list, яка міститиме такі файли:

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

На цьому етапі у вас є два окремих компоненти з чіткою структурою: TaskComponent, який відповідає за логіку та шаблон для окремого завдання, і TaskListComponent, який керує всім списком завдань.