NgRx Signal store for Angular - The missing guide

Explore functional programming foundations essential for signal store concepts, including higher order functions, closures, lambda expressions, lambda types, immutability, and pure functions to read functional code confidently.

The Angular renaissance brings a shift to functional programming, replacing classes, decorators, and modules with inject function, provide functions, and signal-based APIs for a more reactive, intuitive framework.

Compare functional programming with object-oriented approaches in Angular, using higher-order functions, polymorphic discount policies, and immutability to simplify event-driven, asynchronous data transformations.

Explore object oriented and functional paradigms through classes, encapsulation, and function pointers, then examine how Java and C# implement delegates that remember both the instance and the method.

JavaScript blends object-oriented and functional paradigms but isn’t truly object oriented; classes are functions, and the language relies on prototype-based objects. Arrays gain methods from their prototypes.

Explore how JavaScript treats functions as values, enabling higher-order functions, function composition, and TypeScript-described signatures for building reusable, expressive code.

Explore how to convert functions to anonymous and lambda expressions in TypeScript, simplify inline functions, and reduce boilerplate for smoother functional programming.

Define precise function signatures with lambda expressions to enforce type safety, replacing the any-like type; use type aliases like number operator for cleaner code and clear type inference.

Explore anonymous functions and lambda expressions, higher-order functions and function factories like multiplier, and learn how closures capture outer variables to create private, stateful memory.

Explore two ways to add state to a function: closure-based private state and the function-as-container approach. See how Angular signals implement this pattern by exposing state and update methods.

Explore pure functions with no side effects that always produce the same output, and contrast them with non-pure functions. See how immutability supports functional programming.

Explore immutability in JavaScript: avoid mutating objects and arrays, replace state with new objects using the spread operator, and rely on pure functions for safer reactive code and angular onpush.

Explore dynamic classes in JavaScript via a function returning a new class, used by signal store, configured with an action, and retrieved through Angular dependency injection.

Explore core functional programming ideas in JavaScript and apply them to the signal store for Angular, including closures, pure functions, immutability, lambda expressions, and dynamic classes.

Explore the signal store, a lightweight Redux-based library that diverges in key ways; install, create stores, and compose features while building a quiz app with scoring.

Install the ng signals package with the Angular CLI using ng add ng signals, and let the schematics choose the best compatible version and update package.json.

Identify compatibility issues when installing the NgRx signal store with Angular 19. Use legacy peer deps or add overrides in package.json to force Angular core 19 and stabilize npm installs.

Learn how signal state utility from the signals package creates nested signals for each property, enables lazy construction and partial updates with patch state, and contrasts it with signal store.

Explore the redux-lite signal store pattern for Angular, with a single source of truth, immutable state, pure functions, and a state-machine with actions as methods, derived state via computed signals.

Introduce the signal store and signal based state management with a full color mixing quiz app, highlighting angular 19, signal store 18, and an observable random quiz service.

Define the quiz store state by creating a quiz slice with read-only questions and an answers array, and set an initial state using a derived current question index.

Create a signal store with the signal store function, define the state with with state, wrap questions and answers as signals; the store is a type you instantiate later.

Consume signal stores in Angular components through dependency injection, providing at root or component level, using the provided in route pattern, and view store.questions with the JSON pipe.

Learn to create a signal store by following a GitHub or Stackblitz project, define a quiz slice with initial state, inject the store into the app, and display questions.

Add computed signals to the signal store using withComputed, deriving current question index from the length of answers array and exposing current question as a computed signal in smart component.

learn to compose computed signals in an NgRx signal store by progressively building signals from a single feature, using with computed and current question index.

Practice adding computed signals to the NgRx signal store in Angular, building current question index and questions count, and wiring the progress component to receive value and max.

Learn to use patchState to update the signal store when a user selects an answer, while understanding the protected state default that blocks external writes.

Learn to enrich a quiz store by adding methods with the with methods feature, update state via patch state, and maintain immutability to extend the NgRx signal store in Angular.

Learn to implement updaters in the NgRx signal store by writing pure updater functions like add answer and reset quiz, using a partial state updater and patch state for updates.

Add methods to the NgRx signal store, connect reset logic and quiz progress to the UI, and implement a done state with computed correct count via a helper function getCorrectCount.

Learn to persist signal store state with with hooks: save core state to local storage on changes and load it on init for seamless resume.

Add the with hooks feature, implement the on init hook, and use get state effect and patch state to persist and load state from local storage.

