Modern Angular — signal-first, zoneless, production-grade.
Signal-first, zoneless, production-grade — 13 modules across 3 skill tiers. 89 lessons across 13 modules, written for readers who want mechanics, not magic. Free. No signup.
Pick your starting tier
Same 89 lessons, three entry points — by where you are today.
JS + TS basics, never opened Angular. End-state: build a 5-page app with components, pipes, directives, forms, routing, HTTP.
Comfortable shipping features. End-state: signal-first state, validated forms, interceptors, lazy routes, security-aware HTML, signal/effect tests.
Production-grade performance, SSR/hydration, animations, AI tooling. End-state: optimized for Core Web Vitals, debug zoneless edge cases.
The full curriculum
Angular Foundations
What Angular is, the CLI, project structure, dependency injection, TypeScript essentials, the build pipeline, and application bootstrap.
Components & Templates
Anatomy, template syntax, lifecycle, pipes, directives, content projection, host elements, signal queries, dynamic components.
Signals & Reactivity
The reactive graph, effect vs computed, model(), debounced signals, zoneless change detection, signal-vs-observable decisions, linkedSignal.
Forms & User Input
Signal forms, reactive forms, template-driven forms, validation, file uploads, typed reactive forms.
Routing
Router essentials, complete route configuration, functional guards, router events, data resolvers, lazy loading with @defer.
HTTP & Data
HttpClient fundamentals, functional interceptors, httpResource, error handling, caching with resource, server-sent events.
RxJS in Modern Angular
When RxJS is still the right tool in the signal era. Debouncing, interop, modern cleanup patterns.
CSR Performance
OnPush, @for track, NgOptimizedImage, bundle analysis, Web Vitals, memory leaks, avoiding rerenders, security.
SSR Performance
SSR vs SSG, hydration pitfalls, event replay, incremental hydration, TransferState, edge deployment.
Debugging & Real-World Problem Solving
The troubleshooting cookbook: NG0xxx errors, change detection mysteries, subscription leaks, race conditions, hydration mismatches.
Testing
Vitest as default, testing signals & effects, TestBed in standalone era, testing pipes/directives/services, E2E options.
AI × Angular
Angular's official MCP server, AI-augmented Angular development workflow.
Animations
Setup, transitions & triggers, route animations, reusable and accessibility-aware animations.
Why this tutorial
- Angular 21/22 first. Signal-first, zoneless-default, Vitest, signal forms, selectorless components — no v15-era noise.
- Mechanics, not magic. Lifecycle order, change-detection internals, hydration mechanics — what’s actually happening under the hood.
- No NgModule chapter. Standalone is default; we teach how Angular works today.
- RxJS is opt-in. Module 7 covers when streams still beat signals — not the default for everything.
- Three skill tiers. Beginner → Intermediate → Advanced, so each reader skips what they already know.