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 20. The course centers on Signals — Angular's signal-based reactivity primitive that, paired with zoneless change detection (stable in Angular 20), changes how components are written, tested, and reasoned about. Participants build standalone-component applications using the new 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 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 Jest 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 20 idiom.

Learning Objectives

Build Angular 20 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 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 Jest 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 Extensions. If students are unable to configure a local environment, a cloud-based environment can be provided.

Training Topics

Introduction to Angular 20

Why Angular in 2026?
Angular 20 highlights: stable Signals, zoneless change detection, control-flow blocks
Development setup: Node 22+, Angular CLI, VS Code, Angular Language Service
Testing tools overview (Jest, 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.)
provideZonelessChangeDetection() (stable in v20)
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

Reactive vs. template-driven forms
Typed reactive forms (FormGroup<T>, FormControl<T>)
Built-in and custom synchronous/asynchronous validators
Signals + forms patterns

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 Jest and the new provideZonelessChangeDetection() 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