Master the ngRx signal store by defining initial state with state, adding computed signals with computed, updating via with method and patch state, using updaters and on init lifecycle hook.

Apply the same NgRx signal store concepts to a more realistic online shopping app. Download the prepared code and tie the components to the store.

Familiarize yourself with the signal shop project and learn state management via the signal store by implementing search, add to cart, adjust quantities, and checkout.

Define core state and derived state in a single NgRx signal store, showing how search word, cart quantities, and inventory shape derived UI like subtotal and cart visibility.

Define derived view models from the core state that are recalculated for each view, powering item list and cart views with subtotal, tax, total, and is active and visible properties.

Build the product list view model by mapping core state to product items using a shop VM builder, incorporating quantities, case-insensitive search, and zero defaults.

Build the cart view model by mapping products with quantities into cart item VMs and compute subtotal, tax, grand total, while deriving is active and is visible via pure functions.

Connect the views to computed view models by wiring the store to product list VM and cart VM, enabling one-way data binding and derived state.

Define store updaters for the shop slice actions, including set search word, add to cart, view and hide cart, increment and decrement quantities, and checkout, via partial state updaters.

Bind the UI to the NgRx signal store by wiring actions such as set search word and add to cart through the toolbar and item cards, enabling view cart.

Persist the cart across page refreshes by saving only the cart quantities to local storage, using a typed persisted shop slice and on-init loading with a signal and patching state.

Adopt a state machine approach to NgRx signal store for Angular; split into parts like cart and search list and make updaters and view model builders testable as pure functions.

Explore how the NgRx signal store works beyond magic and learn when and where its functions run. Divide stores, enable communication via dependency injection, and maintain private non signal state.

Explore store features and feature creators in the NgRx signal store, showing how a signal store function returns a constructor and a chain of features enhances an empty store.

Identify how feature creators, which start with the word with, supply feature parameters to the signal store, guiding type creation and instance construction through higher-order functions and injection context.

Learn how computed signals are lazily evaluated when needed, driven by store signals, and how feature methods, updaters, and hooks shape the signal store lifecycle.

Learn to provide stores either at the component level or via router providers to create private, lazily-loaded stores that persist across navigations within a feature-based Angular app.

Build a global app store for language toggling in NgRx signal store for Angular, using an injection token for dictionaries and closures to keep private non-signal data.

Practice exercise guides you to move the quiz store provider to the router, implement the app store slice with oninit and dictionaries, and enable language change via the store.

Implement multilingual support by translating the caption and answers, applying translations to texts while preserving color names for css, and derive the current language via the app and quiz stores.

Derive computed signals from another store to translate quiz captions and colors using a global dictionary and translation helpers.

Practice injecting into computed signals by adding a computed signal for the selected dictionary to app store, injecting into quiz store, and deriving translated texts signals for the question presenter.

Inject values and services into feature parameter functions in NgRx signal store 19 for Angular, using inject function and dictionaries token, with optional parameters and default values in injection context.

Explore how NgRx 18 introduces private store members, including private methods, private computed signals, and private core signals via underscore prefixes, to reduce duplication and hide internal logic.

Upgrade to NgRx signal store 19 and explore withProps, a feature for adding private store-level properties like dictionaries and languages. Learn when to use closures versus withProps.

Learn to manage private and non-signal data in NgRx signal store 19 for Angular by adding a reset languages updater and using with props with underscore private props.

Refactor the online shop project by distributing state across three stores—the shop store for app wide data and feature stores—product list and card—using the single point of truth in redux.

Divide the app into a smaller global shop store and two feature stores for product list and cart, with each feature containing its own main component, view model, and store.

Define a single point of truth for each data piece, placing global data in the shop slice and view-specific data in localized stores.

Refactor the view models by moving product list and cart view models to their stores, and create a shop view model for the user interface, preparing to relocate build logic.

Refactor the view model builders by moving logic into feature-specific builders and introducing a card quantities type to support the shop view model.

Refactor stores to compute their own view models by injecting data from a higher store using with props and building product list and card view models.

Bind each component to its own local store, replacing the global shop store, and align cart and product list view models for unified binding.

Refactor the product and cart methods by delegating to their respective stores, preserving core state in the shop store while exposing localized methods and supporting distributed local stores.

Explore asynchronous programming with the NgRx signal store, linking synchronous state management to signals and connecting with promises, RxJS, race condition handling, error recovery, and the signal method in R 19.

