Updated June 2026

Mastering Angular

Class Duration

5 days of comprehensive training
Focus on dynamic single-page applications

Target Audience

Experience with modern JavaScript or TypeScript required
Familiarity with classes, modules, arrow functions, and destructuring
Web development background recommended

Description

Mastering Angular is a comprehensive course on modern Angular 22 and the signal-first era it completes. The course centers on Signals — Angular's signal-based reactivity primitive that, paired with zoneless change detection (the default for new projects since Angular 21, now in LTS), changes how components are written, tested, and reasoned about. Participants build standalone-component applications using the built-in control-flow blocks (@if, @for, @switch, @defer), the function-based inject() pattern, signal inputs (input()), signal queries (viewChild(), viewChildren()), and the modern output() API. Coverage includes the stable Signal Forms API alongside typed reactive forms, the modern provideHttpClient API with signal-friendly patterns, the standalone Router with functional guards, signal-based state management, deferrable views, and unit testing with Vitest (the Angular 22 default test runner) plus end-to-end testing with Playwright. Legacy NgModule, *ngIf/*ngFor, and zone.js patterns are covered briefly so participants can read older code, but every new pattern taught is the current Angular 22 idiom.

Learning Objectives

Build Angular 22 single-page applications with standalone components and zoneless change detection.
Use the Angular CLI to scaffold, run, test, and deploy applications with modern conventions.
Master the new control-flow blocks (@if, @for, @switch, @defer) and understand why they replace the structural directives.
Manage application state with Signals — signal(), computed(), effect() — plus signal inputs, queries, and outputs.
Build forms with the stable Signal Forms API and with typed reactive forms, with strict TypeScript typing throughout.
Configure routing with the standalone Router, functional guards, and lazy-loaded routes.
Consume REST APIs with provideHttpClient, signals + toSignal, and modern HttpInterceptor functions.
Use deferrable views (@defer) for code-splitting and progressive loading.
Read legacy NgModule-based codebases and migrate selectively to standalone components and signals.
Unit-test components with Vitest (the Angular 22 default) and write end-to-end tests with Playwright.

Training Materials

All students receive comprehensive courseware covering all topics in the course. Courseware is distributed via GitHub in the form of documentation and extensive code samples. Students practice the topics covered through challenging hands-on lab exercises.

Software Requirements

Students will need a free, personal GitHub account to access the courseware. Students will need permission to install Node.js and Visual Studio Code on their computers. Also, students will need permission to install NPM Packages and Visual Studio Code extensions. If students are unable to configure a local environment, a cloud-based environment can be provided.

Training Topics

Introduction to Angular 22

Why Angular in 2026?
Angular 22 highlights: stable Signal Forms, Vitest as the default test runner, selectorless components, OnPush by default for new components
The release line: Angular 21 (LTS, zoneless by default) to Angular 22
Development setup: Node 22+, Angular CLI, VS Code, Angular Language Service
Testing tools overview (Vitest, Playwright)

Angular CLI

Installation and ng new with modern defaults
Generating standalone components, services, directives, pipes
Standalone API as the default (NgModule-free)
Running unit tests and e2e tests

Bootstrapping

bootstrapApplication() and the standalone bootstrap path
Application config and providers (provideRouter, provideHttpClient, etc.)
Zoneless change detection — the default for new projects since v21 — and provideZonelessChangeDetection() for migrating older apps
The root component and index.html

Component Templates and Control Flow

Property and event bindings
New control-flow blocks: @if / @else if / @else, @for with track, @switch
@defer blocks: triggers, placeholders, and prefetching
@let template variables
class.x and style.x bindings, ngClass / ngStyle
Reading legacy *ngIf / *ngFor / *ngSwitch codebases

Components

Standalone components by default
Function-based inject()
Signal inputs (input(), input.required())
Signal outputs (output())
Signal queries (viewChild(), viewChildren(), contentChild())
Component lifecycle and effect()
Composing components and consuming custom elements / Web Components

Forms

Signal Forms (stable in v22): signal-backed form state and validation
Reactive vs. template-driven forms
Typed reactive forms (FormGroup<T>, FormControl<T>)
Built-in and custom synchronous/asynchronous validators
Choosing between Signal Forms and reactive forms in existing codebases

Signals

What signals are and how they differ from RxJS
signal(), computed(), effect() — when to use which
Signal inputs, outputs, and queries on components
toSignal and toObservable for RxJS interop
Zoneless change detection: implications and migration tips
Signal-based state management patterns

HTTP Data

provideHttpClient() with withFetch() and withInterceptors()
Functional HttpInterceptor (replacing class-based interceptors)
Async REST requests
RxJS operators (map, filter, etc.) and where they still earn their keep in a signals world
toSignal(observable$) for binding HTTP data to signal-based templates
Mocking a REST API with JSON Server

Pipes

Built-in pipes (date, currency, json, etc.)
Standalone pipes
Custom pipes
Pure vs. impure pipes

Routing

The standalone Router (provideRouter)
URL structure, path and query parameters
Path matching and wildcard routes
Child routes and lazy-loaded routes
Functional route guards (CanMatchFn, CanActivateFn) — the modern replacement for class-based guards
Resolvers as functions
withComponentInputBinding() and route-data → signal-input binding

Testing and Deploying to Production

Unit testing with Vitest (the Angular 22 default test runner) and the zoneless test setup
Testing components, templates, and routed scenarios
Testing signals and effects
HttpTestingController and HTTP mocking
End-to-end testing with Playwright
Deployment via the Angular CLI: SSR / hydration, esbuild builder, bundle budgets