How Angular Signals and RxJS Work Together

Поділитися
Вставка
  • Опубліковано 14 лис 2024

КОМЕНТАРІ • 127

  • @richnimbu
    @richnimbu Рік тому +52

    I don't know if its your pace, or your depth of knowledge, but I find your videos very easy to take in. You have a real talent for conveying highly technical information into consumable content.

    •  Рік тому +2

      I agree. Her narrative skill is TOP

    •  Рік тому +1

      As well as the video editing (code writing + comments)

    • @cutefun5256
      @cutefun5256 Рік тому

      I agree.

    • @elizabeth_ford
      @elizabeth_ford 9 місяців тому

      She sounds like a robot.

  • @TampaCEO
    @TampaCEO Рік тому +9

    You were born to be a teacher. I just thank God for the Internet that allows you to reach thousands of students. Thank you for another amazing video!!! Subscribed.

    • @deborah_kurata
      @deborah_kurata  Рік тому +1

      That is so very nice of you to say! Thank you! 😊

  • @rkumar.lnct24
    @rkumar.lnct24 Рік тому +5

    Very nice video on signal and Rxjs, the best part is you take the problems practically and cover all the scenarios. Thanks for doing this video.

  • @ianvink
    @ianvink Рік тому +3

    I loved your analogy of "we need to open the box" Great way to remember that step

  • @jamienordmeyer4345
    @jamienordmeyer4345 Рік тому +5

    Thanks for this, Deborah! I've been looking for a video that describes in simple terms how and where to combine RxJS and signals, and you've done a great job of that here! Appreciate the time and energy that you put into this!!

  • @davidjustice2323
    @davidjustice2323 Рік тому +5

    You're brilliant as always. Thanks Deborah!

  • @demidovmaxim1008
    @demidovmaxim1008 Рік тому +2

    How glad I am that I found this channel. Now this is my mecca of knowledge))

    • @deborah_kurata
      @deborah_kurata  Рік тому +1

      Me too! 😊 Hope it continues to be useful!

  • @XinWongDigital
    @XinWongDigital 10 місяців тому +2

    Great video with a great use case throughout. I think fromObservable is now toSignal and fromSignal is now toObservable in the angular/core/rx-interop.

    • @deborah_kurata
      @deborah_kurata  10 місяців тому

      Thank you!
      And yes, you are correct. I did a second video that covers the changes here: ua-cam.com/video/xQIOWkBe5wQ/v-deo.html

    • @WebCodeSolutions-ob3pf
      @WebCodeSolutions-ob3pf 6 місяців тому

      Thanks to both of you !

  • @jediampm
    @jediampm Рік тому +6

    Hi, as always great video with great explanation.
    One or two things that i would like you to show is / are :
    - template driven form with signals and if possible with reactive forms as well.
    - component child: input and output with signals
    Thanks

    • @deborah_kurata
      @deborah_kurata  Рік тому +10

      Thank you for the kind words! 🙏
      Regarding forms, in talking to the Angular team recently they have not yet completed their thoughts on how signals will work with template driven or reactive forms. So there isn't anything yet on that topic. I'll keep an eye out for any discussions and post when there is something there.
      For parent/child components and input/outputs, they will play well with signals. I'll definitely cover that in an upcoming video.
      Thank you for the suggestions!

    • @jediampm
      @jediampm Рік тому

      @@deborah_kurata Hi, with reactive forms, maybe do not make sense. But in previous video, you use ngmodel to connect signal on select element. So would be so different to work with template driven forms ?

    • @deborah_kurata
      @deborah_kurata  Рік тому

      My understanding is that signals don't currently work well with ngModel ... but there is work to support that scenario expected in a later release.

  • @everyonesview
    @everyonesview 3 місяці тому +1

    Awesome, Deborah! Just wanted to say anyone who's has experience with Knockout JS should find it easier to grasp Angular Signals - they follow similar concept.

  • @TaiwoKazeem-q8n
    @TaiwoKazeem-q8n 9 місяців тому

    youre the best teacher ever

    • @deborah_kurata
      @deborah_kurata  9 місяців тому

      That is very kind of you. Thank you so much!

  • @dixavier27
    @dixavier27 4 місяці тому

    Thx a lot, Deborah! You are an excellent teacher! ❤

  • @nabenzanol
    @nabenzanol 9 днів тому

    You are amazing ! so underrated ! Hope you great successs

  • @dougl765
    @dougl765 Рік тому

    Deborah, you are sooo good! Thank-you

  • @TheZukkino
    @TheZukkino Рік тому

    Donno if my concept is correct or not:
    - The Signals are useful to simplify the data flow providing (Provider)
    - The Observables must be used to catch and work with data (Worker)
    The Observable must be hidden to the component which uses to listen to data changes only (Signals).
    In this video you didn't focus a lil part about error handling.
    However really great work and explaination skills!!

    • @deborah_kurata
      @deborah_kurata  Рік тому

      Thank you.
      I've created a set of samples in Stackblitz on error handling. I haven't yet had an opportunity to turn them into YT videos.
      You can find them here: stackblitz.com/@DeborahK/collections/angular-signal-error-handling-research

  • @bradkovach
    @bradkovach Рік тому

    Marvelous! I cannot wait to share with my team!

  • @Edmundo_Rivero
    @Edmundo_Rivero 4 місяці тому

    please more videos!!
    thank you so much!!!

    • @deborah_kurata
      @deborah_kurata  4 місяці тому +1

      Have you seen my latest? ua-cam.com/video/rHQa4SpekaA/v-deo.html

  • @hakobmshecyan4030
    @hakobmshecyan4030 4 місяці тому

    Using signals instead of observables in a component solves one of the biggest problems associated with observables: accessing the observable's value synchronously within the component. Thanks for the video!

  • @rebeltrooper4044
    @rebeltrooper4044 10 місяців тому

    Thanks for this video and the rest in your series. They are great!! Do you have an example of using Signals with a POST method that has a request body?

    • @deborah_kurata
      @deborah_kurata  10 місяців тому

      Thank you!
      Is there a particular example you are working through? If so, could you post a link to a Stackblitz of the example (not your entire application) and I'll take a look.

  • @fieryscorpion
    @fieryscorpion 10 місяців тому

    This was AMAZING! Thank you so much!

  • @chagamajaykumarreddy1897
    @chagamajaykumarreddy1897 Рік тому +3

    Hi Deborah, it s a awesome video first time ever did on rxjs and singnals combination. thank you so much. what about error handling and would like to display those errors on the component template like we have here errormessage proerty.

    • @deborah_kurata
      @deborah_kurata  Рік тому +3

      Thank you!
      Yes, error handling could use some attention! Some suggestions I've see use try/catch blocks, but those don't work with a declarative approach.
      Another suggestion I've seen is to wrap the returned object in another object that has the object and an error message.
      But AFAIK, nothing has been finalized on this yet. I'll work on a video as soon as I have more info.
      Thanks for the suggestion!

    • @chagamajaykumarreddy1897
      @chagamajaykumarreddy1897 Рік тому +1

      @@deborah_kurata thank you for your response.

  • @justflying5323
    @justflying5323 Рік тому

    Great Video. All my questions got answered.

  • @erfanfarhadi
    @erfanfarhadi Рік тому +1

    It wasn't just good, it was fantastic. 😍👌👏

  • @Erril_Ferndal
    @Erril_Ferndal 6 місяців тому

    Amazing videos like always 😃

  • @erics.a.3875
    @erics.a.3875 11 місяців тому

    Great content as usual!

  • @ddomingo
    @ddomingo Рік тому

    Hey Deborah, big long time fan of your videos here. What happens if you call the set method on the Signal that was created in the Service with the fromObservable method? Does it break the code?

    • @deborah_kurata
      @deborah_kurata  Рік тому +1

      Thank you!
      Since the making of this video, the team renamed `fromObservable` to `toSignal`. The `toSignal` method creates a *readonly* signal. So you can't call the set method on it to set a new value.

  • @onetwothree123-
    @onetwothree123- Місяць тому

    Thank you Deborah! I learned a lot from you 🙏

    • @deborah_kurata
      @deborah_kurata  Місяць тому

      That's great to hear! Thank you and all the best! 😊

  • @souhaibkhadraoui9898
    @souhaibkhadraoui9898 Рік тому

    Great content !!
    Suggestion: Video about the replacement of the behaviorSubject in a service by a signal

    • @deborah_kurata
      @deborah_kurata  Рік тому +1

      Thanks for the kind words and the suggestion.
      It wouldn't be all that different from the Subject example provided in this video. But I'll put something together. Thanks again!

    • @deborah_kurata
      @deborah_kurata  Рік тому +1

      Here it is: ua-cam.com/video/a6XKMj-WRhM/v-deo.html

    • @souhaibkhadraoui9898
      @souhaibkhadraoui9898 Рік тому +1

      Thanks so much, it clears a lot of questions that I had !!

  • @deborah_kurata
    @deborah_kurata  Рік тому

    @draylegend Not sure if you'll get notified of this message... I looked at your stackblitz. Do you still need help with it?

  • @half7752
    @half7752 Рік тому

    when to use observables, signals or normal variables? what type of situation is best suited for each case?

    • @deborah_kurata
      @deborah_kurata  Рік тому +1

      Variables: For data that you need to hold in the application, such as a path name. And for data that is displayed in the template via binding, but never changes. Such as a page title. Or for any other constant
      Signals: Any data that is displayed in the template via binding but can change. Any data that relies on and changes when other data changes (computed signal). Any data that you want to react to and perform an action.
      Observables: Asynchronous operations, such as http get/put/post or streaming operations where you must receive every emitted item, such keyboard events if you need every keystroke.
      The gray area: Responding to actions. We had previously done these with Subject/BehaviorSubject. We can now use signals instead. But if responding to the action requires an async operation (such as getting more data), or it requires receiving *every* change (not just the most recent value) then it may be easier to continue using Subject/BehaviorSubject.

  • @sovannborithyun5205
    @sovannborithyun5205 Рік тому

    Can you prepare a video on how to maintain the loggedIn user using Angular Signal?

    • @deborah_kurata
      @deborah_kurata  Рік тому

      Good suggestion!
      In the mean time, the short story is:
      - Create a user service
      - Define a signal in that service to hold the logged in user object with an initial value of null
      - When the user logs in, set that signal to the logged in user
      - The signal should then be accessible to all of the application as needed.

  • @maneshwam
    @maneshwam 9 місяців тому

    Looks like "fromObservable" method name has been changed to "toSignal" in angular 17

    • @deborah_kurata
      @deborah_kurata  9 місяців тому +1

      Yes, that's correct. It's a bummer that we can't "update" a YT video. But I did add this: ua-cam.com/video/xQIOWkBe5wQ/v-deo.html

  • @berboko3081
    @berboko3081 Рік тому

    Awesome video, thanks a lot ! Your videos is really helping me on my Angular journey !
    I have a question regarding the signal created inside the véhicule service when you call toSignal().
    This line of code is triggering when the service is injected inside a component. Basically, how can I prevent this in the best way ? I mean with this approach I can’t choose when to trigger the request when I want because the véhicule signal will have the fetched data ?
    I’m still learning so this question may be a stupid one but I just want to learn this framework with the new signal feature !
    Thank in advance and again, awesome video Deborah 👍🏻

    • @deborah_kurata
      @deborah_kurata  Рік тому

      Great to hear that it was useful! Thanks!
      If you want to trigger an HTTP request based on an action, you can define the action as a signal, then use toObservable to react to that signal and execute an Observable pipeline. Something like this:
      // When the selected user changes, get the user's tasks
      userTasks$ = toObservable(this.userService.selectedUserId).pipe(
      switchMap(userId => this.http.get(this.todoUrl + userId)),
      catchError(() => of([] as ToDo[])) // on any error, just return an empty array
      );
      userTasks = toSignal(this.userTasks$, { initialValue: [] as ToDo[] });
      Would something like that work for your case?

    • @berboko3081
      @berboko3081 Рік тому

      That’s exactly what I needed thanks you so much 😁 And you just released a video on this topic awesome 🤩

  • @pedro.lizarraga
    @pedro.lizarraga Рік тому

    Great explanation, thank you! 👏

  • @ankurJSDev
    @ankurJSDev 4 місяці тому

    Since `selectedVehicle` is a member of singleton service, as far as I understand, it's value will persist even when the `VehicleListComponent` is destroyed, which might not be a desired behaviour in many cases. How to handle such scenarios? Should we provide the service at the component level for such use cases? Please correct me if my understanding is wrong.

    • @deborah_kurata
      @deborah_kurata  4 місяці тому +1

      I an application where vehicles are the main purpose of the application, defining the service as 'root' makes sense. But if it is a small part of a larger application and you want to ensure that the service is destroyed with the component, then yes, you use the providers array in the component instead of provided in root.
      Do you think it would be worth doing a video specifically on this topic?

    • @ankurJSDev
      @ankurJSDev 3 місяці тому

      @@deborah_kurata So, in my case I have two components on the same page and the user can switch between the two. Both need the same signal but I don't want the value of signal to persist when the user switches between the two. So I guess, I would need to provide the service at the component level so that both the components use different instances of the signal.
      Btw, thanks for the reply. Not sure if this is a common use case but yes, I think a video on this topic would be great.
      Also, I would like to thank you for making these videos. They are really helpful.

  • @talfaran5849
    @talfaran5849 Рік тому

    Hey!, very nice video illustrating a patterns of using rxjs with signals, thank you so much for the effort :)
    I was wondering though - while with RX we are usually retrieving the value from the async pipe to be used in our template, most commonly with *ngIf and using the "as" keyword, in your video you did not use it when changing to signals. any particular reason?
    Another, more general question - does signals offer better performance somehow compared with observables and async pipe? or are they just meant to make our presentational layer cleaner, for example makes the use of markForCheck from within the component almost entirely redundant, since we can use signal instead?
    I couldn't but notice the similarity between MOBX and signals, are signals inspired from it, but built in and work with angular natively?
    What was the main reason Angular team decided to support signals?
    Finally, do you think that in the future angular could be ridding zonejs for good?

    • @deborah_kurata
      @deborah_kurata  Рік тому +2

      Thank you!
      "you did not use it" - Are you referring to the "as" clause? As of now, signals don't support an "as" clause.
      Moving away from zone-based components to signal-based components means that the app will load more quickly (won't have to load zone.js). It will be smaller (won't have to load zone.js). And the app will feel more performant because it won't run change detection when it doesn't need to. This resource provides more information: github.com/angular/angular/discussions/49684
      Yes, signals have been used by several other frameworks, such as Vue. You can implement the basic concept of signals in any language. Here is an article about implementing it in JavaScript: medium.com/codex/making-a-case-for-signals-in-javascript-edf9807f30dc
      The above referenced github link also outlines the reason the Angular team decided to support signals ... including their thought process and what other technologies they considered.
      Yes. In the FAQ in the above referenced document, the Angular team states that they do hope at some point in the future to be able to run "zoneless".
      Thanks again for your post!

    • @talfaran5849
      @talfaran5849 Рік тому +2

      @@deborah_kurata thank you so much for the detailed response and the additional resources!

    • @jediampm
      @jediampm Рік тому +1

      @@deborah_kurata Hi, a correction the only frameworks that use signals implementation way are solidjs and preact. Vue is nowadays a Proxy native api base.

  • @westendwingman
    @westendwingman Рік тому

    Great information on how to use signals. Could you show an example of how you could update the signal with new information from the server? For example, if a new vehicle became available, how would you have a button on the screen force the vehicles to refresh from the server? My current attempt is to use a Subject that can be "nexted" in the vehicles$ observable chain. Seems like there should be an easier way?

    • @deborah_kurata
      @deborah_kurata  Рік тому

      Thank you!
      Regarding your question, you can definitely replace the Subject with a signal. Then use toObservable to include the signal in your pipeline.

    • @deborah_kurata
      @deborah_kurata  Рік тому +2

      I put together a quick little demo here: stackblitz.com/edit/angular-signals-rxjs-deborah-hk2fah
      Basically:
      COMPONENT:
      onRefresh(): void {
      // Change the value of the signal
      // from true to false or false to true
      this.vehicleService.refresh.update(r => !r);
      }
      SERVICE:
      refresh = signal(true);
      private vehicles$ = toObservable(this.refresh).pipe(
      switchMap((doRefresh) =>
      this.http.get(this.url).pipe(
      catchError(this.handleError),
      tap(() => console.log('Retrieved the data')),
      )
      )
      );
      vehicles = toSignal(this.vehicles$, {
      initialValue: [],
      });
      Would that work in your case?

  • @davoodsoleimani9482
    @davoodsoleimani9482 9 місяців тому

    Nice and perfect. thank you.

  • @scellilisa
    @scellilisa Рік тому

    Hi Deborah,
    Will Signal have an impact on how we use Stores for state management?
    thx and great job!

    • @deborah_kurata
      @deborah_kurata  Рік тому +1

      Thank you!
      Techniques such as NgRx will still be useful when an application has complex state management. And NgRx has already begun to embrace signals. Check out a summary here: dev.to/this-is-angular/signals-what-this-means-for-ngrx-eho

    • @scellilisa
      @scellilisa Рік тому

      @@deborah_kurata thanks a lot for your response, can't wait for all your future videos 😍

  • @mikemarkovich69
    @mikemarkovich69 Рік тому

    Thanks as always for the great videos on these new features. One question I had and possibly created an anti-pattern for: how do you manage the developer's ability to change the WritableSignal from the component? I am comparing it to the BehaviorSubject pattern you have demonstrated in many of your videos where the methods updated the private BS (mutable) which was then accessed by the consumers through the public .toObservable() observable (immutable). This prevented writing directly to the BS from the component.
    However, the pattern you demonstrated here seems like it would allow a developer to .set() on the referenced WritableSignal from the component, would it not? To get around this, I instead made the WritableSignal private and then exposed a regular Signal with computed(), that just returned the value of the private WritableSignal. Do you agree with this pattern or how would you go about enforcing this in the same way that you have done in the past?

    • @jurybalikov7063
      @jurybalikov7063 8 місяців тому

      A bit late, but that's solved really easily.
      readonly #writable = signal();
      readonly exposed = computed(() => #writable());

    • @mikemarkovich69
      @mikemarkovich69 8 місяців тому

      @@jurybalikov7063 that wouldn't solve the problem. I did find that a WritableSignal has an asReadOnly() method, and that was what the equivalent solution was.

  • @ashishshaji
    @ashishshaji Рік тому

    very helpful. Thank you 🙂

  • @allanpassos3970
    @allanpassos3970 Рік тому

    Signal + rxjs is cool. And signal with NGRX. Is a good combination?

    • @deborah_kurata
      @deborah_kurata  Рік тому

      NgRx will still be useful when an application has complex state management. And NgRx has already begun to embrace signals. Check out a summary here: dev.to/this-is-angular/signals-what-this-means-for-ngrx-eho

  • @ivancarmenates84
    @ivancarmenates84 Рік тому

    very good

  • @srivastava-swapnil
    @srivastava-swapnil Рік тому

    Awesome video

  • @nice-vf4rj
    @nice-vf4rj 9 місяців тому

    What happens to the error handling?

  • @meeeh
    @meeeh Рік тому

    Awesome ❤

  • @POLELENDWALI-x7f
    @POLELENDWALI-x7f 10 місяців тому

    Thank ❤

  • @tarquin161234
    @tarquin161234 5 місяців тому

    I don't agree with exposing a network data source as a signal. This is because of the requirement to have an initial value. While that initial value is no problem in the template where it will just re-update upon the network value coming in, there is a problem with effects expecting the network value. For example, if I had a form field, a default value for which would be calculated when it is null; if the calculation (effect) were to use your signal, it would calculate a value using the wrong data (empty array instead of database data). For this reason, I think the whole toSignal paradigm is fundamentally flawed and signal based arrangements should never use such asynchronous sources, which is so limiting to signals that you may as well just use rxjs alone.

  • @respostasimples
    @respostasimples Рік тому

    thanks

  • @viralmoney8619
    @viralmoney8619 Рік тому

    No.. how to use ngrx and signals together with nestjs backend

  • @its_vincesanity
    @its_vincesanity Рік тому

    I got a stroke looking at the VehicleService...
    Why are people using Signals to add a new layer of complexity by mixing it with RxJs for REST request?
    HttpClient get, post, delete etc. will close automatically. There is no need for unsubscribing or creating a RxJS operator mess.
    Then people wonder why they have performance issues...

    • @deborah_kurata
      @deborah_kurata  Рік тому +1

      Since signals are meant for binding to the UI and must be synchronous, and RxJS is for retrieving the data, how would you get the data out of RxJS and into signals?
      And just FYI, see the later answers to the question here: stackoverflow.com/questions/35042929/is-it-necessary-to-unsubscribe-from-observables-created-by-http-methods

  • @arturserglis818
    @arturserglis818 7 місяців тому

    I have "hard head" - why use them? I am happy to have http requests in services and just subscribe in components. That's it. To use signals instead of subjects? - not big difference.

  • @vaibhavchawla2439
    @vaibhavchawla2439 Рік тому

    Wow that was too much knowledge to grasp. I will need to check the code now😅.

    • @deborah_kurata
      @deborah_kurata  Рік тому

      Yep. There is a lot there.
      And note that since recording the video, the Angular team changed "fromObservable" to "toSignal" and "fromSignal" to "toObservable".

  • @ss_GOAT
    @ss_GOAT Рік тому

    Thanks for the video! I tried to do my own project using inspiration from this video. Why is it that I can not import fromObservable? I just get this error message: "'"@angular/core/rxjs-interop"' has no exported member named 'fromObservable'. Did you mean 'toObservable'?"

    • @deborah_kurata
      @deborah_kurata  Рік тому +1

      Thank you for watching!
      Yes, they changed the API. fromObservable 👉 toSignal and fromSignal 👉 toObservable
      I added a NOTE about it in the video notes. I also posted a second video about it. See the next video in the playlist "Changes to Signal and RxJS Interop in Angular RC1" here: ua-cam.com/video/xQIOWkBe5wQ/v-deo.html
      So fromObservable is now toSignal.

    • @ss_GOAT
      @ss_GOAT Рік тому +1

      @@deborah_kurata Thanks so much!

  • @КонстантинХ-у4ф

    очень познавательно, спасибо

  • @yosieshel
    @yosieshel Рік тому

    Hi Deborah,
    I really enjoy and learn so much from your videos!
    wouldn't it be better to modify the vehicle-detail.component.html by using alias at the top like *ngIf="vehicle() as vehicle"?

    • @deborah_kurata
      @deborah_kurata  Рік тому +1

      Thank you!
      AFAIK, the "as" syntax doesn't currently work with signals. But this might make a good future request!

  • @rohitkharche7562
    @rohitkharche7562 Рік тому

    Great content !
    The white vs code theme is still causing my eyes to hurt. 🫥

    • @deborah_kurata
      @deborah_kurata  Рік тому

      Thank you, glad you like the content.
      Yeah, I use the lighter theme because I think the code is easier to see when in a video ... especially on a smaller device.

    • @ashishnayak2666
      @ashishnayak2666 10 місяців тому

      Always a great fannof yours.. do you have any github link for source code you used 🙏