Exercise 1: Building a Todo Application

Objective

Build a complete todo application to practice components, templates, and data binding.

Prerequisites

Node.js 18+ installed
Angular CLI 17+ installed

Setup

# Create new Angular project
ng new todo-app --standalone --routing=false --style=css

# Navigate to project
cd todo-app

# Start development server
ng serve

Requirements

Features to Implement

✅ Add new todos
✅ Mark todos as complete/incomplete
✅ Delete todos
✅ Filter todos (All, Active, Completed)
✅ Display todo count
✅ Clear completed todos

Step-by-Step Implementation

Step 1: Define the Todo Interface

// src/app/models/todo.model.ts
export interface Todo {
  id: number;
  text: string;
  completed: boolean;
  createdAt: Date;
}

Step 2: Create the Main Component

// src/app/app.component.ts
import { Component, signal, computed } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';
import { Todo } from './models/todo.model';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [CommonModule, FormsModule],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent {
  // State
  todos = signal<Todo[]>([]);
  newTodoText = '';
  filter = signal<'all' | 'active' | 'completed'>('all');

  // Computed values
  filteredTodos = computed(() => {
    const todos = this.todos();
    const currentFilter = this.filter();

    switch (currentFilter) {
      case 'active':
        return todos.filter(t => !t.completed);
      case 'completed':
        return todos.filter(t => t.completed);
      default:
        return todos;
    }
  });

  activeCount = computed(() => this.todos().filter(t => !t.completed).length);

  completedCount = computed(() => this.todos().filter(t => t.completed).length);

  // Actions
  addTodo() {
    const text = this.newTodoText.trim();
    if (!text) return;

    const newTodo: Todo = {
      id: Date.now(),
      text,
      completed: false,
      createdAt: new Date(),
    };

    this.todos.update(todos => [...todos, newTodo]);
    this.newTodoText = '';
  }

  toggleTodo(id: number) {
    this.todos.update(todos =>
      todos.map(todo =>
        todo.id === id ? { ...todo, completed: !todo.completed } : todo
      )
    );
  }

  deleteTodo(id: number) {
    this.todos.update(todos => todos.filter(t => t.id !== id));
  }

  clearCompleted() {
    this.todos.update(todos => todos.filter(t => !t.completed));
  }

  setFilter(filter: 'all' | 'active' | 'completed') {
    this.filter.set(filter);
  }
}

Step 3: Create the Template

<!-- src/app/app.component.html -->
<div class="todo-app">
  <header class="header">
    <h1>My Todos</h1>

    <!-- Add Todo Form -->
    <div class="add-todo">
      <input
        type="text"
        [(ngModel)]="newTodoText"
        (keyup.enter)="addTodo()"
        placeholder="What needs to be done?"
        class="new-todo-input"
      />
      <button (click)="addTodo()" class="add-btn">Add</button>
    </div>
  </header>

  <!-- Todo List -->
  <main class="main">
    @if (todos().length > 0) {
    <ul class="todo-list">
      @for (todo of filteredTodos(); track todo.id) {
      <li [class.completed]="todo.completed">
        <div class="todo-item">
          <input
            type="checkbox"
            [checked]="todo.completed"
            (change)="toggleTodo(todo.id)"
            class="checkbox"
          />
          <span class="todo-text">{{ todo.text }}</span>
          <button
            (click)="deleteTodo(todo.id)"
            class="delete-btn"
            aria-label="Delete todo"
          >
            ×
          </button>
        </div>
      </li>
      } @empty {
      <li class="empty-state">No {{ filter() }} todos</li>
      }
    </ul>
    } @else {
    <div class="empty-state">
      <p>No todos yet. Add one above! 🎯</p>
    </div>
    }
  </main>

  <!-- Footer -->
  @if (todos().length > 0) {
  <footer class="footer">
    <div class="todo-count">
      <strong>{{ activeCount() }}</strong>
      {{ activeCount() === 1 ? 'item' : 'items' }} left
    </div>

    <div class="filters">
      <button
        (click)="setFilter('all')"
        [class.active]="filter() === 'all'"
        class="filter-btn"
      >
        All
      </button>
      <button
        (click)="setFilter('active')"
        [class.active]="filter() === 'active'"
        class="filter-btn"
      >
        Active
      </button>
      <button
        (click)="setFilter('completed')"
        [class.active]="filter() === 'completed'"
        class="filter-btn"
      >
        Completed
      </button>
    </div>

    @if (completedCount() > 0) {
    <button (click)="clearCompleted()" class="clear-completed">
      Clear completed
    </button>
    }
  </footer>
  }
