Free course · 10 lessons · Beginner
Modern Angular: Signals, Standalone Components and SSR
Learn modern Angular (v22) the way new apps are built: standalone components with signal inputs, outputs and model, template control flow, signals with computed, effect and linkedSignal, services and dependency injection, HTTP with httpResource and interceptors, Signal Forms, routing with lazy loading, guards and resolvers, signal-based state, rendering performance with track, @defer and zoneless change detection, and server-side rendering with hydration. Every example is compiled ahead of time with the Angular compiler and run.
1. Components, Signals and Data
Standalone components and template control flow, signals with computed, effects and linkedSignal, services and dependency injection, HTTP with httpResource and interceptors, and Signal Forms.
- Standalone Components, Templates and Control Flow — Build standalone components with signal inputs, outputs and model, render with @if, @for and @switch, and bind properties and events.
- Signals: computed, effect, linkedSignal and untracked — Model state with signals, derive values with computed, run side effects with effect, reset dependent state with linkedSignal, and read without tracking.
- Services and Dependency Injection — Share state and logic through injectable services, configure them with injection tokens, scope instances with component providers, and replace them in tests.
- HTTP with httpResource, HttpClient and Interceptors — Load data reactively with httpResource, call APIs with HttpClient, add cross-cutting behaviour with functional interceptors, and test with HttpTestingController.
- Signal Forms: Models, Validation and Submission — Build forms with Angular Signal Forms: a signal model, schema validation rules, field state in templates, cross-field validation and submission with server errors.
2. Routing, State, Performance and SSR
Routing with guards, resolvers and lazy loading; signal-based state services; rendering performance with track, @defer and zoneless change detection; and server-side rendering with hydration.
- Routing: Lazy Loading, Guards, Resolvers and Input Binding — Configure routes with lazy-loaded components, protect them with functional guards, load data with resolvers, and bind route parameters to component inputs.
- State Management with Signal Services — Manage feature state with a signal-based store service: private writable state, computed selectors, immutable updates, async actions with status, and persistence with effects.
- Rendering Performance: track, @defer and Zoneless Change Detection — Keep rendering fast and correct with proper @for tracking, lazy @defer blocks, and signal-driven zoneless change detection.
- Server-Side Rendering, Hydration and Transfer Cache — Render Angular on the server, hydrate it in the browser without re-rendering, reuse server HTTP responses with the transfer cache, and hydrate @defer blocks incrementally.
3. Capstone
Design a production Angular application.
- Capstone: A Customer Portal in Angular — Design an Angular application for a bank's customer portal: architecture, state, forms, routing and security, performance and testing.