About the course
This course provides a rigorous exploration of the "Modern Angular" ecosystem, focusing on the radical shifts in the framework's reactivity and rendering engines. You will master the implementation of Signals to manage state with granular precision, replacing legacy zone-based change detection with a more performant, "Zoneless" approach. The curriculum emphasizes the use of Standalone Components to reduce boilerplate and streamline dependency injection, ensuring your applications are modular, scalable, and easy to maintain.
Beyond core syntax, we delve into advanced routing strategies, functional guards, and efficient data fetching using the latest Resource API. You will gain hands-on experience integrating modern testing tools like Vitest and Playwright to ensure high-quality-of-service in production environments. By the end of the workshop, you will be equipped to architect sophisticated frontend systems that leverage the full power of Angular's latest stable release.
Instructor-led online and in-house face-to-face options are available - as part of a wider customised training programme, or as a standalone workshop, on-site at your offices or at one of many flexible meeting spaces in the UK and around the World.
-
By the end of this course, attendees will be able to:
- Build Standalone Apps: Structure applications without legacy NgModules for better performance.
- Master Signals: Implement reactive data flows using signal, computed, and effect.
- Design Reusable Components: Communication via modern input() and output() functions.
- Navigate Complex Routing: Implement lazy-loading and protected routes with modern functional guards.
- Handle Data Efficiently: Use HttpClient and the new Resource API for clean asynchronous data fetching.
- Test with Confidence: Write unit tests with Vitest and end-to-end tests with Playwright.
-
Our Angular training course is aimed at:
Web Developers: Transitioning from other frameworks (React, Vue) or vanilla JavaScript.
Backend Developers: Needing to build robust, type-safe enterprise frontends.
UI/UX Engineers: Wanting to understand how to implement accessible, component-based designs in Angular.
-
To fully benefit from this course you should have good working knowledge of:
Modern JavaScript / ES6 proficiency: Comfort with ES6+ features (arrow functions, destructuring, modules).
HTML & CSS basics: Understanding of semantic markup and styling.
Basic TypeScript: Knowledge of types and interfaces is helpful, though core concepts will be covered.
We can build a custom syllabus for you that prepares your team for modern Angular development with primers / refreshers of the pre-requisite skills, or stretch goals with topics from our Advanced Angular workshop.
-
This Modern Angular course is available for private / custom delivery for your team - as an in-house face-to-face workshop at your location of choice, or as online instructor-led training via MS Teams (or your own preferred platform).
Get in touch to find out how we can deliver tailored training which focuses on your project requirements and learning goals.
-
Modern Angular Architecture & Environment
The "Signals-era" architecture: Signals, Components, and Services
Transitioning from NgModules to Standalone Component architecture
Leveraging the Angular CLI for workspace management and migrations
TypeScript for Angular: Advanced types, Decorators, and Injection contexts
Accessibility (A11y) fundamentals in component design
Component Patterns & Modern Templates
Declarative UI with the new @if, @for, and @switch control flow
Component communication: Signals-based Inputs and Outputs
View Encapsulation and CSS variable integration
Content projection and modular UI composition
Lifecycle management in a Signal-centric environment
Signals-Based Reactivity & State
Core Signal primitives: signal, computed, and effect
Managing shared state with the NgRX Signal Store
Transitioning from RxJS-heavy patterns to Signal-first logic
Optimizing change detection and exploring "Zoneless" Angular
Data synchronization with linkedSignal
Dependency Injection & Service Layer
Modern Dependency Injection (DI) using the inject() function
Global vs. Local providers and Injection tokens
Abstracting business logic into singleton and transient services
Interfacing with RESTful APIs via HttpClient
Asynchronous data fetching with the new Resource and HttpResource APIs
Navigation, Routing & Forms
Configuring functional routes and nested layouts
Implementing functional Guards for authentication and authorization
Dynamic routing and resolving data with Signal-based inputs
Template-driven vs. Reactive Forms: Choosing the right tool
Advanced validation patterns and immediate user feedback
Testing & Performance Optimization
Unit testing components and services with Vitest
End-to-end (E2E) testing and visual regression with Playwright
Debugging and profiling with Angular Developer Tools
Performance best practices: @defer for lazy loading UI blocks
Optimizing image assets with NgOptimizedImage
-
Official Angular Documentation: https://angular.dev
Angular CLI Reference: https://angular.dev/tools/cli
TypeScript Documentation: https://www.typescriptlang.org
NgRX Signal Store: https://ngrx.io/guide/signals
Trusted by
