วีดีโอ

Thank you. Happy to hear.

Well, you see how much time I have to spend in order to explain the potential issues with OnPush. With the default mode, it just works. So that's the trade-off. On the one side default is big when it comes to developer experience, on the other side it is slower. In my experience, a lot of Angular applications are already fast enough and it is not necessary to use OnPush. That being said, with zoneless introduced as experimental mode in Angular 18, pure-OnPush applications can now also get rid of zone.js and if we stick to Signals, we end up with the same developer experience with the default change detection. Summary: In 2024, use OnPush.

Hey, at the moment, that would be a method returning a computed. So you have to put that into `withMethods`.

@@RainerHahnekamp cool! I was thinking about it, but didn't knew if it's the right way. Thanks!

@@simionmarian4395 Yeah, I want to bring that up for discussion for the next version. I would usually see that as part of withComputed

Thanks a lot for the compliment.

@@DS-bz4mz Thanks, well if you are on 17 now, it is time to make use of them 👍

Hello, hello, thanks a lot. I have just a few Java-related videos but comments like this, are extremly motivating to come up with more. Thanks.

Hey, what exactly do you try to mock? Do you maybe have a code example?

Hi, thanks for the info. Can you maybe point me to a quiet section? Would help me if I could hear it as well. I don't do anything manually in terms of audio quality, but maybe the microphone or Premiere does it. Thanks!

@@RainerHahnekamp It happens basically every time you breathe in or out. It shouldn't be that loud. It's definitely an automated thing, maybe check if your microphone does auto compression or perhaps it's some setting in adobe premiere. I just did some research and it turns out youtube also compresses the audio quite a bit, it is said that it's a bit less when your output volume is lower. Honestly, your videos sound good enough so I wouldn't spend too much time on it, I just mentioned it in case it was something you or your editor did, and perhaps they could dial it back a bit. Keep up the good work :)

@@UfuUfu-sj3bv Thanks, unfortunately I do everything on my own and I don't have the necessary education when it comes to audio/video recording. In my next video I hear the loud breathing already in the original video file. So it looks it is coming already from the microphone.

​@@RainerHahnekamp Well compression is basically the process of making all (or most) parts equal so that the sound source becomes more predictable and with vocals that leads to hearing the result better. It's like pressed down in total, soft sounds and high volume sounds, and then because it got no more unpredictable spikes in loudness, it usually gets turned up a lot. So what's probably happening in your case is that it's simultaneously being compressed down into a singular volume, then raised back up, making breathing sounds as if it was as loud as your normal speaking. There's a very big dynamic range in audio sources, meaning it usually goes from very soft to very loud. You must have noticed it at one point in a movie, the music would be very loud, but the voices would be too soft, so you turn it up and you get your eardrums blasted. The more cheaper streamer material probably does this for you but it makes for uncontrollable results as you've noticed. So investing at some point in a more expensive microphone and audio interface could be a good move to increase production quality. Then you can play around with compression yourself on an unmodified audio source. But it's not easy, doing sound editing, since it's a 3d space you are dealing with. So perhaps it's better to wait until these video's made you millionair and get an audio editor to do it for you :)

Thanks as well, Michael!

Thanks Ben

For the record, I find it a little bit problematic that effect is in developer preview. If the Angular wants, they can introduce breaking changes with every major release. So effect could be stable and there wouldn't be such much "confusion". That being said, the effect in the SignalStore is used only once, and that's in rxMethod. It is used as an internal implementation, meaning the API doesn't expose it. In case of a breaking change of effect, we would only have to guarantee you that rxMethod works as before. We can change the internal implementation or tweak the effect however we want. So I don't necessarily see it therefore that the SignalStore has to be in developer preview.

@@RainerHahnekamp thanks for your reply.

@@dhavalv You are welcome, but how do you see it? Would be interested in hearing your opinion as well.

