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.
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 😂
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
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 ?
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.
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 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 - ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-uOIdILz-Dkw.html 👍
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!
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. 👍
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 👍
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.
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
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. 😊
@@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. 👍
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.
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?
