Practice

Put your Angular skills to the test with hands-on exercises, coding challenges, and full project ideas. Build real applications and solidify your understanding of Angular concepts.

Exercises

Exercise 1: Todo App

Build a complete todo application with the following features:

• Add, edit, and delete tasks
• Mark tasks as complete/incomplete
• Filter tasks (all, active, completed)
• Persist tasks in local storage
• Use reactive forms for task creation

// Todo model
export interface Todo {
  id: number;
  title: string;
  completed: boolean;
  createdAt: Date;
}

// Core requirements
@Component({ ... })
export class TodoComponent {
  // Use signal for state
  todos = signal<Todo[]>([]);
  filter = signal<'all' | 'active' | 'completed'>('all');

  // Computed derived state
  filteredTodos = computed(() => {
    const currentFilter = this.filter();
    return this.todos().filter(todo => {
      if (currentFilter === 'active') return !todo.completed;
      if (currentFilter === 'completed') return todo.completed;
      return true;
    });
  });
}

Exercise 2: Dashboard

Create a data dashboard that displays statistics and charts:

• Fetch data from a mock API using HttpClient
• Display data in tables with sorting and filtering
• Add a chart (use Chart.js or ngx-charts)
• Implement a date range filter
• Use Angular Material for the UI

Exercise 3: Authentication System

Implement a full authentication flow:

• Login and registration forms with validation
• JWT token management (store, refresh, intercept)
• Route guards to protect private pages
• User profile page (view and edit)
• Logout with token cleanup

Coding Challenges

• Debounced Search: Build a search input that uses debounceTime and switchMap to query an API
• Infinite Scroll: Implement lazy loading of items when the user scrolls to the bottom
• Drag & Drop: Use Angular CDK to create a draggable list with reorder support
• Multi-Step Form: Create a wizard with reactive form validation across steps
• Real-Time Clock: Use RxJS interval and map to display a live clock

Full Bootcamp-Style Curriculum

This curriculum mirrors what you would find in a professional Angular bootcamp. Each module builds on the previous one.

1. TypeScript fundamentals, Angular CLI, components, templates
2. Directives, pipes, data binding, event handling
3. Services, dependency injection, HTTP client
4. Routing, lazy loading, route guards
5. Reactive forms, template-driven forms, validation
6. RxJS deep dive, state management with Signals
7. Angular Material, responsive design, accessibility
8. Testing, CI/CD, production deployment

Mini Project Ideas

Weather App

Build a weather application that fetches data from the OpenWeatherMap API. Show current conditions, forecasts, and allow users to search by city. Use signals for state management and Angular Material for the UI.

@Injectable({ providedIn: 'root' })
export class WeatherService {
  private apiKey = environment.weatherApiKey;
  private baseUrl = 'https://api.openweathermap.org/data/2.5';

  getCurrentWeather(city: string): Observable<WeatherData> {
    return this.http.get<WeatherData>(`${this.baseUrl}/weather`, {
      params: { q: city, appid: this.apiKey, units: 'metric' }
    });
  }
}

Contact Manager

Create a contact management app with CRUD operations, search, filtering, and grouping. Store data using a service with BehaviorSubject. Implement a master-detail layout.

Blog Platform

Build a simple blog with post creation, editing, categories, and comments. Use Angular Universal for SSR to improve SEO. Implement a rich text editor (Quill or TinyMCE) for writing posts.