Master Scalable, Zoneless, and Signal-Driven Architectures to Build Enterprise-Grade Angular Apps. Learn how to enforce Nx module boundaries, master the signal ecosystem, build bulletproof architectures, and leverage AI to supercharge your workflow.
In this course, you will learn how to design and build highly scalable enterprise applications using the absolute latest Angular features. We strip away legacy concepts like NgModules and Zone.js, replacing them with a 100% standalone, zoneless, and signal-driven paradigm. Finally, you will learn how to modernize your workflow and application capabilities using advanced AI tools, generative UIs, tool calling, and the Model Context Protocol (MCP) to achieve unparalleled development speed.
Our Angular Architecture Masterclass is designed for senior developers and architects who want to establish a bulletproof, modern foundation for their enterprise applications. This intensive workshop is taught by experienced Angular experts who have battle-tested these patterns in large-scale production environments.
We start by shedding legacy Angular. You will build strictly Standalone applications that are Zoneless and use OnPush by default. We will deep-dive into the entire Signals ecosystem (signal, computed, effect, linkedSignal, input, model, output). A major focus of this workshop is Signal Architecture—how to rethink your application state and properly migrate complex RxJS flows into scalable signal structures.
A core pillar of modern Angular is handling user input. Because of this, we dedicate significant time to mastering Signal Forms. You will learn advanced form model design, field state management, and how to utilize schemas for bulletproof validation. We cover everything from async operations and cross-field logic to custom controls and seamless migration strategies from legacy Reactive Forms.
Next, we tackle complex routing and state, implementing robust Router Layouts, lazy loading, and functional interceptors. We handle complex UI states—such as table data, filters, and shareable query params—using rxResource / resource. We also dive into Nx Module Boundaries to enforce clean architecture and explore advanced dynamic UI composition.
Finally, on the fourth day, we completely modernize your workflow and application capabilities with a dedicated module on AI-Driven Development and Generative UI. You will learn how to configure modern AI code editors using agents.md and steering files to guarantee that AI agents generate strict, modern Angular code. We will explore how the Angular MCP, Chrome MCP, and WebMCP bridge the gap between your AI assistant, your workspace, and the browser context. Going beyond workflow tooling, you will learn how to build AI-native Angular applications by implementing LLM tool calling and dynamic UI generation using cutting-edge libraries like ag-ui, a2ui, and hashbrown.
Architect Modern Foundations: Build strictly standalone, zoneless applications using OnPush and the new control flow.
Master Signal Architecture: Rethink state management with Signals, utilizing derivations, inputs, and seamless migration strategies.
Deep-Dive into Signal Forms: Design robust form models, handle complex cross-field validation, leverage schemas, and confidently migrate from Reactive Forms.
Establish Component Standards: Enforce a strict, scalable pattern for component anatomy (Injectables -> Inputs/Outputs -> State -> Derivations -> Lifecycle -> Methods).
Advanced Routing & Data: Utilize functional interceptors, resolvers, robust guards, rxResource, and smart data caching strategies.
Scale with Nx: Define strict module boundaries, libraries, and clean architectural layers within an Nx workspace.
AI-Supercharged Workflow & Generative UI: Master AI code editors, configure steering files, leverage advanced MCPs (Angular, Chrome, WebMCP), and build dynamic AI-generated interfaces using ag-ui, a2ui, hashbrown, and tool calling.
Going 100% Standalone (Saying goodbye to NgModules)
Embracing Zoneless and `OnPush` by default
Mastering the New Control Flow (@if, @for, @switch)
The complete signal primitive API (signal, computed, effect, linkedSignal, input, model, output)
Designing signal-first state architectures for enterprise applications
Best practices for migrating existing data flows and architectures to Signals
Handling legacy template bindings (migrating away from AsyncPipe using toSignal)
Using the inject() function effectively
Component Anatomy Pattern: injectables, input/output/model, signal state, derivations (rxResource/computed), lifecycle hooks, and template methods
Form Models & Design: Structuring robust, scalable form models for complex UIs
Field State & Metadata: Advanced field state management and tracking field metadata reactively
Schemas & Validation: Implementing declarative schemas for bulletproof data integrity
Form Logic & Cross-Field: Handling complex cross-field logic and dependencies effortlessly
Async Operations: Managing asynchronous validation and data fetching within form logic
Form Submission: Clean, reactive patterns for handling form submission
Custom Controls: Architecting highly reusable custom form controls using signals
Ecosystem Comparison: How Signal Forms compare with other form systems and legacy Reactive Forms
Migration Strategies: Step-by-step guide to migrating from Reactive Forms to Signal Forms
Fetching data via rxResource / resource and router resolvers
Implementing smart caching strategies for external data
Managing complex Page State: Filters, Resources, and Table Data
Synchronizing shareable page state with query params using a Store Layer
Architecting Router Layouts & lazy loading (loadComponent, loadChildren)
Route Guards: Protecting routes & preventing exit on unsaved changes
Functional Interceptors: Seamlessly adding headers, auth, and tracking
Destroyable injectors on routes and strategic preloading
Nx Workspaces: Libraries and structured architectural layers
Enforcing strict Module Boundaries and access rules
@defer: Using it strategically (only where it's truly needed)
Dynamic components done right using ngComponentOutlet
Supercharging Directives: inlineConfirm, Structural Directives, Portals, and HostDirectives
Injection Tokens for shareable state and application configurations
Using Angular Aria for robust accessibility where standard UI libraries fall short
Modern Code Editors: Setting up AI-native IDEs (Cursor, Kiro, Claude Code) for Angular development.
Guiding AI with agents.md & Steering Files:
Defining architectural boundaries and rules so the AI knows your tech stack.
Directory-scoped instructions to prevent AI from generating legacy code (e.g., forcing signal forms, enforcing zoneless rules).
AI Prompting best practices for large Angular monorepos.
Angular MCP: Exposing your workspace, CLI commands, and Angular best practices directly to your AI agent.
Chrome MCP: Giving your AI assistant "eyes" into the browser—allowing it to read console errors, inspect the DOM, and run performance profiles to generate precise UI and bug fixes.
WebMCP: Extending agentic capabilities to interact seamlessly with broader web APIs and environments.
Generative & Dynamic UI: Moving beyond static templates by using AI to generate interfaces on the fly.
Cutting-Edge Libraries: Implementing dynamic UI generation in Angular using specialized tools like ag-ui, a2ui, and hashbrown.
LLM Tool Calling: Integrating function calling so AI agents can safely trigger Angular application logic, fetch data, and mutate state directly from the client side.
Google Developer Expert
Performance Expert
Architecture Expert
Trainer
Performance ExpertTrainer
Nx Champion
Google Developer Expert
Microsoft MVP
Auth0TrainerNx Champion