How Angular Signals and RxJS Work Together

Поделиться
HTML-код
  • Опубликовано: 27 ноя 2024

Комментарии • 127

  • @richnimbu
    @richnimbu Год назад +53

    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.

  • @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.

  • @TampaCEO
    @TampaCEO Год назад +10

    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! 😊

  • @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!!

  • @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!

  • @davidjustice2323
    @davidjustice2323 Год назад +5

    You're brilliant as always. Thanks Deborah!

  • @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.

  • @XinWongDigital
    @XinWongDigital 11 месяцев назад +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: ruclips.net/video/xQIOWkBe5wQ/видео.html

    • @WebCodeSolutions-ob3pf
      @WebCodeSolutions-ob3pf 6 месяцев назад

      Thanks to both of you !

  • @everyonesview
    @everyonesview 4 месяца назад +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.

  • @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!

  • @nabenzanol
    @nabenzanol 22 дня назад

    You are amazing ! so underrated ! Hope you great successs

  • @dixavier27
    @dixavier27 5 месяцев назад

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

  • @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!

  • @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!

  • @dougl765
    @dougl765 Год назад

    Deborah, you are sooo good! Thank-you

  • @justflying5323
    @justflying5323 Год назад

    Great Video. All my questions got answered.

  • @erfanfarhadi
    @erfanfarhadi Год назад +1

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

  • @fieryscorpion
    @fieryscorpion 11 месяцев назад

    This was AMAZING! Thank you so much!

  • @Edmundo_Rivero
    @Edmundo_Rivero 5 месяцев назад

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

    • @deborah_kurata
      @deborah_kurata  5 месяцев назад +1

      Have you seen my latest? ruclips.net/video/rHQa4SpekaA/видео.html

  • @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.

  • @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.

  • @erics.a.3875
    @erics.a.3875 11 месяцев назад

    Great content as usual!

  • @Erril_Ferndal
    @Erril_Ferndal 7 месяцев назад

    Amazing videos like always 😃

  • @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?

  • @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.

  • @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.

  • @pedro.lizarraga
    @pedro.lizarraga Год назад

    Great explanation, thank you! 👏

  • @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.

  • @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: ruclips.net/video/a6XKMj-WRhM/видео.html

    • @souhaibkhadraoui9898
      @souhaibkhadraoui9898 Год назад +1

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

  • @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 🤩

  • @maneshwam
    @maneshwam 10 месяцев назад

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

    • @deborah_kurata
      @deborah_kurata  10 месяцев назад +1

      Yes, that's correct. It's a bummer that we can't "update" a YT video. But I did add this: ruclips.net/video/xQIOWkBe5wQ/видео.html

  • @davoodsoleimani9482
    @davoodsoleimani9482 10 месяцев назад

    Nice and perfect. thank you.

  • @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.

  • @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?

  • @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 4 месяца назад

      @@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.

  • @onetwothree123-
    @onetwothree123- 2 месяца назад

    Thank you Deborah! I learned a lot from you 🙏

    • @deborah_kurata
      @deborah_kurata  Месяц назад

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

  • @ashishshaji
    @ashishshaji Год назад

    very helpful. Thank you 🙂

  • @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 9 месяцев назад

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

    • @mikemarkovich69
      @mikemarkovich69 9 месяцев назад

      @@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.

  • @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 😍

  • @srivastava-swapnil
    @srivastava-swapnil Год назад

    Awesome video

  • @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

  • @nice-vf4rj
    @nice-vf4rj 9 месяцев назад

    What happens to the error handling?

  • @POLELENDWALI-x7f
    @POLELENDWALI-x7f 10 месяцев назад

    Thank ❤

  • @meeeh
    @meeeh Год назад

    Awesome ❤

  • @respostasimples
    @respostasimples Год назад

    thanks

  • @tarquin161234
    @tarquin161234 6 месяцев назад

    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.

  • @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: ruclips.net/video/xQIOWkBe5wQ/видео.html
      So fromObservable is now toSignal.

    • @ss_GOAT
      @ss_GOAT Год назад +1

      @@deborah_kurata Thanks so much!

  • @КонстантинХ-у4ф
    @КонстантинХ-у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 🙏