Angular Exercises

Introduction

Practice is the only way to make Angular stick. Tackle these from easy to hard, building each one before moving on. Don't peek at solutions until you've struggled for at least 15 minutes.

Understanding the topic

How to use this list:

• Create a fresh ng new playground project.
• Each exercise becomes a feature folder inside src/app.
• Wire them all to a sidebar in your AppComponent so you can revisit any one.

Informative example

Beginner

• Build a counter component with +, − and reset buttons.
• Make a todo list using @for with track by id.
• Create a profile card that takes name, role and avatar URL as inputs.
• Add a search box that filters a hard-coded list of cities live.
• Show/hide a panel with a toggle button using @if.

Real-world use

Intermediate

• Add a router with /home, /products, /products/:id routes — lazy load each.
• Wire a real API call with HttpClient and the async pipe (use https://jsonplaceholder.typicode.com).
• Build a reactive login form with email + password validation messages.
• Build a shopping cart service with signals; show cart count in the header.
• Add a dark/light theme toggle that persists in localStorage via an effect().

Best practices

• Commit after each exercise — easy to roll back when you experiment.
• Read the Angular DevTools panel after each one — see CD cycles, signal graph, profiler.

Hands-on exercise

Advanced

• Refactor the cart to use signals + computed totals + an effect for persistence.
• Add an HTTP interceptor that attaches a JWT and retries 401s once after refresh.
• Build a wizard form with FormArray and step-by-step validation.
• Migrate the app to SSR with ng add @angular/ssr and verify hydration.
• Write component tests for the login form: required, invalid email, submit calls API.
• Lazy-load a heavy chart component with @defer (on viewport).