Final project: complete TaskBoard

Final project: TaskBoard

In this final lesson, we will integrate everything we have learned to build a complete Kanban-style TaskBoard. This application demonstrates the fundamental concepts of Angular 21.

Integrated concepts

This project uses:

Project architecture

task-board/
  task.service.ts          # Global state with signals
  task-board.ts            # Main container component
  task-board.html          # Board template
  task-column.ts           # Kanban column (pending/in progress/completed)
  task-card.ts             # Individual task card

TaskService: centralized state

The service manages all task state. It uses signals for reactivity and computed to derive the columns:

// Private state
private readonly _tasks = signal<Task[]>([]);

// Public reads
readonly tasks = this._tasks.asReadonly();
readonly pending = computed(() =>
  this._tasks().filter(t => t.status === 'pending')
);

The key pattern is: private state, public reading, mutation via methods.

TaskColumn: presentational component

Each column receives its task list via input and emits events to the parent:

@Component({
  selector: 'app-task-column',
  changeDetection: ChangeDetectionStrategy.OnPush,
  imports: [TaskCard],
  template: `
    <div class="column">
      <h2>{{ title() }} ({{ tasks().length }})</h2>
      @for (task of tasks(); track task.id) {
        <app-task-card
          [task]="task"
          (move)="move.emit($event)"
          (remove)="remove.emit($event)"
        />
      } @empty {
        <p class="empty">No tasks</p>
      }
    </div>
  `,
})
export class TaskColumn {
  readonly title = input.required<string>();
  readonly tasks = input.required<Task[]>();
  readonly move = output<{ id: number; status: Task['status'] }>();
  readonly remove = output<number>();
}

TaskCard: individual card

Each card displays a task's information with actions:

@Component({
  selector: 'app-task-card',
  changeDetection: ChangeDetectionStrategy.OnPush,
  template: `
    <article class="card" [class]="'priority-' + task().priority">
      <h3>{{ task().title }}</h3>
      @if (task().description) {
        <p>{{ task().description }}</p>
      }
      <div class="actions">
        @switch (task().status) {
          @case ('pending') {
            <button (click)="move.emit({ id: task().id, status: 'in-progress' })">
              Start
            </button>
          }
          @case ('in-progress') {
            <button (click)="move.emit({ id: task().id, status: 'completed' })">
              Complete
            </button>
          }
        }
        <button (click)="remove.emit(task().id)">Delete</button>
      </div>
    </article>
  `,
})
export class TaskCard {
  readonly task = input.required<Task>();
  readonly move = output<{ id: number; status: Task['status'] }>();
  readonly remove = output<number>();
}

Persistence with effect

Add local persistence with an effect in the service:

constructor() {
  // Load saved tasks
  const saved = localStorage.getItem('tasks');
  if (saved) {
    this._tasks.set(JSON.parse(saved));
  }

  // Save automatically every time they change
  effect(() => {
    localStorage.setItem('tasks', JSON.stringify(this._tasks()));
  });
}

Challenges to keep learning

1. Drag and drop — Implement dragging cards between columns using CDK DragDrop
2. Filters — Add priority filtering using a signal + computed
3. Search — Use a FormControl with debounceTime to search tasks
4. Real API — Connect with Firebase Firestore using HttpClient or @angular/fire
5. Tests — Write unit tests for TaskService with Vitest
6. Routing — Add a task detail view with route parameters

Congratulations

You have completed the Angular for Developers course. You now have the foundations to build modern Angular 21 applications with:

• Standalone components and signals
• Native control flow in templates
• Services with dependency injection
• Reactive forms with validation
• HttpClient and RxJS
• SSR and pre-rendering
• Basic testing

Keep practicing by building real projects. Check the official documentation at angular.dev to dive deeper into each topic.