Top 7 RxJS Concepts for Angular Developers

Key Takeaways

rxjs is a huge library with a very steep learning curve in this episode I'm going to talk about a few key Concepts that are specific to angular Firebase developers I believe it's best to focus on what you actually need to learn rather than try to master the entire rxjs library to do this I've created a simple component that uses the angular Fire 2 package to retrieve cats and dogs from Firebase cats and dogs each have their own collection and there's another collection for humans which represent the owner of a given pet your component should look something like this we import the angular fire database and then inject it in the Constructor when using rxjs and angular you only import the methods and classes that you need in rxjs there are two types of methods static and instance in this first example we use an instance method combine latest so we create two instances of an observable then we can use that operator on the observable instance itself notice how the method was imported from ad SL operator the operator directory contains all of the instance methods it's not important to know at this point but using combined latest will result in an observable array of two strings now let's accomplish the same thing using a static method to obtain the static method we import from the add/ observable directory instead of calling the method on an instance we call it on the observable class itself and then we pass the two observables to it as arguments in rxjs some methods are only instance others are only static and some overlap for both now let's talk about subscriptions that's how you actually extract data from observables there are two main ways to do this in angular you can either subscribe in the component typescript or in the component HTML in this example we will subscribe to cats in the HTML and dogs in the component typescript notice how cats are a Firebase list observable and dogs are just a regular array calling DB list will return in observable from the Firebase database for cats we just keep it as is but for dogs we call subscribe which will cause the observable to emit an array of dogs that we can set as the variable on this component to subscribe to cats we do this in the template Itself by using the async pipe provided by angular under the hood this is subscribing to the observable just like we did in the typescript for dogs it's generally preferred to use the async pipe when possible because it will also unsubscribe to the observable to prevent memory leaks and it just results in Plus Code when we iterate over dogs notice we're not using the async pipe since that was already unwrapped in the component if we go into the app we can see the results are identical for both collections when you create subscriptions it's a good practice to unsubscribe when that data is no longer needed if you use the async pipe like we did with cats this will happen automatically but with dogs we built the subscription manually so we want to end that subscription when the component's no longer in use we can do this by setting the subscription to its own variable then listen for the on destroy life cycle hook and call unsubscribe the next concept I want to talk about is mapping observables this allows you to transform Data before you subscribe to it the first thing we'll do is transform a list observable of cats into a number based on the length of that collection so first we obtain the list observable from Firebase then we call map and that will emit an array which we can just call length on and that'll return a number representing the length of that collection in the next example we take a dog as an object observable then map its name just to a single string as you can see the map operator is very powerful you can use it to transform any type of asynchronous data into the format that you want going back to the HTML we can just call these observables with the async pipe and get their mapped values back going back into the app we can see the observable is transformed into a string and a number as expected now let's talk about the switch map operator this allows us to handle data relationships that exist between two independent streams a common example in Firebase is when you need the oth observable to emit the current user before you can query some other data we're going to simulate that situation here by taking an object observable of a human then use the name from that observable to query the pets owned by that human so switch map is kind of like subscribing to the first observable and then using that data to return a second observable so we set this whole thing equal to the dogs variable then iterate over it in the template like normal with the async pipe back in the app we can see the dogs observable only emits the two dogs that match this human owner name in some cases you might find yourself needing to combine two observables into one rxjs has several different combination operators but we'll just be focusing on combine latest for this example we will pull two different object observables from Firebase and then combine them into a new observable called Animals in this case I used the static method from the observable class to pass both of these object observables as arguments this results in a observable with an array that we can iterate over in the template if we go back to the app we can see we have one cat and one dog in an array even though they come from completely different collections in Firebase the final topic I want to cover is about Behavior subjects which allow us to share current data throughout an angular app I'll be going over this very quickly so I also recommend checking out the JavaScript evangelist and his video on Behavior subjects check out the link in the description a behavior subject is just an observable that we can push data to it also has a concept of a current value which is very useful for real-time app development because you generally want the most up-to-date information displayed in the app in this example we're going to create a new variable called current dog which is a behavior subject and it gets updated whenever you click on the dog's image this may seem trivial in this example but when you use a behavior subject in an angular service you can then share current data throughout the application we push new data to the behavior subject by calling next and that will update any observers throughout the app in the template we allow the user to change the current dog or the value of the behavior subject by clicking on a dog's image then we unwrap the behavior subject with the async pipe just like we with any other observable but also notice how we use the question mark before calling any attributes cuz the default value is null so we don't want to call an attribute that doesn't exist now if we go back into the app we can see when we click on a dog's image it updates the current dog with that [Music] data that's it for my top seven rxjs patterns for angular Firebase developers if this video helped you please like And subscribe and if you want to support the channel consider becoming a pro member at angular firebase.com thanks for watching and I'll see you next [Music] time