Angular Action Management: A Todo List Application

This challenge focuses on implementing actions within an Angular application to manage a simple todo list. You'll be creating components and services to handle adding, marking as complete, and deleting todo items, demonstrating a fundamental pattern for managing state and user interactions in Angular. This is a core concept for building interactive and dynamic user interfaces.

Problem Description

You are tasked with building a basic todo list application in Angular. The application should allow users to:

Add a new todo item: The user should be able to enter text into an input field and add it to the list.
Mark a todo item as complete: Each todo item should have a checkbox. Toggling the checkbox should mark the item as complete (e.g., visually indicate completion, like striking through the text).
Delete a todo item: Each todo item should have a delete button. Clicking the button should remove the item from the list.

The application's state (the list of todos) should be managed centrally, likely using a service. Components should interact with this service to perform actions. You should use Angular's recommended practices for component interaction and data binding.

Key Requirements:

Component Structure: Create at least two components: a main todo list component and a single todo item component.
Service: Create a service to manage the todo list data and provide methods for adding, marking complete, and deleting todos.
Data Binding: Use Angular's data binding features (e.g., ngModel, [checked], (click)) to connect the UI to the service's data and actions.
Immutability (Recommended): While not strictly required, consider updating the todo list immutably (creating new arrays instead of modifying existing ones) for better change detection and predictability.

Expected Behavior:

The todo list should initially be empty.
When a new todo item is added, it should appear in the list.
When a todo item is marked as complete, its visual representation should change (e.g., strikethrough).
When a todo item is deleted, it should disappear from the list.
The UI should update immediately in response to user actions.

Edge Cases to Consider:

Empty input field: Prevent adding empty todo items.
Deleting the last item: The list should become empty.
Marking an already completed item as complete again: Should toggle back to incomplete.

Examples

Example 1:

Input: User adds "Buy groceries" and "Walk the dog" to the list.
Output: The list displays:
- [ ] Buy groceries
- [ ] Walk the dog
Explanation: The initial state of the list with two new items.

Example 2:

Input: User clicks the checkbox next to "Buy groceries".
Output: The list displays:
- [x] Buy groceries (strikethrough)
- [ ] Walk the dog
Explanation: "Buy groceries" is marked as complete and visually updated.

Example 3:

Input: User enters "Do laundry" and adds it. Then, the user deletes "Walk the dog".
Output: The list displays:
- [ ] Buy groceries
- [ ] Do laundry
Explanation: "Walk the dog" is removed from the list.

Constraints

Angular Version: Use Angular version 16 or later.
TypeScript: The code must be written in TypeScript.
No External Libraries: Do not use any external libraries beyond Angular's core modules.
Performance: The application should be responsive and performant, even with a moderate number of todo items (e.g., up to 50). Avoid unnecessary re-renders.
Code Clarity: Write clean, well-documented code that is easy to understand and maintain.

Notes

Consider using Angular's EventEmitter for communication between components if direct service injection isn't ideal for every interaction.
Think about how to structure your service to make it reusable and testable.
Focus on the core functionality of adding, completing, and deleting todos. Styling and advanced features are not required for this challenge.
You can use a simple array of objects to represent the todo list in your service. Each object could have properties like id, text, and completed. Using a unique id is recommended for efficient deletion.