Angular Developer Training - Advanced

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