Angular Rxjs: Use Map Operator & Async Pipe

hello everybody in this video we will see how to get data from a service that returns an observable type we will display the data in a template and progressively we will update our logic to use an rxjs map operator and an angular a sync pipe so let's get started at first let's see what we have in the vs code of our example we have an empty component source code and if you go into the template we will see that we have just a comment here with the name code capital i will explain later why we need this and let's go also into this service i will collapse everything and what we can see is that we have only one method a get method which returns an observable type of this interface country response model so let's follow this model we have the name top level domain alpha 2 code alpha 3 code and so on so forth let's close this and expand this method we have some hard coded data and as we can see we have an array and this array has several objects this object this object and other object and many other data in this file in order to convert this array into an observable we use the off method and if we open this we can see that we have the name top level domain alpha to code alpha 3 code and so on and so forth so we have all the properties that this interface describes the idea is to get all of the data all of these data and present them into the template in the upcoming html in this format name we want to present the code into parentheses das and the capital so let's start the first step is to use the country service into the component to inject into the component so i will do like private and inject the country service we can then use the country service into the unit method get as we can see this returns an observable type and what we have to do whenever we have an observable type we have to subscribe so subscribe and get the date the data which are all the countries and now we have to manipulate these countries array which is a kind response model to another type so that we can use it in our template for this example apart from the county response model i have already created the country model let's have them side by side on the left side we have the country model and on the right side we have the county response model so let's think the following that the country response model this one is the structure that we get from the server and on the left side we have the structure that we want to present in our site in the client so we have the server response and we also have the client data structure we have the client model so we need to convert the data from this response to this type so let's do this i will close the can response model i will close the country model and let work in the component source code i said the countries is a counterresponse model and it's an array so how can we convert this using a map javascript map function and each item is a country and i want each country to convert it into a new different thing so i want the name using the country name i'm going to have the capital and for the capital i will use the country capital and also i need to have the code but this time i have to decide which code we have the alpha to code and alpha 3 code let's go with alpha to code this is the structure that we want to get and of course we want to present this array the new array we want to present it into the template to do so i will create here the countries of country model array and let's assign this array into this one so we have the countries and now let's try to present this into the template i will start with assembly ul and they're going to have an iteration for each ally item ng4 led country of countries and inside here i said we're going to have this structure i will copy this and i will i will interpolate the country name here inside here in the parenthesis i will interpolate the candle code and also i will interpolate the country capital nice so let's go to the browser and see what we have it seems that everything went well we have afghanistan with af and this is the capital and so on and so forth nice so let's go into the code and let's ask ourselves is this code clean not that much so let's make it cleaner for this purpose i will create a method the private one and i will name it to client this method will be responsible to convert a server response to a client data structure and the response of this method will be a country model this method will accept a countries and this country will be a country response model array and this should be the conversion so let's return this now have the method to client and we can use it here this to client and i will provide the countries nice now it seems better and it's more readable the code let's go into the template the browser and this is what we have awesome now the code is more readable but since we have here the subscribe we definitely need to unsubscribe so let's create also account subscription and the type of this one is a subscription and of course we have to use the on destroy hook implement it let's move it here and in this place we will unsubscribe discount the subscription unsubscribe nice again let's go to the browser everything works well if we check the code we will see that now it's okay it's safe we have the unsubscribe but it's not that much elegant so we have too much code into the component and we don't like it that much so if this component requires to present more data we need to have more code here and the code will become flaky and hard to maintain let's refactor this code and what we're going to do is to use a map operator a map rxjs operator i will delete this one and we don't need to have the subscription we don't need to have the on destroy and definitely would not need to have this nor the undestroyed hook and what we have to do is to use the pipe and then the map which is an rxjs operator and the argument of this map function will be the countries and we have to return now the country model like we have here to client so let's use it let's reuse this method this to client and i will provide these countries and of course somehow we need to use this class property and assign it here so let's do so these dot countries equals to this one and what's the problem the problem is that this retention observable but this is not an observable so let's convert this observable of country model and in order to be aligned with angular style guide let's also here add the dollar sign and now let's go to the template and change this to dollar and also you use the sync pipe nice so let's go to the browser and everything works well let's go to the source code and as we can see we don't have the on destroyer hook we don't have the subscription nor the subscription using the sync pipe is much better because we don't care we don't have to care about subscribing or are subscribing so let's improve the code even more it's not a good idea to have the data manipulation into the component so we will create a new service and i will name it country mapper and this service will be responsible to convert the data from a server response to a client structure to client interface so let's create this nggs from the service and i will name it as hell the country mapper in the country mapper service let's keep this open i remove this method the method to client so cut it from here and paste it here and of course we don't need to have it private we need to have the public one import this and also import the country model i don't care about the constructor and now let's inject the countrymapper service into our component so private country mapper service and of course we have to use it this country mapper service to client nice so let's go to the browser and we can see that everything works fine now in terms of clean code it's it's cleaner we have a single responsibility each one each service is responsible to do different things the country service is responsible to provide us the data the countries mother service is responsible to the conversions and the component is responsible to get the data and provide it into the template we can improve this even more and the idea would be the component to get the data from a service and me as a component i want to get to have my data ready to present them and we will simply do the following we will delete this service from here and we will move it into the counter service so let's add the constructor let's inject it here and now we'll get this pipe and we will move it at the end of the off method here let's import everything and of course now have to change this this one wondrous won't return the county response model but it will return the country model like this awesome so let's go back to the component and now as we can see we have a very very minimal component the only thing that does is that it gets data from a service we keep them into an observable and we're doing the iteration using the sync pipe let's go to the browser and this is what we have everything works fine and let's see once more what we have here again in terms of single responsibility and separation of concerns this code is very elegant we have the component which is responsible to do one thing we have the service which is responsible to get the data and we have another service which is responsible to convert our data so that was it thanks for watching

Channel: Code Shots With Profanis

Views: 1,538

Rating: 5 out of 5

Keywords: Angular rxjs operators, Rxjs angular, angular, angular async pipe, angular map observable, angular tutorial, async pipe, data manipulation, learn the angular map operator, rxjs map, unsubscribe a subscriber, unsubscribe an observable, unsubscribe an observer, use the map with the async pipe, what is angular async pipe, what is angular rxjs map, angular tutorial for beginners

Id: sJjijzJw3ZQ

Length: 14min 12sec (852 seconds)

Published: Sun Apr 11 2021