Master Angular in real depth — from fundamentals to production
A genuinely detailed, project-driven curriculum — 33 weeks across 8 phases, each week with its own learning objectives, topic breakdown and hands-on exercise. Signals, standalone components, routing, forms, RxJS, testing, performance, security and SSR, plus a specialized enterprise stack (Angular Material, GraphQL/Apollo, D3.js, Leaflet, Keycloak, Webpack & Module Federation) — ending with a capstone app you ship yourself.
Prerequisites & tooling
What you should already know
- Comfortable writing HTML, CSS and everyday JavaScript
- Basic TypeScript is helpful, but we cover it in Week 1
- Familiarity with the command line and Git
- Node.js (LTS) installed on your machine
Stack you'll work with
Everything is taught on the current Angular toolchain — no legacy NgModules required.
Your 33-week curriculum
Thirty-two modules, from your first TypeScript refresher through a specialized enterprise stack, to a capstone Angular application you design, build and deploy yourself.
Modern JavaScript & TypeScript for Angular
Build the language foundation every Angular concept sits on top of.
- Types, interfaces & generics
- Classes & decorators — the mechanism Angular is built on
tsconfig.jsondeep dive & strict mode
Angular CLI, Tooling & Project Anatomy
Get comfortable with the tools you'll use every day for the rest of the course.
- The Vite/esbuild-based application builder
- Project structure:
angular.json,main.ts, app config - Editor setup, Angular Language Service & DevTools
Standalone Components & the Angular Mental Model
Learn how Angular assembles an application without NgModules.
- Bootstrapping with
bootstrapApplication - Standalone components, directives & pipes
- Providers &
ApplicationConfig
Component Fundamentals & Templates
Build your first real components and internalize Angular's template syntax.
- Interpolation, property & event binding
input(),output()&model()signal-based APIs- Lifecycle hooks & signal-based alternatives
Signals Deep Dive
Master Angular's fine-grained reactivity primitive.
signal(),computed()&effect()in depthlinkedSignal()for dependent, resettable state- Signals vs. RxJS — when to reach for each
New Control Flow & Template Syntax
Replace structural directives with Angular's built-in control flow.
@if/@else if/@else@for, track expressions & performance implications- Migrating
*ngIf/*ngFortemplates to the new syntax
Styling, View Encapsulation & Content Projection
Compose flexible, reusable UI components.
- View encapsulation modes (Emulated, ShadowDom, None)
ng-content, multi-slot projection & fallback content- Responsive layout with the Angular CDK Layout module
Directives, Pipes & the Angular CDK
Extend Angular's template language with your own reusable behavior.
- Custom structural directives — how
*ngIf-style directives work - Pure vs. impure pipes, and building your own
- CDK Overlay, Portal & DragDrop basics
Dependency Injection & Services Deep Dive
Structure application logic so it's testable and swappable.
- Providers,
providedInstrategies & tree-shakable services - The
inject()function vs. constructor injection - Injection tokens & multi-providers
Routing Fundamentals
Turn a single component tree into a real multi-view application.
- Route configuration & the Router service
- Router outlets & nested/child routes
- Programmatic navigation &
routerLink
Advanced Routing
Control access, loading and performance at the routing layer.
- Functional guards (
CanActivate,CanDeactivate,CanMatch) - Lazy loading with
loadComponent&loadChildren - Deferrable views with
@defer(triggers, placeholders, errors)
Reactive Forms
Handle complex, validated user input the Angular way.
FormControl,FormGroup&FormArray(typed forms)- Async validators & debounced validation
- Cross-field validation patterns
Template-Driven & Dynamic Forms
Know when template-driven forms fit better, and how to generate forms from data.
- Template-driven forms &
ngModel - Building a schema-driven dynamic form renderer
- Custom form control components (
ControlValueAccessor)
HttpClient, Interceptors & API Integration
Talk to real backends reliably.
HttpClientbasics: GET/POST/PUT/DELETE, typed responses- Functional interceptors (auth headers, error handling, logging)
- Retry, timeout & error-recovery strategies
RxJS Deep Dive
Get fluent in the reactive-stream operators Angular is built on.
- Subjects,
BehaviorSubject&ReplaySubject - Core operators:
map,switchMap,mergeMap,concatMap,exhaustMap - Subscription management & memory leaks
Bridging Signals & Observables
Use both reactivity models together without fighting them.
toSignal()&toObservable()resource()andrxResource()for async data loading- Avoiding common interop bugs (stale closures, double-subscribing)
State Management at Scale
Choose and implement a state strategy that scales past a single component.
- Signal-based state services (the "poor man's store")
- NgRx Signal Store fundamentals
- Entity state patterns
Unit Testing
Build confidence in your components and services with fast, isolated tests.
- Vitest/Jasmine fundamentals &
TestBed - Testing components with signal inputs/outputs
- Mocking services & HTTP
Component, Integration & E2E Testing
Test the seams — how components and pages actually behave together.
- Component harnesses & the CDK Testing Harness API
- End-to-end testing with Playwright
- CI test strategy & flaky-test triage
Performance Optimization & Zoneless Change Detection
Make an app that stays fast as it grows.
- Zoneless change detection & OnPush strategy
- Bundle analysis & lazy-loading strategy review
- Virtual scrolling with the CDK
SSR, Hydration & Deployment
Ship an app that starts fast for real users.
- Server-side rendering with Angular
- Hydration & avoiding hydration mismatches
- Deploying to a hosting provider (static + SSR)
Animations, Accessibility & Internationalization
Polish the app for real, diverse users.
- WCAG basics & accessible component patterns
- Keyboard navigation & focus management
- Angular i18n & runtime translation strategies
Security, Authentication & Authorization
Protect an application and its users.
- XSS, CSRF & Angular's built-in sanitization
- Token-based auth (JWT) & refresh-token flows
- OAuth2/OIDC login flows in an SPA
Micro-Frontends & Advanced Architecture
See how large orgs split Angular apps apart.
- Monorepo strategies (Nx) for multi-app Angular workspaces
- Module federation & micro-frontend patterns
- Shared design-system libraries across apps
Angular Material & Enterprise Component Libraries
Install, theme and use Material's component set the way real enterprise teams do.
- M3 theming API & custom brand palettes
- Material + typed Reactive Forms
- Signal-driven
MatTablewith sort & pagination
GraphQL & Apollo Angular
A second data layer alongside REST — queries, mutations and a typed cache.
- Apollo Angular setup & queries as signals
- Optimistic mutations & cache updates
- Subscriptions & typed codegen
Real-Time Streams with Server-Sent Events
Live server push over plain HTTP, with built-in reconnection.
- SSE vs. WebSockets vs. polling
- A zone-safe
EventSourcewrapper feeding signals - Reconnection,
Last-Event-ID& the auth-header limitation
Data Visualization with D3.js
Reconcile D3's DOM ownership with Angular's and build a responsive chart.
- Two integration patterns: D3-for-math vs. D3-owns-the-subtree
- Signal-driven,
ResizeObserver-responsive charts - Keeping D3 out of Angular's change-detection path
Geospatial Interfaces with Leaflet
SSR-safe maps, signal-driven markers, and two-way viewport sync.
- SSR-safe map initialization
- Diffing markers against a signal of locations
- GeoJSON layers & two-way map/list sync
Identity & Access Management with Keycloak
A real identity provider — bootstrapping, role-based guards and token refresh.
- Bootstrapping Keycloak before the app renders
- Role-based route guards & a bearer-token interceptor
- Silent refresh & session expiry
Webpack, Custom Builders & Module Federation
Extend the build without ejecting, and compose micro-frontends at runtime.
@angular-builders/custom-webpack, no ejecting- Module Federation: expose, remote & shared singletons
- Module Federation vs. Nx's build-time composition
Capstone: Ship a Full Application
Plan, build, test and ship a complete Angular application solo.
- Full implementation using signals, routing, forms & state
- Performance pass & accessibility pass
- SSR + deployment