Angular architectures with NGRX

NGRX Mini Video course

Italian Version

English Version (audio by AI)

NGRX Fundamentals

1. Redux & NGRX

State management in SPA

NGRX introduction

State Managers comparison

NGRX: how it works

Redux Dev Tools

Why should my team use NGRX?

Create the Project

Installation, store & reducers

TIP 💡: Redux Dev Tools and StackBlitz

Store selectors

TIP 💡: Immutability, Pure Functions & Reducers

Create Feature and Selectors

TIP 💡: Linter & Runtime Checks

NGRX and Signals

createSelector & extraSelectors

Build a Shopping Cart

4. The Shop Page

Create a REST API server

Product Actions

RxJS & Flattening operators

Handle errors in NGRX Effects

Products Reducer

UI the shop page

Demo & Source Code

5. Build a Shopping Cart

Build the Cart Page

Handle quantity

Sync store with Local Storage

Demo & Source Code

6. Shop Filters

Filter Component

Introduction to Reactive Forms

Container vs Presentational components

Reactive Forms and NGRX

Save Filters in Store

Filters Selectors

Side Panel UI State

Insight 💡: How to fix linter errors

Demo & Source Code

Create the "Shop Order" route

Create the Layout

Order Reactive form

Demo & Source Code

Reserved Area

8. CRUD: Simple CMS

Route and Layout

Product Actions

DELETE: delete products

POST: add new product

PATCH: edit existing products

Improvements, Linter & Fixes

Refactoring: Move logic in Effects

Refactoring: Move to Components

Demo & Source Code

9. Authentication

Auth Effects: create sequences of effects

Auth: extraSelectors

Sync store with Local Storage

Auth Interceptor

Dom Protection with custom directives

Demo & Source Code

10. Router & NGRX

BONUS: NGRX Signals

SignalStore: create the store

Work with Collections

Debug with Angular Extension

Computed signals

Store Methods: add & delete

Layout Improvements

Store Composition: add filters

async operations and rxMethod

6. Shop Filters

6. Shop Filters

Complex and custom selectors, Reactive forms, Pattern and Best practices

1 min

v.18

v.18

Fabio Biondi

Google Developer Expert
Microsoft MVP

# Introduction

In this chapter we'll create a side panel to filter the product list of the Shop page.

Side Panel

It will be useful to conduct a thorough analysis and delve deeply into how to:

1

sync UI with NGRX store

2

use Angular Reactive Forms with NGRX

3

work with complex custom selectors

4

work with multiple actions, state and effects with several use cases

5

set Parent -> Child Component communication, and vice versa using Signal Inputs and Output

6

use NGRX patterns and best practices

Send your feedback