Capstoneintermediate7h

Angular Task List Application Architecture

Design (on paper/in guided steps, since this platform can't build/run a real Angular app) a task-list application's component/service architecture, applying components, services, and routing.

Tracks: Angular Application Development

Open in Project Studio

Objectives

Design a TaskListComponent, a TaskItemComponent (with @Input/@Output), and a TaskService managing shared state
Design routes for a task list view and a task detail view with a route parameter
Design a reactive form for creating a new task, with at least one validator
Explain how change detection keeps the list in sync as tasks are added/completed

Before you start

Milestones

1. Design the component and service structure

Define TaskListComponent, TaskItemComponent, and an injectable TaskService.

TaskService holds the shared list of tasks as its single source of truth
TaskItemComponent receives a task via @Input and emits a 'completed' event via @Output

2. Design the routes

Define a route for the task list and a route with a parameter for a task's detail view.

A route maps a path like tasks/:id to a TaskDetailComponent
TaskDetailComponent reads the id via ActivatedRoute and looks up the matching task from TaskService

3. Design a reactive form for adding a task

Define a FormGroup with at least a required title field.

The form uses FormGroup/FormControl, not template-driven forms
Validators.required (at minimum) is applied to the title field

4. Explain the change-detection flow

Describe how adding/completing a task propagates to the rendered list.

The explanation traces from TaskService's state change through to TaskListComponent's re-rendered bindings
It correctly identifies that no manual DOM manipulation is involved

References

Angular documentation