Ngrx Signal Store 19 For Angular - The Missing Guide

Master NgRx Signal Store 19 for state management in Angular, from core concepts to advanced custom features.

What you'll learn

Learn how to simplify your code using the intuitive NgRx signals library

See why NgRx Signals are the missing piece in Angular's reactive system, bridging signals and state management.

Learn how to manage your application state using signals in the signal store

Learn how to master ngrx/signals custom feature to create reusable building blocks

Learn how to work with rxMethod to simplify reactive programming when its needed

Learn common patterns that will simplify your application structure

Learn the newest features of ngrx/signals v18, v19

Requirements

Prior basic experience with angular

Some typescript, HTML and CSS - advantage

Some experience in modern angular with signals

Description

NgRx Signal Store - The Missing GuideUncover why NgRx Signal Store is seen as the essential missing piece for fully harnessing Angular signals, offering a lightweight yet powerful state management solution.This course provides a comprehensive dive into NgRx Signal Store, a more streamlined and straightforward alternative to other NgRx stores. It's designed to be both easy to use and highly flexible, making it an excellent choice for state management in Angular applications. With support for custom features, it's not only simple but also scalable and extendable.What you'll learn:Why NgRx Signal Store stands out: Learn why signals, combined with the redux pattern, provide a lighter and better state management solution compared to traditional stores in NgRx. Discover how it simplifies development while remaining powerful and scalable.Core features: Master the core functionality, including withState, withComputed, withMethods, and withHooks, and the new withProps, while learning the best practices for dependency injection and state updates.Advanced topics: In version 18, NgRx Signals introduces significant improvements like state encapsulation, private store members, which allows you to better control and isolate the state within your stores.New features: In version 19, withProps and signalMethod were introduced, learn how to use them and when.Custom features: Missing the redux devtools extension? NgRx signal store allows the development of reusable custom features, such as an adapter for the devtools. Learn how to use libraries of custom features as well as writing your own.Why this course?Build a real-life application as part of your learning journey… in fact, build two. One simple, one more challanging.Strengthen your skills with small, focused exercises.Gain insights into the best practices for working with signals, avoiding common mistakes, and maximizing the store’s potential.By the end, you’ll be ready to use NgRx Signal Store to manage state efficiently and confidently in your Angular apps.

Overview

Section 1: Introduction

Lecture 1 Introduction

Lecture 2 What you need to know

Lecture 3 Practicing what you learn

Section 2: Recap - Functional programming in Typescript

Lecture 4 Section introduction - Functional Programming

Lecture 5 The Angular "Renaissance"

Lecture 6 Functional Programming, why?

Lecture 7 What are Functions, Method, Delegates

Lecture 8 Javascript is not REALLY Object Oriented

Lecture 9 Functional Programming in Typescript

Lecture 10 Lambda Expressions in Typescript

Lecture 11 Function Types in Typescript

Lecture 12 Closures in Javascript

Lecture 13 Functions as Containers

Lecture 14 What are Pure Functions?

Lecture 15 Immutable Objects and Operators

Lecture 16 Dynamic Class Creation

Lecture 17 Summary

Section 3: Intrduction to ngrx/signals

Lecture 18 Intruduction to ngrx and the store

Lecture 19 Installing the ngrx/signals package

Lecture 20 Resolving version conflicts

Lecture 21 The signalState utility

Lecture 22 Ngrx Signals - Redux lite

Lecture 23 Introducing our example project

Lecture 24 Defining the store state and initial value

Lecture 25 Creating Signals Store type

Lecture 26 Consuming signal stores in components

Lecture 27 Try it yourself: Create a signal store

Lecture 28 Adding Computed signals

Lecture 29 Composing Computed Signals

Lecture 30 Try it yourself: Add computed signals to the signal store

Lecture 31 The patchState function

Lecture 32 Adding Methods to signal store

Lecture 33 Using State Updaters

Lecture 34 Try it yourself: Add methods to signal store

Lecture 35 Adding hooks to the signal store

Lecture 36 Try it yourself: Add hooks to the signal store

Lecture 37 Summary

Section 4: Project - Creating an online shopping application using signals store

Lecture 38 Section introduction

Lecture 39 Introduction to our project

Lecture 40 Defining The core state and the store

Lecture 41 Defining the derived view models

Lecture 42 Builder for the product list view model

Lecture 43 Builder for the cart view model

Lecture 44 Binding the views to the view models

Lecture 45 Defining the store updaters and methods

Lecture 46 Binding the UI to the methods

Lecture 47 Persisting the cart using hooks

Lecture 48 Summary

Section 5: Advanced Topics in ngrx/signals

Lecture 49 Section Introduction

Lecture 50 What are store features and feature creators?

Lecture 51 What are feature creator parameters?

Lecture 52 More signal store functions

Lecture 53 Providing the stores in components and routes

Lecture 54 Using Closures to keep private non-signal data

Lecture 55 Try it yourself: Using closures in feature parameters

Lecture 56 Injecting into withComputed

Lecture 57 Deriving computed signals from another store

Lecture 58 Try it yourself: Injecting into computed signals

Lecture 59 Injecting into function parameters

Lecture 60 New in NgRx 18 - Private signal store members

Lecture 61 New in NgRx 19 - withProps

Lecture 62 Try it yourself: Private and non-signal data

Section 6: Shop project - Distributed Stores

Lecture 63 Section Intro

Lecture 64 Exercise goal and starting project

Lecture 65 "Point of truth" for each data

Lecture 66 Refactoring the view models

Lecture 67 Refactoring the View model builders

Lecture 68 Refactoring the stores computed view models

Lecture 69 Conecting the components to the local stores

Lecture 70 Refactoring the missing methods

Section 7: Asyncronous Programming in Signal Store

Lecture 71 Section Intro

Lecture 72 Setting the store to work with asynchronous APIs

Lecture 73 Using async Methods

Lecture 74 Try it yourself: async methods

Lecture 75 The Pros and Cons of async methods

Lecture 76 Interoperability with rxjs using rxMethod

Lecture 77 Side effects in rxMethod using the "tap" operator

Lecture 78 Try it yourself: side effects using rxMethods

Lecture 79 Calling asnyc API from rxMethod

Lecture 80 Overview of flattening operators

Lecture 81 Code Along with me: invoking async APIs in rxMethods

Lecture 82 Recovering from errors

Lecture 83 Try it yourself: Error handling in rxMethods

Lecture 84 Automating the rxMethod invocation

Lecture 85 New in NgRx19 - Signal Method

Lecture 86 Try it yourself: Signal Methods

Lecture 87 Section Summary

Section 8: Custom features in NgRx signals

Lecture 88 Section Intro

Lecture 89 Overview - What are custom features

Lecture 90 Open source fatures - withDevtools

Lecture 91 The withEntities custom feature

Lecture 92 Setting entities configuration

Lecture 93 Modifying entities using the updaters

Lecture 94 Try it yourself: using withEntities

Lecture 95 Creating a simple custom feature

Lecture 96 Try it yourself: your first custom feature

Lecture 97 Creating custom feature with content

Lecture 98 Try it yourself: Custom Feature with Content

Lecture 99 A more advanced example: withService feature

Lecture 100 Declaring the features input requirements

Lecture 101 Using the withService feature in the Quiz store

Lecture 102 Try it yourself: Declaring input content

Section 9: Summary

Lecture 103 What we have covered

Lecture 104 Conclusion

Beginner Angular developers who would like to advance to the next level,Software architechts looking for a simple consitant pattern for a complex application