Реалізація компонента TaskDetails
На головній сторінці нашого додатку користувач бачить список усіх завдань. Це дозволяє швидко отримати загальне уявлення про те, що потрібно виконати.
Але що робити, якщо користувач хоче переглянути деталі конкретного завдання — його унікальний ідентифікатор, точну назву та статус? Для цього потрібно створити окрему сторінку з деталями завдання.
У цьому розділі буде показано, як створити компонент TaskDetailsComponent, який відкривається при переході за певною URL-адресою та відображає інформацію про конкретне завдання.
Створення нового компонента
Щоб відобразити деталі завдання, створюється окремий компонент. Він буде незалежним і може бути підключений безпосередньо у конфігурації маршрутизації.
Виконайте цю команду:
Ця команда створить файл task-details.component.ts разом із шаблоном, стилями та тестами. За бажанням, файл тесту можна безпечно видалити.
Реалізація компонента
На цьому етапі нам потрібні лише id, назва та статус завдання — це вся інформація, яку ми маємо про завдання. Тому в компоненті ми просто додамо властивість task.
component.ts
Не забудьте імпортувати CommonModule у компонент, оскільки він знадобиться у шаблоні.
Тепер створимо шаблон і його CSS-стилі:
component.html
component.css
Шаблон використовує директиву *ngIf для відображення картки з деталями завдання, якщо завдання існує; інакше за допомогою ng-template показується повідомлення "Завдання не знайдено".
Усередині картки відображаються ID, назва та статус завдання, а також кнопка для повернення до основного списку завдань (функціональність кнопки додамо пізніше).
Тепер наш компонент TaskDetailsComponent готовий до використання. У наступному розділі підключимо його до маршрутизації.
Дякуємо за ваш відгук!
Запитати АІ
Запитати АІ
Запитайте про що завгодно або спробуйте одне із запропонованих запитань, щоб почати наш чат
Awesome!
Completion rate improved to 3.13Реалізація компонента TaskDetails
Свайпніть щоб показати меню
На головній сторінці нашого додатку користувач бачить список усіх завдань. Це дозволяє швидко отримати загальне уявлення про те, що потрібно виконати.
Але що робити, якщо користувач хоче переглянути деталі конкретного завдання — його унікальний ідентифікатор, точну назву та статус? Для цього потрібно створити окрему сторінку з деталями завдання.
У цьому розділі буде показано, як створити компонент TaskDetailsComponent, який відкривається при переході за певною URL-адресою та відображає інформацію про конкретне завдання.
Створення нового компонента
Щоб відобразити деталі завдання, створюється окремий компонент. Він буде незалежним і може бути підключений безпосередньо у конфігурації маршрутизації.
Виконайте цю команду:
Ця команда створить файл task-details.component.ts разом із шаблоном, стилями та тестами. За бажанням, файл тесту можна безпечно видалити.
Реалізація компонента
На цьому етапі нам потрібні лише id, назва та статус завдання — це вся інформація, яку ми маємо про завдання. Тому в компоненті ми просто додамо властивість task.
component.ts
Не забудьте імпортувати CommonModule у компонент, оскільки він знадобиться у шаблоні.
Тепер створимо шаблон і його CSS-стилі:
component.html
component.css
Шаблон використовує директиву *ngIf для відображення картки з деталями завдання, якщо завдання існує; інакше за допомогою ng-template показується повідомлення "Завдання не знайдено".
Усередині картки відображаються ID, назва та статус завдання, а також кнопка для повернення до основного списку завдань (функціональність кнопки додамо пізніше).
Тепер наш компонент TaskDetailsComponent готовий до використання. У наступному розділі підключимо його до маршрутизації.
Дякуємо за ваш відгук!
