How Angular Signals and RxJS Work Together

Поделиться
HTML-код
  • Опубликовано: 16 июн 2024
  • Common questions I hear when talking about signals involve RxJS.
    "Do signals replace RxJS?" "Is RxJS going away?" "How do signals work with RxJS?"
    To answer these questions, let's take an Angular application that uses RxJS and modify it to include signals. We'll look at creating signals from Observables, and binding to those signals. And we examine techniques for reacting to a signal in an Observable pipeline.
    This video assumes you have a basic knowledge of signals, the new feature in Angular v16. Signals provide more reactivity and finer control over change detection. If you aren't familiar with signals, consider watching my introductory signals video first. You can find the link below.
    NOTE: The Angular team announced that they will be changing (possibly later this week):
    fromObservable 👉 toSignal
    fromSignal 👉 toObservable
    Links
    Angular Signals: What, Why, and How?: • Angular Signals: What?...
    Code example: github.com/DeborahK/Angular-S...
    Content
    00:00 How do signals work with RxJS?
    00:50 Sample Angular + RxJS application in action
    01:23 Updating to Angular v16 next
    02:20 Retrieving data with RxJS
    04:00 Binding to signals
    04:07 Creating a signal from an Observable
    06:07 What does fromObservable() do?
    06:28 Binding to signal containing the retrieve data
    07:09 Running to validate our changes
    07:37 Reacting to user actions with a signal (instead of a Subject)
    10:08 Reacting to a signal in an Observable pipeline using fromSignal
    11:25 Referencing a signal in a component
    11:53 Using computed signals
    12:56 Binding to signals
    15:04 Running to validate our changes
    15:23 Clearly defining signals for data we want tracked
    15:56 Observables and Signals play well together
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    😊About Me
    Hey! I'm Deborah Kurata
    I'm a software developer and RUclips content creator. I speak at conferences such as VS Live and ng-conf. I write articles for freeCodeCamp. And I'm a Pluralsight author with courses in the top 10 most popular (out of 10,000+) over the past 5 years. For my work in support of software developers, I've been recognized with the Microsoft Most Valuable Professional (MVP) award, and I'm a Google Developer Expert (GDE).
    Contact me on Twitter: / deborahkurata
    Find my Pluralsight courses: www.pluralsight.com/profile/a...
    Access my freeCodeCamp articles: www.freecodecamp.org/news/aut...
    View my RUclips content: / @deborah_kurata
    ▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬▬
    #angular #signals #bestpractices #angularsignals #signalsinangular #demo #signaltutorial #angular16 #rxjsandsignals #signalsandrxjs
  • НаукаНаука

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

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

    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.

    •  11 месяцев назад +2

      I agree. Her narrative skill is TOP

    •  11 месяцев назад +1

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

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

      I agree.

    • @elizabeth_ford
      @elizabeth_ford 4 месяца назад

      She sounds like a robot.

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

    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  7 месяцев назад +1

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

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

    You're brilliant as always. Thanks Deborah!

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

  • @ianvink
    @ianvink Год назад +2

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

  • @rkumar.lnct24
    @rkumar.lnct24 7 месяцев назад +4

    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.

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

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

    Marvelous! I cannot wait to share with my team!

  • @justflying5323
    @justflying5323 8 месяцев назад

    Great Video. All my questions got answered.

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

    This was AMAZING! Thank you so much!

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

    Deborah, you are sooo good! Thank-you

    • @deborah_kurata
      @deborah_kurata  8 месяцев назад

      That is so kind. Thank you! 🙏🏼

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

    Great content as usual!

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

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

      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.

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

    Great explanation, thank you! 👏

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

    Amazing videos like always 😃

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

      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 Месяц назад

      Thanks to both of you !

  • @user-nv8ie5tq8t
    @user-nv8ie5tq8t 4 месяца назад

    youre the best teacher ever

    • @deborah_kurata
      @deborah_kurata  4 месяца назад

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

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

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

    Nice and perfect. thank you.

  • @erfanfarhadi
    @erfanfarhadi 11 месяцев назад +1

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

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

    very helpful. Thank you 🙂

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

    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  10 месяцев назад +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.

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

    Awesome video

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

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

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

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

    Awesome ❤

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

  • @ivancarmenates84
    @ivancarmenates84 8 месяцев назад

    very good

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

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

  • @user-ke9bg6my3h
    @user-ke9bg6my3h 5 месяцев назад

    Thank ❤

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

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

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

      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.

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

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

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

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

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

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

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

      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

  • @user-rb9oz9uh8c
    @user-rb9oz9uh8c Год назад

    some of the methods that was deleted has an exception mechanism, how to apply the exception mechanism when using signals? or how you can generate an error message when there is an exception when using signals
    ?

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

      As you know, signals are currently in developer preview and this is one area where "best practices" are still being determined/worked on.
      I tried a bunch of things for handling errors. My trials are here: stackblitz.com/@DeborahK/collections/angular-signal-error-handling-research
      From that research, it seems that the best solution is to create a wrapper object that holds the data and any error. That way the component gets the error information when an error occurs.

    • @user-rb9oz9uh8c
      @user-rb9oz9uh8c Год назад

      @@deborah_kurata +1 for Angular Signals + RxJS with error service, I love it the way you do it. Thank you very much!

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

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

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

      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.

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

    thanks

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

    What happens to the error handling?

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

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

  • @maneshwar3468
    @maneshwar3468 4 месяца назад

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

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

  • @tarquin161234
    @tarquin161234 21 день назад

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

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

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

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

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

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

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

    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.

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

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

  • @user-hs9uf8fg5k
    @user-hs9uf8fg5k Год назад

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

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

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

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

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

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