Відео

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.

Thanks. If the parameteruses is a Signal, rxMethod applies an effect to it. If it is an Observable, it subscribes to it. Every time an Observable emits or Signal emits (careful with glitch-free), the inner Observable is executed. To put it short for Signals: rxMethod is just a wrapper around the effect function with an untracked in it. Did I answer your questions?

Thanks, I hope I can publish new videos very soon.

So if you call a method twice synchronously, the first one will be dropped. WebSocket messages usually arrive asynchronously, so they won't be dropped by the glitch-free effect. You can use the SignalStore for events with rxMethod, but you have to think what type you use to represent that event. I would avoid putting an event into as Signal, usually the events comes from an Observable or an event listener (also works without rxMethod). Observables and event listeners are both fine. If you end up having dependencies between signal stores, then you will very quickly have an event in the form of a Signal. You might now be worried about the glitch-free effect, but from my experience, it is very rarely a real issue.

@@dezee2412 thanks a lot as well

YES, I don't have anything to add to your statement. 💯 correct

Hi, what do you mean exactly? The dynamic tracking is an advanced feature and I guess not used in the majority of use cases.

@@RainerHahnekamp I mean the logic to run or not run the effect lambda is probably determined by whether any one or more of the tracked signals associated with it have a new value or not.

@@ml_serenity Yes, but dynamic dependency tracking does exist: github.com/angular/angular/tree/main/packages/core/primitives/signals#dynamic-dependency-tracking

Thanks a lot! Happy to hear

I guess, you've already found my other video on how test Signals, right ;)

@@RainerHahnekamp Yep thanks :)

Yes, the SignalStore is an Angular Service which exposes native Signals. All things apply there as well.

Karma does still exist, because they are still working on the migration to Web Test Runner. To be fair, one has to say that Jasmine/Karma doesn't have any issues - it is running fine - so they don't see this task as main priority. Jest will come after Web Test Runner is done and Jasmine will stay (as I said in the video). Btw, in th meantime, I would use Jasmine for a new project. Given the troubles we have with Jest/Angular and the pace of the migrations, I am afraid official Jest support is something we get in 2025. Last year, I had the impression that Jest will already be available in Angular 17.

Hey, unfortunately no. What is the issue with the audio? I mean I know I am not a native speaker but microphone should be quite good.

Hi, where did you hear about the bundle size issue? Could it be that you are mistake standalone with the barrel files? Having a lot of barrel files (index.ts) will problems to your bundler because it might not be able to tree-shake them efficientyl, and you may end up with a huge initial bundle. Regarding Standalone vs NgModule, there is no impact on the bundle size.

I see, you are the action hygiene. So you have one facade method per action. If you have multiple actions, then you also have multiple methods. As a side note: If you have multiple actions just for debugging purposes, why don't you add {context: string} property to the action's payload. Saves the the same purpose. On the other side, if you have different load actions, stick to what you have.

@@RainerHahnekamp Thank you for your reply! So It seems that using createActionGroup method and a facade service is not really appropriate. The source property in createActionGroup method is the interesting property (as well as the organisation of the actions of course) and unfortunately we can't benefit to use it.

@@arnoldm5358 To be sure there is no misunderstanding. With "stick to what you have", I meant a facade with one method per action.

You typically get that message, if you have an invalid configuration file. Check that your commenting also wasn't applied to some things (parenthesis for example). If you uncomment it, and Playwright works, it is definitely an invalid config. You can post the contents of it here as well.

@@RainerHahnekamp Actually, found those issues to be specific to Windows. All works fine on Ubuntu.

@@toromanow It shouldn't make a difference...

Thanks Doman, will do. The next "big one" will be about RxJs and a little bit longer.

@@RainerHahnekamp ​ Great, RxJS is also very interesting topic so I will surely watch it. Btw. RxJs is broad topic so I'm not expecting that you will touch this subject in mentioned video but for future content you could consider adding to your 'pool of ideas' reactive/declarative vs imperative style of programming in context of RxJs (it's not so obvious for many programmers who are used to write imperative code - me included)

@@youpeekayeyI touched a little bit on it. I think that RxJs forces you to do declarative programming and I have seen very often that people overuse that paradigm. So I have an example where I show how simple it can become if you add a little bit of side effects into it. We will see 😅

As always, you are very welcome Roland!

Great, I stumbled upon the different behavior in a workshop and thought it might be useful to share.

Thanks Dhaval, and also for your ongoing support. You are a well-known face to me 👍

I don't see any benefit in using Selenium anymore. I've been using Selenium (Selenide) for so many years, and we had to deal with so many flaky tests that we gave up one time. When Cypress came out, we gave E2E testing with Cypress another chance and were more than happy. Since then, I've never heard that somebody really enjoyed working with any webdriver-based derivate. Since I would not use it, I don't want to make a video about it. I know that there is now WebDriver Bidi. It has been hailed to bring the same quality as CDP (Cypress, Playwright) but download statistics show a completely different picture. Did I miss anything, respectively is there a particular reason why you are asking?

@@RainerHahnekamp thank you. I asked because a lot of testers QA teams use Selenium from what I see in jobs posts and I wonder why it was not used with Angular in any of your videos, and you are the best person to ask for it when talking about testing 🙂 .Have a great day

@@etexalbania7301 Yes, you also have remember that Selenium was the standard framework for more than a decade. In huge environments you don't change that quickly. So I don't think that there will be demand for Selenium developers in the future as well. For new projects, though, Selenium doesn't seem to be the first choice anymore (diplomatically said).

You're welcome, happy to hear!

Most appreciated Steffen!

