4-Day Angular Architecture Masterclass
Workshop

Angular Architecture Masterclass

About the event

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.

Takeaways

  1. Architect Modern Foundations

    Build strictly standalone, zoneless applications using OnPush and the new control flow.

  2. Master Signal Architecture

    Rethink state management with Signals, utilizing derivations, inputs, and seamless migration strategies.

  3. Deep-Dive into Signal Forms

    Design robust form models, handle complex cross-field validation, leverage schemas, and confidently migrate from Reactive Forms.

  4. Establish Component Standards

    Enforce a strict, scalable pattern for component anatomy (Injectables -> Inputs/Outputs -> State -> Derivations -> Lifecycle -> Methods).

  5. Advanced Routing & Data

    Utilize functional interceptors, resolvers, robust guards, rxResource, and smart data caching strategies.

  6. Scale with Nx

    Define strict module boundaries, libraries, and clean architectural layers within an Nx workspace.

  7. 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.

Agenda

Modern Angular Foundations

The Modern Baseline

  • Going 100% Standalone (Saying goodbye to NgModules)

  • Embracing Zoneless and OnPush by default

  • Mastering the New Control Flow (@if, @for, @switch)

Signals & Architectural Migration

  • 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)

Dependency Injection & Component Structure

  • Using the inject() function effectively

  • Component Anatomy Pattern: injectables, input/output/model, signal state, derivations (rxResource/computed), lifecycle hooks, and template methods

Signal Forms & Data

Mastering Signal Forms

  • 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

Modern Data Fetching & Page State

  • 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

Architecture & Composition

Advanced Router Capabilities

  • 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

Architecting for Scale with Nx

  • Nx Workspaces: Libraries and structured architectural layers

  • Enforcing strict Module Boundaries and access rules

Dynamic UIs, Directives & Composition

  • @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

AI & Modern Tooling

AI Tooling & Agent-Driven Development

  • 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

The Model Context Protocol (MCP) Ecosystem

  • 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

Building AI-Native Angular Applications

  • 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

Your trainers for this workshop