Angular 9 Tutorial For Beginners #27 - Custom Pipes

hi friends welcome back to our tutorials we are continuing with our angular 9 full tutorial series in today's episode we are going to learn about custom pipes what are custom pipes how do we generate them how do we create them how do we use them what are the different use cases that we can use around them why do we need custom pipes at first place all about that in this tutorial welcome back my name is shredder I have over 10 years of experience as a full-stack developer I bring knowledge on modern tech stack as well as back in technologies I'm here to share my knowledge with you all and also to learn from you all during the course of this tutorial series if you have any doubts any queries feel free to ask them in the comment section below I will be happy to help you for free I'm putting in a lot of hard work in compiling this tutorials so please support me by liking the video and subscribing to my channel thank you in advance so far in the angular 9 full tutorial series we have seen around 25 tutorials starting from the basic angular introduction how to upgrade to CLI 2 modules decorators components directives data binding we have seen pipes from last few episodes we have learnt about built-in pipes parameterizing her pipes we have seen how to chain pipes and today's episode is dedicated to custom pipes so just a quick recap what are pipes pipes are used to transform the data pipes will take data input and we can convert it into a desired format right so that's what pipes are used for we have seen there are different types of pipes and operations there are built in pipes there are parameterize pipes we can chain pipes today we are going to learn about custom pipes so what are custom pipes custom pipes we can generate custom pipes pipes in our angular application pipes custom pipes will give us flexibility and power to our angular application that we can write custom logic to transform the data the way we want in our application right so we can generate the custom pipe using CLI tool the command we will run is ng generate pipe followed by the name of the pipe that you want to mention whenever if you are creating the pipe by yourself make sure that you need to add that into the module where you are actually gonna use it right thankfully when you generate it using CLI it will automatically update the app dot module now we need to import pipe and pipe transform modules from the core library that is angular slash core and then you will see that the pipes are declared with a decorator called at the rate pipe we also provide a selector name through which we will use it use the pipe in our angular application so these are the steps you can say or little theory behind what custom pipes are and how they are going to use it so let's get started with some hands-on example to learn how to use it so this is my app component first what we'll do is we'll generate generate a quick pipe and let's call it bold pipe or even better let's call it highlight pipe right so you can just give the name here that you want in my case I'm just giving a name called ng generate pipe highlight so this will generate the pipe for us you can see here it has generated the pipe the first two things is create which is the pipe the next line says update happened to this particular file which is our module dot PS file that's what we learned here that first we will generate using ng generate pipe highlight and after that we need to import it import it into the module so that is what angular CLI has already done which is updating it into the app dot module dot ts file now let's go ahead and look into what is there in the pipe so click on highlight or the name of the pipe that you have given here you'll see import pipe and pipe transform from angular core so these are the two required interfaces that we have to import from the core library pipe and pipe transform after that we are mentioning the decorator pipe and we are mentioning the selector name as highlight so using the name of that using this name we will refer our pipe all in the application then we are writing implements pipe transform and we have to implement the transform method so it takes two values value and arguments right so here this is what is used to pass the parameters like in date in currency we have seen that it takes multiple parameters so we can pass the parameters into this particular transform method let's do that we'll see that how to do that now and here we'll pass the return type of it now let's see that in action for that first let's create a simple object let's call it here first name and say chain toy right and then we are also going to call city say New York right so this is what we have given a simple object it has a first name and city name now similarly here we can give city code and why okay so this is a single user object let's use this to print it in our app component first and I'm going to go here say example of custom bye okay so here we'll write a div and we will do data binding right so first is we'll use user dot city okay so this should print us the name of the city right let's see that in our application so it's showing New York right so now let's write a simple pipe now first right so here we are going to make this string and here we are saying that we will pass the argument as string which is sitting and the return-type is also strength right nothing fancy just a simple so here you can say city name plus city right so this will return you the new string which will have city name is : this thing so we have to use this so copy this name of the pipe that you have used go to your component define the pipe operator call the pipe and then pass the value okay so now go back and it's a city name is New York right however we are just passing city name but it is giving us updated highlight or rather transformed data which is city name : City right this is one example where you have a string you take that string you manipulate you can also add I can say so you see I am NOT going to add so you can add conditions like if city code is equal to NY return Apple City the Big Apple the Big Apple right so basically what I'm trying to show here is that you can you can do manipulations like if-else conditions with based on the input data that you have got from the pipe right and then you can return this else right so and you can return else you can return garden city just an example of it so you see it's Garden City you can if it's NY do this if it's not do this so we can basically use this transform method to change anything with respect to strings all right now I'm going to take a little complex example and going to turn it into even let's change it okay so now what I'm going to do is I'm saying this can return anything now what I want is let's display that first here and let's bind it right to div I am going to do inner HTML equal to so now I am using binding right not interpolation remember so here I have closed it right so let's remove this because it doesn't do anything now we will again put it back let's first see the same so it shows New York right inside the div in a rest Yemen now let's go to pipe and now we will transform it so what I want to show is I want to show this as a highlighted right I want to return bold so I will say pole + city so now the value will be bold or even better I'll say div style equal to background - color ffcc right so I'm giving a background color to this and I'll close the div right so this is a simple div which has a background color the city name but if you see it now it doesn't apply let's go take this pipe and apply it on a component and we will say highlight past the parameter which is user to hot city okay okay so it still doesn't highlight it right so let's go ahead now fix that in the pipe we are taking the city and rittany div style background color equal to this and city the reason it won't is because it but if you see the code so if you see the code it is div right because it's ignoring the style or the div so for that we will do Dom sanitizer so we need something called Dom sanitizer and from we will import it from the platform browser and we will say Dom sanitizer right and we will create a constructor I wait okay and we are just going to call this sanitizer and here I'm going to say this dot sanitizer dot bypass trust Security HTML and just pass this HTML right so using the sanitizer Dom sanitizer I'm saying bypass security and Trust the HTML and go ahead and inject it so now you see there's a background color yellow right so this is how but this now let's see if I want to use it again for some loop right let's create a loop now for that so I'm going to extend this and create array offered right so how beautifully this works see so this is the beauty of it that when you apply you can keep using it for any elements you want and that's what makes it so powerful that whenever you have chained to a right I'm going to print some more names right so here you have the user City and we can do kind of a loop so here I'm going to say you will and Li and here I'm going to say ng for equal to let user of users and here I'm going to going to put it like this right so this will loop all the users now and let's change some user ID say Jane I call it Johnson I call it mark so I have some values and I'm going to pass some values here okay and here let's make an object right so we have an array of users which we are looping and printing them here using the ng for so now you see it is highlighting all the three so now I want to put a condition that highlight only if it is New York right so if city code I'm going to make this city code if city code is equal to equal to NY or city core equal to equal to n j return background color right else else give them a green color right and here just giving a light green color okay so now we will make the city code right so our I can pass two parameters right you can pass that so let's see this first so now you see this is all green because it says it didn't match the criteria let's see here we are passing city name that's why so here I am passing city code now we'll see two are yellow one is green right so this is how we can use filter custom pipe to do multiple operations so we can see here that we don't have to do much effort so we can define a filter criteria in a way we want it we can change this free string we can change the background we can basically convert the output into any desired format that we want and that is the beauty of highlight right so some of the use case examples if I have to give you so think of it like this I will give you some use cases where you can try yourself and so on try your hands-on on these examples of custom pipes right so you can try so try something like first formatting a phone number or highlighting the search result search result keyword or highlighting tax return or percentage so you can basically these are some of the real-time use cases where you will use a custom pipe or I have used in past so I can tell you definitely this is something that you can use to format it so try out these examples let me know if you have any doubts whether you are able to do it do you have any issues let me know I'll be happy to help you alright so that brings us to the end of pipes concept and some of the hands-on experience we did that was really nice it was fun in the next episode that starting I'm starting very important feature on angular which is routing I am going to bring around 1012 episodes on routing which we're in I will cover all the details about it so stay tuned for it give a thumbs up to this video if you liked it don't forget to subscribe to my channel to keep supporting and encouraging me thank you so much we'll start the next thing which is routing in angular in the next episode stay tuned thank you

Channel: ARCTutorials

Views: 26,845

Keywords: Angular Tutorials Custom Pipes, Angular 9 Tutorials Custom Pipes, Angular 9 Custom Pipes, Angular Custom Pipes tutorials, Angular Custom Pipes examples, Angular 9 Custom Pipes examples, Angular 9 tutorial for beginners, angular 9 crash course, angular 9 tutorial for beginners step by step, angular tutorial for beginners 2020, angular tutorial 2020, arc tutorial angular, angular code examples, angular for freshers

Id: 72guI_RdqUo

Length: 18min 3sec (1083 seconds)

Published: Sat May 30 2020