Yes, one has to try it on a more realistic application in order to know if it can keep what it promises.

Thanks Aiana and you are very welcome 🙏

Happy to heaar Leonardo

Thanks a lot Mohamed and best wishes from to Vienna (🇦🇹) to the land of the pyramides (🇪🇬) 👍

Serwas Markus, yeah so using Signals in the templates is definitely a safe bet. I don't think that we have to use RxJs all the time. There are quite a lot of applications out there who might be well off with relying only on Promises but you need to know when Promises aren't sufficient anymore and you need to level up. I intend to come up with a video on that topic. It is not easy one. Although I have very good connections to the RxAngular team, I still haven't tried it out. Shame on me 😅

@@RainerHahnekamp I know it sounds odd, but do you think it would make a difference to wrap the promise into an observable and embed it to the computed with toSignal()?

@@ShiftedBit I don't know, you could try it out if you want to. I've added the link to the repository. But as I said in the video, it must not concern you that you might miss the intermediate change where the holidays are emptied. If it does, that don't use a Signal for the holidays but an Observable. "The problem" is not the Promise, but the Signal itself which skips some values (glitch-free).

@@RainerHahnekamplooking forward to that video sir 🎉

You are welcome!

Hey, it sounds to me like you are afraid of loosing the control over things? I don't see it that way to be honest. Yes, an effect runs asynchronously but if it triggers a side-effect which is also asynchronous (e.g. HTTP request), it doesn't change anything. I was never in control of an HTTP request either. Would it be possible to elaborate your issue a little bit? Can you think of a use case where the new API might be a problem? --- I would be careful when it comes to afterNextRender and SSR. It is not executed on the serve. So your rendered page might be missing crucial content. --- Cheers!

I would say it's the timing of the availability of various component signals during the initialization that causes me some confusion. Like if I tried to 1. read an input.required() signal, 2. then fetch some data in an effect(), 3. and then use that data to populate a 3rd-party chartJS node in the DOM using viewChild() => I'm not exactly sure where should I schedule this chain of behaviour, because input.required() cannot be read too early in the constructor (input not yet available error would be thrown), while effect() itself must be scheduled in an injection context (constructor or field declaration), when viewChild() result definitely is not yet available in constructor. With decorator based approach, I would say ngOnInit for reading @Input and fetch data, then afterViewInit for populating chartJS DOM node. I'll need to study that part of your video again to familiarize myself with these new timings. Thanks

Yes sir, threw it away after that one and working with a wireless. You can see the difference in the second part.

Thanks a lot!

THANK YOU!

Hey, nope for the deep compare. The signal does the equal check based on object reference. That's why a you need to do an immutable update of the state, i.e. clone the object. You can add an equals function, as second parameter of the computed function. Then you are in charge. That is something I haven't shown in the video.

Thanks as well. And if someting is unclear and you have any questions, let me know!

Hi, you would have to show me some kind of code so that I can get an understanding of your use case. In general, I would avoid calling methods inside a computed. You don't know what the private method is doing exactly. If the method calls another Signal you have an implicit/hidden tracking of that one. If your method starts an asynchronous task, then you are problay using it wrong and have to find further workarounds, which doesn't really improve the code. On the other side, if the computed is derived by a very complicated algorithm which you want to re-use outside of the computed as well, then yes. That makes sense. But please be free to share a code snippet. You might have a use case I haven't thought about so far.

Hi, I am using IntelliJ with the default settings.

@@RainerHahnekamp Thank you, really enjoyed the video 🙏🙏

Hey, thanks a lot. Guess that means, I have to come up with further Java-based Videos...

Hey! Thanks, I use dark theme occassionally but always come back to the light mode. Can't help myself 👺

@@RainerHahnekamp Well some day you'll get old too.

@@donwald3436 Well, that's exactyl why I need the light. I don't see so well anymore 😅

Well, I wouldn't say it is an anti-pattern. Especially not in the way how I used it. If it comes to HTTP Response, as you mentioned it, it is a little bit more complicated. First of all, a Signal forces us to provide a value. The alternative would be to have a union type with undefined. Sticking to an Observable is not really option if we consider that Angular is heading towards Signal Components. Another option is that you add metadata to that Signal which tells you, if you already have the response or if the signal's value is still the initial one. But again, with that approach you'll find yourself very quickly in a situation where you want to use a Signal-based state management library. So it starts to become more complicated although you might have a simple use case.

--legacy-peer-deps is the recommended option. See here: github.com/ngrx/platform/issues/4352

@@RainerHahnekamp Perfect, thanks for the reply. I have been greatly enjoying your videos on signals and the signal store.

@@davesharman8302 Thanks Dave. Happy to hear that 😄

You are very welcome. With Angular 18 markForCheck will now also trigger the change detection. Maybe I have to release an updated video.

Dear Yuri, could you maybe provide me a small code snippet? Thank you

@@RainerHahnekamp see if that peace helps. private processStepPackService: ProcessStepPackService = inject(ProcessStepPackService); constructor(){ super ("ProcessStepPack", inject (ProcessStepPackService)); } In that case where I am injecting ProcessStepPackService twice. Would that be 2 instances or still just one?

@@leiayuri Ah, that should be just one. You would get multiple instances with different provides but not by calling inject multiple times

@@RainerHahnekamp thank you so much. It was very helpful.

If you mean the redux pattern of the globa store, then yes. If you say Signals will replace State management libraries then I would definitely say no. Because you have Signals and a structure that is suited for state management, you need a library on top of it. This is something which has already been confirmed by Angular itself. They said, the default signal function will not be enough as soon as your Signal contains larger values.

Bitte schön. Gerne geschehen der Herr 😉