Learn Angular by doing. Every topic is a piece of code you can read, copy, and run in an Angular CLI app — work through the lessons in order, from components and signals to services, routing, forms, and the patterns that make production UIs robust.
Angular is TypeScript through and through — be comfortable with JavaScript and TypeScript first.
Before you start
If you want to practice the exercises in this course on your computer:
Ctrl+`), and install the Angular CLI once with npm install -g @angular/cli.ng new my-app and accept the defaults. This creates a my-app folder containing an Angular project — the setup every example in this course is written for.my-app folder (File → Open Folder) and run ng serve in the terminal.src/app/, add it to the imports array in src/app/app.ts, and render its tag (for example <app-counter />) in the template — with the dev server running, http://localhost:4200 updates every time you save.Components & Templates
Write your first components — the @Component decorator, template bindings, signal inputs and outputs, @if and @for control flow, and composition with ng-content.
Signals & State
Master Angular signals — signal for state, immutable updates, computed values, effects, two-way binding with model, element access with viewChild, and lifecycle hooks.
Services & Shared State
Share logic and state across components — injectable services, the inject function, and signal-based services that work like a built-in store.
Routing
Turn components into pages — the route table, router-outlet and routerLink, route parameters delivered as inputs, and lazy loading with loadComponent.
Fetching Data
Load and mutate data in Angular — provideHttpClient setup, GET requests with signals, the httpResource API for reactive reads, and POST mutations with pending state.
Forms & Validation
Build forms that validate themselves — template-driven forms with ngModel, typed reactive forms with built-in validators, and custom validators of your own.
Styling & UI
Style Angular components — scoped component styles, Tailwind utility classes with class bindings, and Angular Material for ready-made accessible components.
Robust UIs
Make your app resilient and responsive — @defer for lazy template sections with placeholders and loading states, and a global ErrorHandler that catches every crash.
Testing
Test components the way users use them with TestBed, then cover critical flows end-to-end in a real browser with Playwright.
Animation
Animate entrances and exits with animate.enter and animate.leave — plain CSS keyframes driven by Angular, no animation library needed.