Professional Training

Prerequisites

Participants should be comfortable with core Angular concepts: the Angular CLI, components, signals, services and dependency injection, the built-in control flow, directives, pipes, forms and basic routing including a single path parameter. The Angular Developer Training — Introduction course covers these.

Delegates arriving from an older Angular background (NgModules, *ngIf, decorator inputs, Karma) will be able to follow, but should review the modern equivalents beforehand — or consider the Angular Modernisation course.

Versions

Taught against Angular 21 (LTS, supported to June 2027), with Angular 22 features clearly flagged. Where a modern API replaces an older one, both are covered — advanced developers need to maintain existing code as well as write new code.

Advanced Component Topics

Content projection — ng-content, multi-slot projection and select
ng-template, ng-container and TemplateRef
ViewContainerRef and creating views imperatively
Signal-based queries: viewChild(), viewChildren(), contentChild(), contentChildren()
Query options and required queries
The component lifecycle in a signals world — what is still needed and what is not
afterRenderEffect() and afterNextRender() for DOM measurement
Styling from inside: the :host and :host-context pseudo-selectors
Modifying host DOM properties with host bindings
Dynamic components and NgComponentOutlet
The directive composition API — hostDirectives
Selectorless components — importing components directly in templates (v22)
Legacy note: @ViewChild / @ContentChild decorators, static vs dynamic queries, ngAfterViewInit, ngOnChanges

Advanced Directives

When a directive is the right tool instead of a component
Writing a custom attribute directive
Writing a custom structural directive
Template context and type-safe structural directives (ngTemplateContextGuard)
Generic directives and improving template type checking
Composing behaviour across components with directives

Deep Reactivity

The signal graph: push/pull, lazy evaluation and glitch-free propagation
Equality functions and controlling when a signal notifies
untracked() — reading without subscribing
effect() vs computed() — choosing correctly, and the classic pitfalls
Effect cleanup and injection contexts
Asynchronous reactivity in depth (stable v22)
resource() — request, loader, abort signals and cancellation
httpResource() — status, value, error, headers and reloading
rxResource() — bridging to observable sources
Streaming resources
Interoperating with RxJS: toSignal() and toObservable()
Zoneless in depth — what changes, what breaks, and how to migrate
PendingTasks and coordinating asynchronous work
Debugging signals in Angular DevTools

Asynchronous Programming and RxJS

Asynchronous JavaScript: callbacks → promises → observables → signals
Observables vs signals — a clear decision framework for when to use each
Creating and subscribing to observables; the subscription lifecycle
Core operators: map, filter, tap, switchMap, mergeMap, concatMap, exhaustMap
Combination: combineLatest, forkJoin, merge, withLatestFrom
Time-based: debounceTime, throttleTime, distinctUntilChanged, interval
Subjects, BehaviorSubject and ReplaySubject
Error handling, retry and catchError
Marble diagrams and reading operator documentation
The async pipe and takeUntilDestroyed()
Case study: a debounced typeahead search, built with RxJS and with signals
Testing observables with marble tests

Advanced Forms

Signal Forms in depth — @angular/forms/signals (requires v21+; stable from v22)
Form model design for complex, nested and dynamic forms
Validation schemas and reusable validation rules
Cross-field logic and conditional validation
Asynchronous validation and async operations
Field state management, field metadata and submission handling
Server-side error mapping
Building custom controls
Dynamic forms driven by JSON
Testing Signal Forms
Reactive Forms at depth — strongly typed forms, FormBuilder, custom validators, custom ControlValueAccessor
Interoperability: migrating a large Reactive Forms codebase to Signal Forms incrementally
When Reactive Forms remain the right call
Accessible form construction — labelling, error announcement, focus management

Accessible Components and the CDK

The introductory course uses a component library. This module is about building your own.

Why accessibility is a functional requirement, not a finishing touch
WCAG and EN 301 549 in practical terms — what actually gets audited
Angular Aria — headless accessibility patterns you style yourself (developer preview v21, stable v22)
Keyboard interaction patterns, roving tabindex and focus management
Screen reader behaviour and announcing dynamic changes
Angular CDK: overlay, portal, a11y, live announcer and focus trap
CDK drag and drop, including mixed-orientation lists
CDK virtual scrolling for large data sets
Understanding the Shadow DOM and encapsulation strategies
Angular Material — where it fits alongside Aria and the CDK
Deciding between Angular Aria, the CDK, Angular Material and a third-party library

State Management

What "state" actually means — local, shared, server, router and form state
Why most applications need less state management than they think
Signal-based service stores — the default modern pattern
NgRx SignalStore — stores, computed state, methods, rxMethod and custom features
NgRx Store / Effects — actions, reducers, selectors and when this is still the right choice
Server state vs client state, and using resource() as a cache
Entity collections, normalisation and optimistic updates
Choosing an approach: a decision framework, not a default

Advanced Routing, Authentication and Security

Delegates arrive able to define routes, link to them and read a single path parameter. Everything below builds on that.

provideRouter() and the router configuration options
Routes with multiple parameters
Query parameters, and when to use them instead of path parameters
Optional and matrix parameters
Component input binding from route data — withComponentInputBinding()
Navigating from code with Router.navigate() and relative navigation
Nested routes, child routes and named outlets
Reacting to route changes within the same component
Functional guards: canActivate, canMatch, canDeactivate
Functional resolvers and route-level data loading
Lazy loading with loadComponent and loadChildren, and preloading strategies
Dynamically generated navigation from route configuration
Authentication and authorisation patterns
External identity providers — OAuth 2.0 and OpenID Connect
JWTs: validation, storage trade-offs, refresh tokens and silent renewal
Role-based routing and conditional UI
Auth interceptors and handling 401/403 centrally
Angular's security model: sanitisation, XSS, CSRF, Content Security Policy and Trusted Types

Automated Testing

Half a day. Delegates arrive with no Angular testing experience, so this starts from the beginning and goes as far as usefully possible in the time.

Test strategy: what is worth testing in an Angular application, and what is not
Vitest as the default runner (v21) — configuration, watch mode, coverage
Running tests with ng test, and the spec files the CLI generates
Unit testing services
Testing signals, computed values and effects
Component testing with TestBed
Testing zoneless components — TestBed.tick() and controlling change detection
HttpTestingController and mocking HTTP
Testing a component that uses a service
Keeping a test suite fast and maintainable
Migrating an existing Karma/Jasmine suite with the karma-to-vitest schematic

Structuring a Large Application

Standalone-first architecture — organising an application without NgModules
Feature-based structure, boundaries and dependency direction
What belongs in shared code, and what does not
Barrel files, circular dependencies and how to avoid them
Enforcing architectural boundaries with lint rules
Configuration, environments and feature flags
Where a monorepo starts to earn its keep
Legacy note: NgModules — importing, exporting and grouping — for maintaining existing codebases

Building and Deployment

Development and production environments and configuration
The esbuild and Vite build pipeline
Build configurations, budgets and source maps
Containerising an Angular application
CI/CD pipelines for build, test and deploy
Hosting with SSL/TLS, HTTP/2 and security headers
Cache-busting, deployment strategies and rollback

Working Effectively with AI

The Angular CLI MCP server — giving your LLM current Angular knowledge
Why models default to outdated Angular, and how llms.txt addresses it
Angular Agent Skills and AI IDE setup
Reviewing AI-generated Angular: the patterns that signal stale output
Practical guardrails for teams