Hi Saeed, honestly, I haven't tried it out yet but you could give it a try. Use cy.mount to setup the router, also use provideLocationMocks and try to navigate with the harness. If it doesn't work, let me know and I'll give it a try. Should be doable in my opinion.

you are welcome

Great, you're welcome

​@@RainerHahnekamp can you explain how to make something like that work? loadVideos$: Observable<Action> = createEffect(() => { return this.actions$.pipe( ofType(VideoActions.loadVideos), switchMap(() => computed(() => this.searchService.searchQuery$).pipe( this switchMap((query: string) => computed(() => this.navigationService.currentTokenPage$).pipe( and this switchMap((pageToken: string) => this.requestService.search(query, pageToken).pipe( switchMap((items: Item[]) => this.filterService.filter$.pipe( map(() => this.filterService.sortDataByFilterCriteria(items)) ) ), map((videos: Item[]) => VideoActions.loadVideosSuccess({ videos })), catchError((error) => of(VideoActions.loadVideosFailure({ error: error.message }))) ) ) ) ) ) ) })

I would store the initial state in a variable and come up with a reset method which patches the state with the initial value. You can have as many signal stores as you want.

Thanks, great to hear.

Hey, sorry for the late response. The backend is only available on my machine. I was hoping that the frontend source is enough.

Thanks as well!

It is not real private. So if you do an (store as any)._updateTimeLeft() it would work.

@@RainerHahnekamp would it be better to use #? Or is it not possible in the internal structure?

@@NoName-1337 the # is only allowed for class properties. withMethods doesn't return a class but an object literal. that's the problem.

@@RainerHahnekamp true, you're right. totally forgot about that point.

You cannot set properties of an object as private. You can only do that if you have a class.

@@RainerHahnekamp My point is to add the private function ""updateTimeLeft" before withMethods return. Eg: withMethods((store, http = inject(HttpClient)) => { function updateTimeLeft() { console.log('Private function'); return 'Hello'; } return { loadExchangeRates: rxMethod<ExchangeRates>( pipe( switchMap(() => { updateTimeLeft();

Thanks Connie

Thanks, you are very welcome

​ @RainerHahnekamp run the ap today and its ok

So first of all, you have to disable the built-in protected via untracked or allowSignalWrites. Once it is disable, you are responsible for whatever you do: n = signal(1); #loop = effect( () => { console.log('loop'); this.n.set(this.n() + 1); }, { allowSignalWrites: true }, ); That is an infinite loop. Very easy to achieve 😇

Hi Ibrahim, can you help me here a little bit? Which commands returns that error?

@@RainerHahnekamp Yesterday, I pulled the init branch and started the tutorial, and everything was OK. Today, when I launched the application with ng serve, the server started successfully, but when I go to localhost:4200, I only see the header and the page content is blank. After 5 seconds, I get a timeout. It's as if the frontend is trying to connect to a remote server without getting a response. I can send you a screenshot if you want.

@@RainerHahnekamp Yesterday, I pulled the init branch and started the tutorial, and everything was OK. Today, when I launched the application with ng serve, the server started successfully, but when I go to localhost:4200, I only see the header and the page content is blank. After 5 seconds, I get a timeout. It's as if the frontend is trying to connect to a remote server without getting a response. I can send you a screenshot if you want.

@@RainerHahnekamp Yesterday, I pulled the init branch and started the tutorial, and everything was OK. Today, when I launched the application with ng serve, the server started successfully, but when I go to localhost:4200, I only see the header and the page content is blank. After 5 seconds, I get a timeout. It's as if the frontend is trying to connect to a remote server without getting a response. I can send you a screenshot if you want.

​@@RainerHahnekamp run the ap today and its ok

Thanks, happy to hear. About your questions: tapResponse is like tap but also comes with error handling built-in. That is in case of an error it returns an empty Observable. You've caught a bug; the tapResponse after the switchMap doesn't help; it should be put into the switchMap.

Yes

@@RainerHahnekamp ah good, good I thought I was doing something strange to cause it to do that, all my state changes are encapsulated I see that as one of the distinct benefits of using the signalStore 🙂

@@andyhb1970 Yes, yes, so in the release, encapsulation was not just introduced but also defined as best practice. That's why it is now the default behavior. In order not to break existing code, the encapsulation had to be disabled but you should definitely check or maybe even refactor the code, so that protectedState is enabled. It looks like there will be even an ESLint rule which marks protectedState: false as warning.

Thanks

Thanks, didn't I do that? I am using the timeInSeconds from the parent state?

@@RainerHahnekamp I mean the initial value in the withState part of the feature store. I don't know if the first state value is before or after the interval triggers, so there may be a "glitch" in the timeLeft value.

@@larshanisch The intial timeLeft will always be shown because it takes 1 second for the first run of the interval. I am relying on the timeStarted. So regardless when the interval starts, the timeLeft will always be updated correctly relative to the timeStarted. Maybe I'm missing something here...

@@RainerHahnekamp I'm talking about the hard coded "timeLeft: 180" in line 18 of withCountdown. What happens, if I initialize the quizstore with a different value of timeInSeconds (line 24)? I'm not sitting at my computer ATM so I cannot try... 🤓

@@larshanisch Ahhh, now I get it. Yeah of course. So for a real world project, I would add a loaded status to the state and I'm not going to show anything unless my quiz has been loaded. The the problem with timeLeft doesn't exist.

Merci beaucoup Lisa 😉

Hi Kiril, thanks as well. 1. Yes, you can reference Signals from other Signal Stores in your computeds. In the end they are all native Signales 2. Have you tried out github.com/angular-architects/ngrx-toolkit for Redux? If yes, and it doesn't work let me know. Cheers!

@@RainerHahnekamp Thank you for the quick response, I will try it immediately

Unfortunately yes. If you go with github.com/timdeschryver/ngrx-immer you can also do a mutable update, though.

I don't use resolvers when I have state management. What I do instead, to go with guards. The guard triggers the loading and might wait until the store returns the OK that it has loaded the data. Not sure, if this was what you were asking for. If not, please clearify.

@@RainerHahnekamp Thank you, much appreciated the response! One last thing that I would like to hear your opinion on it. Let's say in one page you call `loadAll`, would you also call in CanDeactivate context a store method 'resetAll' that resets questions to initial state?

@AenGex Probably not; if you say loading and destroying is bound to the route, then that sounds to me like a state for local state management. Do you have a component which is bound to that particular route? If yes, then the component should provide the Store. The store has an onInit hook where it loads the data. When the user leaves the component, the Store gets automatically destroyed. If your use case is more complicated than I think, then there might a reason for the guards.

@@RainerHahnekamp Thank you, I understand your point. I don't have a use case in particular, but rather thoughts for common patterns with NgRx. You covered it completely! Thank you for the input and your awesome work!

Thanks Borja!

Hi Steffen, danke, danke Mach mich nicht schwach wegen dem fehlenden Repo! Ist eh alles da: github.com/rainerhahnekamp/ngrx-signal-store-release/blob/main/src/app/holidays/feature/quiz/quiz-store.ts Ja, keine Neuerungen beim patchState. Es wurde eher auf "enterprisy"-Features gesetzt und ein bisschen die Erweiterbarkeit verbessert.

@@RainerHahnekamp stimmt sorry ich hab falsch geschaut :-) Steffen mal wieder ;-)