</div>

Step 4: Add Styles

/* src/app/app.component.css */
.todo-app {
  max-width: 600px;
  margin: 40px auto;
  background: white;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  overflow: hidden;
}

.header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 2rem;
}

.header h1 {
  margin: 0 0 1rem 0;
  font-size: 2rem;
  font-weight: 300;
}

.add-todo {
  display: flex;
  gap: 0.5rem;
}

.new-todo-input {
  flex: 1;
  padding: 0.75rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
}

.new-todo-input:focus {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

.add-btn {
  padding: 0.75rem 1.5rem;
  background: white;
  color: #667eea;
  border: none;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.add-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.main {
  min-height: 200px;
}

.todo-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.todo-list li {
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s;
}

.todo-list li:hover {
  background-color: #f9fafb;
}

.todo-item {
  display: flex;
  align-items: center;
  padding: 1rem;
  gap: 0.75rem;
}

.checkbox {
  width: 20px;
  height: 20px;
  cursor: pointer;
}

.todo-text {
  flex: 1;
  font-size: 1rem;
}

.completed .todo-text {
  text-decoration: line-through;
  color: #9ca3af;
}

.delete-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: #ef4444;
  color: white;
  border-radius: 4px;
  font-size: 1.5rem;
  cursor: pointer;
  opacity: 0;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.todo-item:hover .delete-btn {
  opacity: 1;
}

.delete-btn:hover {
  background: #dc2626;
  transform: scale(1.1);
}

.empty-state {
  text-align: center;
  padding: 3rem 1rem;
  color: #9ca3af;
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  font-size: 0.875rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.todo-count {
  color: #6b7280;
}

.filters {
  display: flex;
  gap: 0.5rem;
}

.filter-btn {
  padding: 0.5rem 1rem;
  border: 1px solid #e5e7eb;
  background: white;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
}

.filter-btn:hover {
  border-color: #667eea;
}

.filter-btn.active {
  background: #667eea;
  color: white;
  border-color: #667eea;
}

.clear-completed {
  padding: 0.5rem 1rem;
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  font-weight: 500;
}

.clear-completed:hover {
  text-decoration: underline;
}

Testing Your Application

Run ng serve
Navigate to http://localhost:4200
Test all features:
- Add todos
- Mark as complete
- Delete todos
- Filter todos
- Clear completed

Bonus Challenges

Challenge 1: Add Edit Functionality

Allow users to double-click a todo to edit it.

Challenge 2: Add Priority Levels

Add priority levels (Low, Medium, High) with color coding.

Challenge 3: Persist to LocalStorage

Save todos to localStorage and restore on page load.

// Hint for LocalStorage
ngOnInit() {
  const savedTodos = localStorage.getItem('todos');
  if (savedTodos) {
    this.todos.set(JSON.parse(savedTodos));
  }

  // Save on changes
  effect(() => {
    localStorage.setItem('todos', JSON.stringify(this.todos()));
  });
}

Challenge 4: Add Due Dates

Add due date functionality with date picker.

Challenge 5: Add Categories/Tags

Allow categorizing todos with tags.

Key Concepts Practiced

✅ Component creation ✅ Template syntax (interpolation, property binding, event binding) ✅ Structural directives (@if, @for) ✅ Signals for reactive state ✅ Computed values ✅ Two-way binding with [(ngModel)] ✅ CSS styling

Common Issues & Solutions

Issue: ngModel not working

Solution: Import FormsModule in component imports array

Issue: Styles not applying

Solution: Check that styleUrl (not styleUrls) is used in Angular 17+

Issue: Filter not updating

Solution: Make sure to use signal.set() to update signal values

Time Estimate

Basic implementation: 1-2 hours
With styling: 2-3 hours
With bonus challenges: 4-6 hours

Next Steps

Learn about component composition and reusability

Objective​

Prerequisites​

Setup​

Requirements​

Features to Implement​

Step-by-Step Implementation​

Step 1: Define the Todo Interface​

Step 2: Create the Main Component​

Step 3: Create the Template​

Step 4: Add Styles​

Testing Your Application​

Bonus Challenges​

Challenge 1: Add Edit Functionality​

Challenge 2: Add Priority Levels​

Challenge 3: Persist to LocalStorage​

Challenge 4: Add Due Dates​

Challenge 5: Add Categories/Tags​

Key Concepts Practiced​

Common Issues & Solutions​

Issue: ngModel not working​

Issue: Styles not applying​

Issue: Filter not updating​

Time Estimate​

Next Steps​