How Angular Signals and RxJS Work Together

hey 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 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 to that video in the upper right corner here or in the video notes let's run it and see this application in action here is the welcome page yep we're selling Star Wars vehicles click the vehicle list option to see the list of vehicles select a vehicle the code reacts and we see the vehicle detail on the right we also see the movies that this vehicle appeared in cool notice that the list on the left now highlights that selected vehicle making it easy to see which item was selected let's take a look at the code our first step is to ensure we have a version of angular that supports signals open the package.json file and we see that this application is angular v15 signals require V16 or higher let's open a command prompt and we'll use NG update to update our project to the next version NG update at angular CLI at angular core dash dash next this takes a moment to install the new packages so we'll use the magic of video and zoom ahead a bit and we see the next version of angular that it installed was next.7 which is an early version of angular V16 now let's close the terminal and close the package.json file before we can display the list of vehicles we need to retrieve vehicle data so let's start with the vehicle service scrolling down here we see the URL endpoint which uses the public SW API SW for Star Wars we want the list of vehicles we'll ignore the subject for now we'll talk about that in a moment right now we want to focus on retrieving the list of vehicles for display here is our HTTP get to get the list of vehicles to keep things simple we're only getting the first page of vehicles from the API let's open the vehicle.ts file for a moment the swappy API vehicle endpoint gives us this information we get a count link to the next and previous page of data and results which is an array of vehicles and here is the data we get for each vehicle it includes an array of URLs to the endpoint for the films the string array doesn't include the film names themselves we have to go get them going back to the service we map the data to pull just the results which is our array of vehicles but there is an issue with our data not all vehicles have prices since we are selling these vehicles we need prices so this code checks whether there is a price if not it randomly generates a price now looking at the vehicle list component here we obtain the reference to the vehicle style or observable from the vehicle service and in the template we bind the list of vehicles to that observable using an async pipe here this is where signals come in instead of an async pipe we can bind directly to a signal going back to the vehicle list component we want a vehicle signal here that we can bind in our UI we can transform this vehicle observable to a signal here or we can transform it to a signal in the service let's modify the service first let's make our observable private and we see that generate some errors we'll fix those in a moment the only purpose of this observable is to handle the asynchronous HTTP get operation no code outside of the service will need access to that observable instead they'll access our signals so let's declare a signal here after the observable but instead of creating one using the signal Constructor we'll create a signal from our observable and we need to import from observable the automatic import isn't working for me here so let's manually add it at the top of the file we import from observable from at angular core slash rxjs interop scrolling back down we then create our signal from our observable if we hover over the signal we see that it is defined with the correct type signal of vehicle array recall from my prior video on signals that a signal is synchronous and must have a default value so as the second argument from observable will define an empty array as the initial default value hovering over the signal again we now see that it is a signal of vehicle array or never array that's because the compiler can't tell the type of this array we can either add as vehicle to the array like this or strongly type the from observable using the generic parameter let's do that now we have a signal created from our observable from observable does several things it automatically subscribes to and unsubscribes from the observable nice and then every time the observable emits the signal is modified to that emitted value now that our signal is ready let's go back to the vehicle list component we no longer need this observable I'll delete it we can instead Define a signal that references the signal in our service next we need to change the template we can remove the async pipe and bind directly to the signal and don't forget that to read a signal we need to first open the box so to speak and call it scatter since the default value is an empty array let's change the ngf to check for some array elements we'll call Dot length we need to change the ng4 as well open parentheses to read the signal now let's see if it still runs and here is our welcome page click vehicle list and we still see our list of vehicles only now they are bound to a signal instead of an observable with the async pipe what does that give us finer control over change detection which will continue to improve as more signal features are released next let's tackle the action of selecting a vehicle I'll close the console let's follow the vehicle selected action it starts on the template here we have a group of buttons we bind The Click event to a method in the component called unselected and pass in the selected vehicle's name in the component here is that method in that method we call a method in the service and pass in the selected vehicle name looking at the service and scrolling down here is the method that the component calls the method emits a value into our observable subject so that the code can react to that selection action here is the selected vehicle dollar observable notice it is of type vehicle or undefined that's because the find operation returns undefined if the vehicle isn't found on the list scrolling up here is the subject that reacts to our action let's change this subject to a signal I'll delete the subject will instead create another signal down here I'll call it selected vehicle and set it to a new signal using the signal Constructor we'll set a default value of undefined since initially there is no selected vehicle and we need to import signal notice that the type here is now just undefined let's add the generic parameter to strongly type the signal it will be vehicle or undefined if no vehicle is selected next we set the signal in the vehicle selected method scrolling down delete the code that emits the value into the subject will instead set the selected vehicle signal the selected vehicle signal wants the vehicle not the vehicle name so we must first find the vehicle with that passed in name in the vehicle signal I'll declare a constant found vehicle we'll read the Signal's value by calling it scatter since the value is a simple array we use the array find method to find the vehicle with that name we then update the signal to the resulting vehicle using the site method cool now we no longer need the selected vehicle observable scroll up and delete it but notice that we are still using this observable to get the films associated with that vehicle how do we fix that to retrieve the set of films that the vehicle was in we need to call HTTP get to get that data HTTP get is an asynchronous operation so we want to continue to work with observables we can transform our signal into an observable so we can use it in our observable pipeline here instead of the selected vehicle dollar observable we'll call from signal and pass in the name of the signal then we import from signal that's it that's all we have to do to react to the signal and execute an observable pipeline now let's make this observable private just like we did with the vehicle's dollar observable and instead expose it as a signal we again use from observable this time our generic parameters are film array both for the signal and its default value our service now simply exposes three signals all of the observable work is encapsulated in this service now we're ready to fix up our component in the vehicle detail component we'll delete the vehicle dollar observable gone we'll instead reference the signal from the service notice we're referencing the signal not reading the signal so we don't need the extra parentheses here so here is our vehicle signal which is the selected vehicle or undefined if no vehicle was yet selected what about our page title the pipeline is basically using the vehicle to create the appropriate page title hmm that sounds like it could be a computed property let's try it scroll up page title equal computed and we need to import computed then we Define an arrow function with our computed property we read the vehicle signal and if it's not null we assign it to the desired string I'll copy it from here here we need this dot vehicle we need to read the signal and it could be null so let's add a question mark then we can delete the page title observable lastly we add a signal for the reference to the vehicle's films and we can delete the vehicle films observable now we have a nice clean and simple component that provides three signals we are now ready to update our template in the vehicle detail template starting at the top instead of the async pipe we'll bind to our vehicle's signal and don't forget the open and closing parentheses because we're reading the Signal's value basically calling the signals getter then we bind to the page title computed signal again needing the open and closing parentheses scrolling down where we display the films we change from an async pipe to the signal both here in the if statement and here in the ng4 now because our vehicle is now a signal everywhere we refer to vehicle we need to change it to vehicle parent paren I'm going to scroll up and select vehicle dot then press Ctrl shift l this sets a cursor on each occurrence I'll add the opening and closing parentheses and a question mark since the selected vehicle can be undefined press escape to close the cursors I also need to change this one passed in to add cart and now because the vehicle's signal could be undefined I also need to change the add to cart method in the component to handle undefined going back to the component will change the parameter to vehicle or undefined then add a check for undefined before we can try out the vehicle detail we have just a little bit of cleanup to do in the vehicle list component we reference the selected vehicle dollar observable so we can highlight the selected vehicle in the list we'll change that to instead reference the selected vehicle signal and we can delete this observable in the vehicle list template we use NG class to set the style of the active or selected vehicle we'll change that binding remove the async pipe and instead reference our signal and don't forget the opening and closing parentheses to read the signal value now we're ready to try it out our application came up and we have our list of vehicles select one and it appears in the detail with its list of films pick another one and it displays its detail it still works looking back at our components we now have clearly defined signals identifying the data we want to track we bind directly to those signals and in the service we encapsulate our observables and expose signals for easy access by the component we create a signal from an observable using from observable and don't forget to Define an appropriate default value to react to a signal in an observable pipeline use from signal as you can see observables and signals play well together if you have any questions or would like to see a video on another signal topic please post those questions or suggestions in the comments thanks for watching and don't forget to like And subscribe

Channel: Deborah Kurata

Views: 5,192

Keywords: Angular, signals, Best practices, Angular signals, Signals in Angular, Demo, Signal Tutorial, Angular v16, RxJS, RxJS and Signals, Signals and RxJS

Id: 5SD995zKvbk

Length: 16min 15sec (975 seconds)

Published: Tue Apr 11 2023