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

Але що робити, якщо користувач хоче переглянути деталі конкретного завдання — його унікальний ідентифікатор, точну назву та статус? Для цього потрібно створити окрему сторінку з деталями завдання.

У цьому розділі буде показано, як створити компонент TaskDetailsComponent, який відкривається при переході користувача за певною URL-адресою та відображає інформацію про конкретне завдання.

Створення нового компонента

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

Виконайте цю команду:

Ця команда створить файл task-details.component.ts разом із шаблоном, стилями та тестами. За бажанням, файл з тестами можна безпечно видалити.

Реалізація компонента

На цьому етапі нам потрібні лише id, назва та статус завдання — це вся інформація, яку ми маємо про завдання. Тому в компоненті ми просто додамо властивість task.

Тепер створимо шаблон і його CSS-стилі:

У шаблоні використовується директива *ngIf для відображення картки з деталями завдання, якщо завдання існує; інакше за допомогою ng-template показується повідомлення "Task not found".

Усередині картки відображаються ID, title та status завдання, а також кнопка для повернення до основного списку завдань (функціональність кнопки додамо пізніше).

Тепер наш TaskDetailsComponent готовий до використання. У наступному розділі підключимо його до маршрутизації.