Set up the NgRx signal store for asynchronous APIs by simulating delayed dictionary loading with a dictionary service and observable patterns, including begin and end taps.

Learn to integrate an asynchronous API in a signal store by lazily loading dictionaries from a service, converting observables to promises with firstValueFrom, and managing core state with async methods.

Repeat steps from the previous lecture to add dictionary service to signal store, then use the async invalidate dictionary method to fetch and store the latest dictionary in proper property.

Explore the pros and cons of async methods and promises. Learn why race conditions arise with parallel requests and how RxJS observables provide cancellation and safer async handling.

Explore the rx method, a higher-order function from the signals package that takes a function and returns an input-to-output observable transformer, enabling RxJS interoperability in Angular signal stores.

Apply the tap operator in an rxMethod to trigger side effects without changing the stream. Use the delay operator and invalidate dictionary for the current language.

Practice the same steps from the last lecture using rxMethods, download the code from GitHub, or run it on stackblitz, then learn to pile up operators to invoke asynchronous APIs.

call the real API from an rx method by mapping languages to dictionaries and flattening a higher-order observable with mergeAll, updating the store and busy state to address race conditions.

Explore RxJS flattening operators, including merge all, switch all, exhaust all, and concat all, showing how switching to the latest inner observable fixes race conditions and cancels prior requests.

Wire the Colour Quiz Generator Service into the quiz store, manage the is busy flag, and reset questions and answers while triggering on generate button clicks with exhaust all.

Handle errors in NgRx signal store workflows by using switch map patterns, tap response, and a notification service to display errors, while finalizing busy state and enabling recovery.

Repeat steps from previous lecture to handle errors in rxMethods and reflect them in the UI, fixing the busy indicator with the indirect operators package and signal store best practice.

Automate the rxMethod invocation by subscribing to the selected language signal, so dictionary invalidation runs whenever language changes, with construction-time setup making the method private and streamlined.

Discover NgRx 19's signal method, a factory that creates a function with two modes you can call with a static value or a signal, enabling synchronous state patches without RxJS.

Practice the signal method in NgRx signal store for Angular by repeating the demonstrated exercise and using the lecture resources to access the project link.

Use promises in signal store methods and compare them with rxjs alternatives. Implement side effects with rxjs operators and flattening to avoid race conditions.

Explore creating custom features with the signal store by composing existing features across many stores, enabling scalable enterprise state management and reusable functionality.

Explore how custom features extend signal store by chaining feature builders to compose a store with state, props, and methods, and add state, services, and computed signals.

Open source features extend Angular stores with Redux dev tools. Install the toolkit, apply overrides for compatibility, and view state changes in the book presenter store.

Learn how the with entities custom feature in NgRx signal store manages a book collection with an entity map and IDs, using updaters like set all entities to patch state.

Explore configuring the with entities feature for ngRx signal store, defining a book config, custom collection names, and id selectors to manage private, multi-collection stores.

Implement a rename current book feature using the update entity updater with the book config and changes that set the id and new title.

Learn to use with entities features in NgRx signal store, practice custom features, and inspect state with Redux dev tools via Stackblitz or a cloneable project.

Create a simple custom feature for NgRx signal stores using on init and local storage, applied to the App Store and Quiz Store to persist state and enable dev tools.

Create a reusable with busy feature for NgRx signal store that adds a busy state slice, updaters, and a computed is idle signal, with TypeScript signatures to improve intellisense.

Practice building the busy feature using your own implementation, inspect store changes with the Redux extension in Stackblitz, and prepare for a more sophisticated custom feature.

Create a with service custom feature that loads data from an API using an observable loader, sets the busy flag, and updates the store via an updater and patch state.

Declares the features input requirements to ensure the signal store compiles correctly, using a test store to validate initial state, busy flags, and updater interactions with patch state.

Use the with service feature in the quiz store to inject the color quiz generator service, fetch a random quiz, and update questions with the reset questions updater.

practice along with step-by-step instructions to declare input content using advanced TypeScript techniques, including mapped types and type operators, to create custom features in NgRx signal store 19 for Angular.

Explore how functional programming underpins the signal store and the Redux pattern, including closures, immutability, and pure functions, and learn to build and reuse custom features.

Celebrate completing the NgRx signal store 19 for Angular course and reflect on your growth as an Angular developer. Provide constructive feedback to help improve future courses.