PracticeServices is a starter Angular project designed to help students learn how to use Angular Services to manage shared data and application logic.
The application allows users to manage tasks by creating, viewing, updating status, and deleting them. The project demonstrates how services centralize data management and how components interact with shared state.
The application supports the following functionality:
- Create new tasks
- View a list of tasks
- Update the status of tasks
- Delete tasks
When the application first loads, three sample tasks are displayed. Each task includes:
- A dropdown menu to update the task status
- A delete button to remove a task
The project contains the following components:
- Root component of the application
- Hosts the other components
- Provides the form to create new tasks
- Displays individual tasks
- Allows users to update task status
- Allows users to delete tasks
Data communication between parent and child components is implemented using:
- Signal-based
input() - Signal-based
output()
These functions allow components to exchange data and events in a reactive and structured way.
- Create an interface named
TaskItemto represent task objects. - Create a Service - TaskService
- Move the task array to TaskService and convert this to a signal
- Implement methods to add new tasks, updateStatus, and delete tasks.
- Inject TaskService into NewTask and Task Components to access tasks and it's methods.