You will probably write something very similar to the patchState and slices - something that generates slices on the fly and makes it easy to update a Signal. You also want to make sure that your self-written services follow a common style so that developers can easily switch between different code parts. Then, you will also need to reuse certain existing features you have written in one service in another. Yes, you can do it all yourself, but at a certain point in time, I say I just take what is already available, battle-tested, and well-known (like NgRx) in the Angular community. I'd like to add that it is also easy to learn and doesn't come with boilerplate code. It is the typical buy-or-make decision. When it comes to state management, I would always choose "buy."

​@@RainerHahnekampIn my opinion there is actually a lot of boilerplate. Creating your signal stores with all the with* functions is pretty much boilerplate and adds a lot of complexity and you still have to implement all methods and rxjs logic yourself. I would argue that you gain very little but add a lot of unnecessary complexity and unnecessary "vendor lock in". Another point i see is that especially "junior" guys might not understand whats "under the hood" and wont learn the basics properly

@@staoish An answer to a comment on TH-cam: WIthout the with* function, you are loosing the structure. Then you have a simple Angular service where your developers putting the computeds, logic, DI in different places. The SignalStore enforces that these elements have a specific location. It makes the code more readable - and yes it does that by adding boilerplate. You might be able to do same via ESLint, but somebody has to write that rule as well. An application is not a playground to learn coding. I don't want to have five different, self-written state management services in the codebase. You see where I am heading to? Junior developers should learn the intricacies of Signals but please not in an application that's shipped to end users. An extreme example: You will not let a "Junior pilot" fly a plane with hundreds of passengers. That's why they have simulators. Does that make sense?

