NgRx, Angular GDE
Advanced Angular: Performance & Enterprise State
5 hours, 26 minutes
CC
Course Description
Build high-performance Angular apps with cutting-edge optimization techniques, including zoneless change detection, server-side rendering, and lazy loading. Manage state at scale with SignalStore and NgRx. Learn comprehensive testing strategies using Vitest for stores, signals, and component harnesses.
This course and others like it are available as part of our Frontend Masters video subscription.
Preview
Course Details
Published: February 13, 2026
Learning Paths
Learn Straight from the Experts Who Shape the Modern Web
Your Path to Senior Developer and Beyond
- 250+ In-depth courses
- 24 Learning Paths
- Industry Leading Experts
- Live Interactive Workshops
Table of Contents
Introduction
Section Duration: 19 minutes
Alex Okrushko introduces the course by covering advanced Angular topics like server-side rendering, performance improvements, advanced components, state management with SignalStore, and testing with Vitest. This course focuses on Angular 21 and encourages coding along with provided project code and slides.
Alex explains the project setup, covering key scripts, dependencies, and the JSON server used for backend requests. He also demonstrates the app’s core features, including event loading, event details, and the protected admin route.
Rendering & Performance
Section Duration: 1 hour, 38 minutes
Alex explains the onPush change detection strategy and how it limits checks to specific triggers like input changes and events. He shows how this approach improves performance by reducing unnecessary change detection runs and encouraging immutable state patterns.
Alex explains how going zoneless in Angular removes zone.js to improve performance. He demonstrates zoneless change detection, removing the polyfill, and using signals to trigger updates for faster page loads and runtime efficiency.
Alex shows how to optimize image loading in Angular using the ng-optimized-image directive. He demonstrates setting priorities, dimensions, and using source sets to improve performance and LCP.
Alex explains how to use a custom image loader to serve properly sized images, leveraging CDNs like Firebase and Cloudflare for optimization. He demonstrates configuring the loader, updating image URLs, and shows the performance impact through network and Lighthouse comparisons.
Alex shows how to build a production bundle and implement lazy-loaded components, splitting code into chunks that load only when needed, and demonstrates the resulting performance improvements.
Alex explains server-side rendering in Angular, demonstrates setting it up with the necessary packages, and shows how client hydration enhances performance by keeping the DOM intact.
Alex explains client-side, pre-render, and server-side render modes, their trade-offs, and demonstrates pre-rendering pages to improve performance and user experience in Angular SSR.
Alex discusses deferring non-critical content to optimize page load, demonstrating lazy-loading a venue map and using viewport triggers for incremental hydration and performance improvements.
Advanced UI Patterns & DI
Section Duration: 1 hour, 9 minutes
Alex demonstrates advanced content projection by creating a shared UI card with header, main, and footer slots, showing how to compose and project content in Angular templates.
Alex builds a reusable Tab component backed by a locally provided state service that tracks which tab is active. He demonstrates how to use signals and computed state to determine whether a tab should render its content, without relying on global or root-level state.
Alex creates a tab group and provides a locally scoped tab state using Angular’s DI hierarchy. He shows how to read projected tabs with contentChildren, activate them via shared state, and initialize a default active tab using signals or lifecycle hooks.
Alex shows how to use a tab group on an event details page, organizing content into overview, venue, and speaker tabs while managing tab state and reusability.
Alex demonstrates creating a click-logger directive to add behavior to components, including inputs, event tracking, self-attaching behavior, and testing its functionality within buttons.
RxJS Concurrency & Error Patterns
Section Duration: 26 minutes
Alex demonstrates how rapid, optimistic updates on a Buy button can cause race conditions and leave application state inconsistent when API requests fail. He then introduces RxJS subjects and operators to control those concurrent events and properly handle race conditions.
Alex walks through RxJS mapping operators like mergeMap, concatMap, exhaustMap, and switchMap to show how each one handles concurrent events differently. He demonstrates how these operators control parallel execution, queuing, blocking, or canceling requests, forming the backbone of race condition management in reactive apps.
Alex shows how to handle RxJS errors using throwError and catchError, explaining how to keep observables running and where to place error handling in the pipeline.
Enterprise State
Section Duration: 1 hour, 28 minutes
Alex demonstrates refactoring the cart service into a Signal Store, using state, computed, and methods to manage and update application state immutably.
Alex explains how SignalStore encapsulates state, derived values, and methods, allows grouping state logic, and ties state management to component lifecycles for complex apps.
Alex shows how to extend SignalStore with custom features, demonstrating how to enrich state, computed, and methods while keeping the store simple and flexible.
Alex explains SignalStore’s command-based approach, compares it to the global store, highlights extended APIs, and shows how stores can interact for scalable state management.
Alex demonstrates creating a request status feature in SignalStore to track network request states, with computed properties like isPending, isFulfilled, and error for added functionality.
Alex demonstrates creating a card store alongside the existing card service, setting up initial state and root-level providers, and adding a request status feature to manage API calls using rxMethod.
Alex demonstrates using exhaustMap to control cart updates, compares it with concatMap and mergeMap, and shows how to optimistically update state while handling API responses and errors.
Alex walks through refactoring from a cart service to a cart store, showing how to replace it across components and highlighting the benefits of encapsulated, flexible state management with SignalStore.
Advanced Testing
Section Duration: 20 minutes
Alex explains the importance of testing in real-world apps and walks through setting up a testing environment with guided examples and hands-on practice.
Alex demonstrates how to test a cart store by setting up a store spec, configuring the testing module, providing dependencies, and using HTTP client testing for end-to-end scenarios.
Alex shows how to test computed signals by manually setting component inputs, triggering interactions, handling change detection, and validating component behavior.
Alex introduces Angular testing harnesses, demonstrating how to interact with components, test deferred content, and work with Angular’s utilities for managing @defer blocks.
Wrapping Up
Section Duration: 2 minutes
Alex wraps up the course by reviewing key optimization techniques like zoneless Angular, image optimization, SSR hydration, and incremental loading, then recapping advanced UI patterns, state management, RxJS error handling, and testing fundamentals.
Learn Straight from the Experts Who Shape the Modern Web
- 250+In-depth Courses
- Industry Leading Experts
- 24Learning Paths
- Live Interactive Workshops