Project 1 — Todo App

1. Learning Objectives

In this project guide, you will build a reactive, signal-based Todo Application. By the end of this project, you will be able to:

• Structure an Angular application using modern Standalone Components.
• Manage application state reactively using Angular signal() and computed().
• Capture and validate user inputs using Angular Forms.
• Render lists dynamically and optimize updates using the new template @for loop.
• Apply responsive Tailwind styling to present clean layout dashboards.

2. What We Are Building & Design System

We are building a Todo manager. The application features:

• Input Form: A text input to add new tasks with simple validation.
• Task List: A dynamic list showing task descriptions, checkbox toggles for completion status, and deletion buttons.
• Filter Buttons: Options to switch between viewing 'All', 'Pending', and 'Completed' tasks.
• Progress Bar: A visual percentage gauge showing completed tasks.

3. Step-by-Step Implementation Guide

Step 1: Define the Data Model

Create a clear typescript interface mapping tasks:

Step 2: Initialize Signal State

Use writable signals to store list entries and current filter selections:

Step 3: Define Computed Projections

Create derived properties using computed(), combining lists and filters to output filtered task arrays and completion rates:

4. Full Working Code

Below is the complete standalone component code implementing the Todo Application:

5. Reviewing the Build / Self-Correction Checks

Verify your implementation adheres to standard reactive principles:

• Check for direct mutations: Ensure you are using `update()` with array spread operators to add and toggle items. Direct modifications like this.todos().push() will break updates.
• Test the progress meter: Verify that adding or checking off items immediately triggers calculations for completion rate and rendering of the green progress bar.

6. Practice Exercises & Extensions

7. Summary & Next Steps

By building this Todo app, you have integrated standalone components, two-way model bindings, and signal-based state flows.

• Next, proceed to **Project 2 — Dashboard** to build a complex dashboard containing multi-panel layouts and custom gauges.

---