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 😉
It's not needed for most cases when writing asynchronous code. The Angular team is making RxJs optional, it should become much less used in the Angular world in the future. 👍
RxJs is here to stay. Where are you making your claims from? You're assuming stores are the way of application development it's a thing invented to solve the pain of react apps. NO OTHER FRAMEWORK NEEDS IT.
@@AngularUniversity Do you have a source that Angular team wants to make RxJs optional? At least if you make http requests with the HTTP Client you would need to call lastValueFrom (from rxjs) to make it a Promise.
@@AngularUniversity Do you have a source that the Angular Team wants to make RxJs optional? This would mean that they will change e.g. the HttpClient as well to be Promise based. Would be a huge breaking change.
Thanks for the great tutorial. I didn't got the idea that when we create signalStore here is automatic nested signal implementation. I supposed to use signalState for that. And now I have found this short paragraph in the middle on the official ngrx SignalStore page with an example :) Thanks again.
Excellent explanation and demo for ngrx store. I am using material datatable, but how can I use the data in ngrx signal store to populate the datasource, which is type of MatTableDataSource? need convert this datasource to signals? but how? thanks
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
The Angular team is not strongly supporting the use of RxJs, by the contrary it's saying use it if you really need it, explore other options, don't use RxJs as a default mandated best practices, RxJs is optional that is the message of the Angular Team. You can check out here my latest video on the channel for more details - th-cam.com/video/uOIdILz-Dkw/w-d-xo.html 👍
I recommend you to change your YT logo background from dark to something bright (preferably white), and center the logo please. This way, the graduation hat will be clearly visible. Also, to be honest the current logo looks unauthentic/unoriginal. I almost overlooked your videos 2-3 times. Nonetheless, thanks for creating these awesome videos!
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?
Thank you, I'm glad you enjoyed it 😉 Correct, the store usually is a singleton, in my example I used provided in root. you can inject it anywhere. If you update the store state, it will be reflected in all components that consume store signals 👍
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 ?
How do you work with store on a more complex application, where you would work with more than todos. Like users and auth and such. Do you keep it in the same store, or would you generate a store for each component?
In principle you put everything into one single centralized store. The store can be split up into features ngrx.io/guide/signals/signal-store/custom-store-features
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 😅
Thank you, async/await works perfectly in Angular, it always has, and the framework has great support for Promises. The official docs of NgRx Signal Store use also async/await ngrx.io/guide/signals/signal-store 😉 So it's not that illegal after all 😂
Assume that we have a multiple todo list in same page how can we handle state of the page? assume that you use providedIn: 'root' for your store. or if any better approach please teach us. thanks
Effects can be put in other parts other than the constructor, like on ngOnInit, but you need to pass it an injector explicitly. The recommended pattern is to put it in the constructor, to keep things simple. 👍
Hello Vasco, I noticed that triggering the insertion of a Todo also triggers the update of the Store. This causes the strange behavior that, if there is a completed item in the list, the last inserted todo will also be considered completed. Isn't that strange?
I've been able to track down a few other similar behaviors as well. Switching to completed, toggling a todo, and switching to pending or all will mark them all as completed. If you're quick enough, double clicking a todo will start an infinite loop. It does seem to be coming from the MatSelectList, don't know if this is a broader issue or specific to the signal interaction.
Thank you for reporting everyone. I had a look at it this morning, simply replace the Angular Material selection list with plain HTML and a checkbox and it works. So something to do with the use of that particular material component. So it's not a broader issue.
You're welcome 😊It's based on signals so it need 17, maybe it works with 16. It's not in beta it's in developer preview; It means that's ready but things might still change a bit.
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
A real API can be queries using Promises as well, it works just the same. You can use fetch, the HTTP client and convert the Observables to Promises, or use tRPC or some other more sophisticated HTTP client.👍
@@AngularUniversity why convert to promises though? Can't you just convert from observables to signals? I would prefer to keep my services as observables as that maintains what I have been doing pre-signals. This keeps it flexible IMO
@@tdekoekkoek Personally I think Promises are a better fit for async tasks like HTTP, that's what they were designed to do. For most applications, no event orchestration is needed so RxJs is overkill. Returning signals from the service layer, I'm not sure about that because what about error handling?
@@AngularUniversity thanks for your explanation. No I wasn't suggesting returning signals from the service layer, just observables and that keeps my service layer the same while introducing Ngrx Signals
@@tdekoekkoek The official docs of Ngrx Signals suggest to use async/await, personally I think it's a better approach and i suggest that you give it a shot, but if you want to return Observables that works too, there is a full interoperability. Myself these days i only use RxJs if I really need to, for most typical day to day operations I find it unnecessary and prefer the clarity, simplicity and readability of async/Await.
Ha! ProvidedIn: root proved necessary using the store across different components. Is there a way to make the store perpetuate within providedIn: root?
Hi Johan, provided in root makes the store a global singleton, meaning it can be injected anywhere. I didn't understand the last part though, about the store perpetuating, what did you mean?
@@JohanVrolix Yes, if you put in the providers array of a parent component, that instance will be seen by the parent and the child components. If you put it into the application root component, it's almost the same as putting it in the root of the dependency injection system with providedIn root.
Very good question, by default they won't work on ngOnInit because it's outside an injection context. you can still pass it an injection context if needed. In general with angular signals we are going to be using the constructor a lot more. 😊
That's a great question, and yes sure. Right now there is no plugin for it, bit it's quite easy to do that with an effect to save the state to storage, and load it back at application startup. 👍
@@AngularUniversity can you please provide a example snippet, it will help a lot, current I am working on a login /sigin up page using firebase as backend. But after login, when I refresh it , it automatically log out the user . Plz help me on this
@@g3co875 I don't think there are any in practice, for most applications. Things like cancellation and auto-complete search boxes which are the typical examples can be done via reusable libraries or widgets, some of which could internally even use RxJs if needed, but there is no need to use at the level of the application for doing simple things as HTTP, in my view. 👍
Half way through and I am wondering why the PROMISE and not observable from an HTTP client, maybe there is something I don't see. I will keep watching. I assume you have a more in depth class for this and will watch it, I will never simulate a service like that, but I get you are trying to move fast. I probably will come back and apologize.. LOL, let me watch the whole thing!
terrible this kind of programming I do not like it. I never try to program such a boilerplate stuff. I have seen better stuff from you Vasco in you courses. It's not you, it is the theme.
why don't you work on your accent? you've been recording videos for years now but you're talking with the same accent as 10 ten years ago! how can you not make any progress in that?
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 😉
no RxJS?, why ? Thanks for all the latest videos!, btw
It's not needed for most cases when writing asynchronous code. The Angular team is making RxJs optional, it should become much less used in the Angular world in the future. 👍
RxJs is here to stay. Where are you making your claims from? You're assuming stores are the way of application development it's a thing invented to solve the pain of react apps. NO OTHER FRAMEWORK NEEDS IT.
@@AngularUniversity Do you have a source that Angular team wants to make RxJs optional? At least if you make http requests with the HTTP Client you would need to call lastValueFrom (from rxjs) to make it a Promise.
@@AngularUniversity Do you have a source that the Angular Team wants to make RxJs optional? This would mean that they will change e.g. the HttpClient as well to be Promise based. Would be a huge breaking change.
Thanks for the great tutorial. I didn't got the idea that when we create signalStore here is automatic nested signal implementation. I supposed to use signalState for that. And now I have found this short paragraph in the middle on the official ngrx SignalStore page with an example :) Thanks again.
47:16 interesting part. Thanks
Great tutorial. Much clearer than the official documentation.
Thank you. Stay tuned for more!
The best content for Angular developers! Thnxz!
Thank you, please enjoy. 😊
Another great job Vasco!! Thank you so much for this tutorial!!!
Thank you I'm happy to hear that 👍😊
Watched it the whole way through. Great content , hope you’re a Madrid fan 🎉
Thanks a lot for this video. You really nailed the explanation.
Thank you. Stay tuned for more videos!
Thanks a lot for the great explanation and effort.
Thank you!
thanks. simple and clear! This is gold for everyone!|
You're welcome, I'm glad it helped. 👍
This is once again a great tutorial!
Thank you 😊
Thanks a lot for the great explanation and effort. 🎉
You're welcome, enjoy the videos 😊
Wow thanks a lot ! You won a new follower
Thank you and welcome to the channel 😉
Vasco, what would be very helpful is how to use Firestore as a backend with signal-store
Thank you for the idea. 👍
Great Vasco, Great! Dark theme ❤
Hey Vasco, thanks for this great tutorial. Can you make a video where you explain and use the rxMethod in the signalStore?
You're welcome, I'm glad you enjoyed it! 😊 Yes, I'm thinking about coveting rxMethod sometime soon here on the channel. 👍
Excellent video!!!
Thank you very much! 😊
Excellent explanation and demo for ngrx store. I am using material datatable, but how can I use the data in ngrx signal store to populate the datasource, which is type of MatTableDataSource? need convert this datasource to signals? but how? thanks
Thanks a lot!
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
The Angular team is not strongly supporting the use of RxJs, by the contrary it's saying use it if you really need it, explore other options, don't use RxJs as a default mandated best practices, RxJs is optional that is the message of the Angular Team. You can check out here my latest video on the channel for more details - th-cam.com/video/uOIdILz-Dkw/w-d-xo.html 👍
I recommend you to change your YT logo background from dark to something bright (preferably white), and center the logo please.
This way, the graduation hat will be clearly visible.
Also, to be honest the current logo looks unauthentic/unoriginal. I almost overlooked your videos 2-3 times.
Nonetheless, thanks for creating these awesome videos!
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?
Thank you, I'm glad you enjoyed it 😉 Correct, the store usually is a singleton, in my example I used provided in root. you can inject it anywhere. If you update the store state, it will be reflected in all components that consume store signals 👍
a question I'm following your implementation, when i reload the page my todos are still dispalyed and i see the spinner as well.
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 ?
How do you work with store on a more complex application, where you would work with more than todos. Like users and auth and such. Do you keep it in the same store, or would you generate a store for each component?
In principle you put everything into one single centralized store. The store can be split up into features ngrx.io/guide/signals/signal-store/custom-store-features
Hello, how can I use resource() in signal store?
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 😅
Thank you, async/await works perfectly in Angular, it always has, and the framework has great support for Promises. The official docs of NgRx Signal Store use also async/await ngrx.io/guide/signals/signal-store 😉 So it's not that illegal after all 😂
Assume that we have a multiple todo list in same page how can we handle state of the page? assume that you use providedIn: 'root' for your store. or if any better approach please teach us. thanks
Is there a specific reason you are using types over interfaces for your models?
I just like the keyword "type" better instead of interface, it describes better what I'm trying to define. 👍
You also can't do exclude of an interface, so you need a seperate model for your DTO and presentation model
@@marijnstapert9036depending on the complexity of the domain model, a separate DTO model and the mapping involved is often not necessary.
Is it not possible with plain angular signals?
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.
Effects can be put in other parts other than the constructor, like on ngOnInit, but you need to pass it an injector explicitly. The recommended pattern is to put it in the constructor, to keep things simple. 👍
Hi Vasco,
Will you be offering the source code for this project, it would be great if you did.
Thanks for all you do!👍👍
Hello Vasco, I noticed that triggering the insertion of a Todo also triggers the update of the Store. This causes the strange behavior that, if there is a completed item in the list, the last inserted todo will also be considered completed. Isn't that strange?
I've been able to track down a few other similar behaviors as well. Switching to completed, toggling a todo, and switching to pending or all will mark them all as completed. If you're quick enough, double clicking a todo will start an infinite loop. It does seem to be coming from the MatSelectList, don't know if this is a broader issue or specific to the signal interaction.
Thank you for reporting everyone. I had a look at it this morning, simply replace the Angular Material selection list with plain HTML and a checkbox and it works. So something to do with the use of that particular material component. So it's not a broader issue.
@@AngularUniversity thanks
@@marcodigennaro5753 You're welcome 👍
thanks for the tutorial, do i need angular 17 for it? is it still in beta the ngrx store?
You're welcome 😊It's based on signals so it need 17, maybe it works with 16. It's not in beta it's in developer preview; It means that's ready but things might still change a bit.
What extension are you using to auto import the material components??
This is Webstorm, there is no extension. I'm hitting Alt Enter to import, and sometimes the imports happen without intervention.
Did you generate a repository?
Do you have repository to look add the code?
How do you access route parameters from such a service ?
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
Great video. I think it's better to use real API, so we can see how to deal with Observables in signal store
A real API can be queries using Promises as well, it works just the same. You can use fetch, the HTTP client and convert the Observables to Promises, or use tRPC or some other more sophisticated HTTP client.👍
@@AngularUniversity why convert to promises though? Can't you just convert from observables to signals? I would prefer to keep my services as observables as that maintains what I have been doing pre-signals. This keeps it flexible IMO
@@tdekoekkoek Personally I think Promises are a better fit for async tasks like HTTP, that's what they were designed to do. For most applications, no event orchestration is needed so RxJs is overkill. Returning signals from the service layer, I'm not sure about that because what about error handling?
@@AngularUniversity thanks for your explanation. No I wasn't suggesting returning signals from the service layer, just observables and that keeps my service layer the same while introducing Ngrx Signals
@@tdekoekkoek The official docs of Ngrx Signals suggest to use async/await, personally I think it's a better approach and i suggest that you give it a shot, but if you want to return Observables that works too, there is a full interoperability. Myself these days i only use RxJs if I really need to, for most typical day to day operations I find it unnecessary and prefer the clarity, simplicity and readability of async/Await.
Hello Vasco thanks a lot for this tutorial 👍 Could u put the link of github repo thanks
Ha! ProvidedIn: root proved necessary using the store across different components. Is there a way to make the store perpetuate within providedIn: root?
Hi Johan, provided in root makes the store a global singleton, meaning it can be injected anywhere. I didn't understand the last part though, about the store perpetuating, what did you mean?
@@AngularUniversity hi Vasco, basically can you have it persist between different components without providedIn root?
@@JohanVrolix Yes, if you put in the providers array of a parent component, that instance will be seen by the parent and the child components. If you put it into the application root component, it's almost the same as putting it in the root of the dependency injection system with providedIn root.
but using providedIn root is recommended to a global store, this way you are 100% sure that you can inject it anywhere.
@@AngularUniversity thanks so much for the swift response and the great insights. I’m nearly finished with my first Angular app using SignalStore now
Do you have source link?
why we put the effects in the constructor instead of OnInit ?
Very good question, by default they won't work on ngOnInit because it's outside an injection context. you can still pass it an injection context if needed. In general with angular signals we are going to be using the constructor a lot more. 😊
Obrigado Vasco e congrats por sempre trazer novas atualizações ;)
@@renaisancijf Obrigado 😉
I see that sometimes you use double equals '==' instead of tripe equals '==='. Isn't it best practice always to use triple equals?
You can if you want, in principle it's better. But I'm yet to run into a case where it made a difference. 😊
Please provide the source code if possible.
Thanks for sharing knowledge.
Can you integrate local storage?
That's a great question, and yes sure. Right now there is no plugin for it, bit it's quite easy to do that with an effect to save the state to storage, and load it back at application startup. 👍
@@AngularUniversity can you please provide a example snippet, it will help a lot, current I am working on a login /sigin up page using firebase as backend. But after login, when I refresh it , it automatically log out the user . Plz help me on this
why using promises instead of observables ? by the way thanks for your course; i hope to learn new things !
I wonder too. I think its better to combine it with observable
It's way simpler, no need for RxJs for writing most code; It should only be used if really needed, not for every day async code. 👍
For most cases, aync / await works just fine. 👍
what scenarios / quick examples would you consider as 'mandatory' for using RxJS ? Thanks for your time!@@AngularUniversity
@@g3co875 I don't think there are any in practice, for most applications. Things like cancellation and auto-complete search boxes which are the typical examples can be done via reusable libraries or widgets, some of which could internally even use RxJs if needed, but there is no need to use at the level of the application for doing simple things as HTTP, in my view. 👍
Hi Vasco, why don't you update the Udemy course. I've purchased your NGRX course and It will be nice it you can upate it.
I plan to update it with a much more in-depth dive into NgRx Signal Store, including entities, features, etc.😊
Can we view the source code for the project?
Yes, thank you for reminding me I've added the link in the description. here it is github.com/angular-university/ngrx-signal-store-crash-course
@@AngularUniversity The repository link does not seem to be working. Is there another place like a blog post that I could find the source code?
is the repo private?
Half way through and I am wondering why the PROMISE and not observable from an HTTP client, maybe there is something I don't see. I will keep watching. I assume you have a more in depth class for this and will watch it, I will never simulate a service like that, but I get you are trying to move fast. I probably will come back and apologize.. LOL, let me watch the whole thing!
Promises are well supported in Angular together with the async/await syntax. It's a wonderful alternative to RxJs when it comes to HTTP.
terrible this kind of programming I do not like it. I never try to program such a boilerplate stuff. I have seen better stuff from you Vasco in you courses. It's not you, it is the theme.
why don't you work on your accent? you've been recording videos for years now but you're talking with the same accent as 10 ten years ago! how can you not make any progress in that?
LOL people seem to understand most of what I say 😉
@@AngularUniversity Your accent, pronunciation is absolutely fine. Don't change anything!
Hi this accent has become as a brand so don't change it. Its perfect as soon as users hear it, it knows it's going to be great content! Thanks!