🚦 Angular NgRx Signal Store Crash Course (For NgRx Beginners)

No previous NgRx knowledge needed, no RxJs needed. Learn NgRx Signal Store from scratch by building a TODO app. Step-by-step tutorial, coded from a completely blank folder.

#angular

Timestamps:

0:00 Intro
09:42 Setting up our Store
15:13 Loading Data From a Backend
18:44 First Store Method - Load Data
25:13 Building the TodosList Component
35:16 Displaying the Loading Indicator
36:41 Add Todo Implementation
44:41 Delete Todo Implementation
49:14 Update Todo Implementation
56:28 Derived Signals - Filter Todos

Related articles on the Angular University blog:

Free content at the Angular University:

Follow me:

[AngularUniversity]

This is what the future of Angular is starting to look like: Signals, no RxJs, async / await, Promises 😊No music after the intro as requested, enjoy everyone 😉

[iantaite]

Great tutorial. Much clearer than the official documentation.

[lindermannla]

The best content for Angular developers! Thnxz!

[jeffleigh]

Vasco, what would be very helpful is how to use Firestore as a backend with signal-store

[josephsackeykontor]

Thanks a lot for this video. You really nailed the explanation.

[termobin]

Another great job Vasco!! Thank you so much for this tutorial!!!

[Marbulinek]

Great learning video Vasco!! I really enjoy your channel. Everything is fine for me, but I have one question about signal store metods: you are using in demo async/await for asynchronous data retrieving. Maybe idea for next quick video, angular team (in angular.dev) is strongly supporting rxjs for asynchronous data retrieve. Can you do some really really simple example of using this construction instead of simple async/await?
Thanks, Lukas

[YossefMagdy-nz]

Thanks a lot for the great explanation and effort.

[TW-gowz]

Hey Vasco, thanks for this great tutorial. Can you make a video where you explain and use the rxMethod in the signalStore?

[dacstudy]

thanks. simple and clear! This is gold for everyone!|

[zeynalalakus]

Thanks a lot for the great explanation and effort. 🎉

[nidinpereira]

Nice tutorial, but injecting the service in the store and store in the service considered anti pattern. Won't it lead to cyclic dependency errors.

Also although it's perfectly fine to use async await, feels illegal seeing it in angular 😅

[CasualTramp]

Wow thanks a lot ! You won a new follower

[ScottSchafer-qztf]

Hi Vasco,
Will you be offering the source code for this project, it would be great if you did.
Thanks for all you do!👍👍

[ddgutierrez]

tnks for all!

Man i have a question,
we can use the hooks for init the store or is bad practice?

another question!
what is the best way or the best practice for prevent fetch data 2 times i mean, if i know my store is data will never change how i can prevent the fetch if alredy exist data ?

[Official-pc]

I am using rxMethod and now I need to use it in component. and after getting success api response I need to perform some action based on data.. how to do that ? Not able to understand

[jeffnikelson]

How do you access route parameters from such a service ?

[bobyuan]

Thanks for this amazing ngrx signal store tutorial. one question, how do i use store in multiple components? my understanding is the store is injected at root level, that means available to all components, i simply inject the store to multiple components, that works, but the issue the store state update is not reflect in a other components. am I missing something?

[ricardomiguel]

Why do we need the effect type in constructor (filtering part) and what would happen if i didn´t wrap that code into effect function ? Thanks.

[bonnes]

Great video. I think it's better to use real API, so we can see how to deal with Observables in signal store