@@RainerHahnekamp Yeah we agree to disagree here i think. I would rather teach a junior how to properly write a clean "store service" and explain the necessary concepts and enforce them via pull requests. Especially because i feel the creation of a ngrx signalstore is really complicated compared to a service and in my opinion it does not increase readability but even reduces it Another important point: a newly hired angular developer will get the self written store service concept immeditately and does not have to learn another library. I feel the disadvantages overweigh the benefits by far

Thanks, you are very welcome Dave.

Thanks for your ongoing support Roland.

It's simply the truth. Your explanations are clear and simple.

Thanks. If it is like in my example that the service provides already the data and the event listeners "bite-sized for the template", I'd say yes. The more generic the service becomes, the more I'd tend ont to use it directly in the template. So summarized, for local state management, probably yes, for global... very likely not.

@@RainerHahnekamp thanks for your answer 👍

Hi Ranier great video as always, a quick question, in your signal store you use the variable name store for with methods but state for withComputed. Is that personal preference? I frequently find myself debating this with myself is it a store or is it the state 🤔

@@andyhb1970 There is a difference. withComputed only gets the state and not access to the methods you might have defined before, whereas withMethods has access to everything. Just clone my example and you will set that withMethods has all the methods of withCountdown and withComputed doesn't.

Yup, that was the idea. The article has already been published several months go. The video is missing.

@RainerHahnekamp lovely, ur contents are fantastic. Please keep them coming in. 🙏🙏

Thanks a lot. I really should do more Spring-related videos...

Yeah, I know. Extensibility is the most powerful feature but also the hardest.

Hi Prasoon, generally speaking, that's what an effect is for. Can you maybe give me a concrete example?

@@RainerHahnekamp Yes I used effect and it works.. Can we use multiple effect of same component or not??

@@prasoon2510 Yes, you can have as many effects as you want.

@@RainerHahnekamp Thank you so much for the quick response 😊❤️

@@prasoon2510 You are very welcome. If something is still unclear, let me know

Saleem, that's IntelliJ what I'm using. If you mean the inlay Hints, they are available in VSCode as well: code.visualstudio.com/docs/typescript/typescript-editing#_inlay-hints

If I use an exhaustMap and switch quickly between page 2, 3 and 4, it could happen that requests for 3 and 4 are not processed. exhaustMap waits for the inner observable to complete and ignores all incoming values from the outer observable. So for pagination, you usually go with switchMap.

Thanks Emil

Hey, I'm not sure if CRUD + Pagination is enough for a complete video but I can answer specific questions, if you have any. What are you struggling with? In the end you have a list of entities with the CRUD actions and additional actions to swtch pages.