pipes in angular 13 | create custom pipes in angular | passing parameter | angular 13 tutorial #15

hello everyone welcome to nera techies in this video i am going to explain pipes in angular application basically pipes are used for the data binding when we are binding the data if you want to change the existing form we can use the pipes so it's similar to in shisha we have the extension type the same way it's working in angular application so in angular we have different types of pipes like first one is inbuilt pipes and another one is custom pipes so angular providing a year number of inbuilt pipes the normal pipe currency pipe decimal day percentage slice json so we can see everything in the details with an example and also i am going to explain how we can pass some parameters to the pipes and how to use uh two pipes or else more than one pipe in the particular component at the end i am going to explain how to create your own custom pipe with the parameters so we can see everything in the details first let me go to my code if you see in the code i am just binded on text it's a title if you see in the output it's welcome to nigeria techies using the text i am going to explain this normal pipe now i am going to change the value into uppercase okay for using the pipe syntax is the symbol only and after that we have to specify our pipe name here i am going to use my pipe name is uppercase see now the value completely changed into uppercase the same way we can use the lowercase also instead of uppercase i am going to change the pipe name is lower that's it see the output the complete text changed into small returns okay this is the normal pipe and now i am going to explain currency pipe so currency pipe first let me declare some amount based on that we can bind so amount is 0.122 so basically this is my amount i want to bind so let me have one more tag here the same interpolation concept so if i'm binding defaultly the value is coming now i am going to include the currency pipe if you see now the dollar symbol is included and the value also in the currency format so now it's binded the usd the dollar symbol so if you want uh bind our indian currency mean we need to provide one input as the parameter so for providing any input we have to use this colon and our indian currency is inr so we can check now so now it's a indian currency name similar way we can fast any countries currency we can bind in our ui so let me pass the europe okay fine it's added in this way we have to use the currency pipe and next i'm going to move for the decimal pipe so decimal pipe also we can use the same value so the decimal pipe basically it's a numeric type so number if i'm providing number the default value get binded this comma is included but if i want to bind after that dot i want by only one digit means i supposed to pass the input here so you know only one digit is coming if suppose i want two digit mains so in that way we can round up our value so this is all about the decimal pipe now let me move on the date pipe so first i am going to declare one value it's current date equal to new data so basically it will provide the current date value so let me bind this one also not the h2 tag see this is actually our current date the tuesday march 1st and our time the gmt indian standard time so now i won't get the date only so i can use the date pipe here now so now see the date only coming but if i want uh bind the date in the specific format like first date then month after that i want year mean i have to provide the input as the format so date month and year so you know the complete year is coming so in case the company here is not required this this 22 only is enough means i have to provide true way that's it okay instead of zero three i want the month name then i have to provide one more year so to see the march 1st and 2022 so in that way we can bind any format of our date value or else the timings also we can bind so now let me move on the percentage pipe so i am going to declare one more variable personally data 0.098 so this is my value i am going to create one more element here i am going to add the percentage pipe the name is person driven like see just 10 percentage so in case if i am providing 198 say 20 percentage okay 44 percentage so whatever input you are providing it's just a converting into percentage and in order to binding in our angular template so now let me move on the slice pipe basically slice five we haven't text if you want to cut the specific area based on the index we can fetch the data that's what we are using the slice pipe so let me explain here slice i want one two five okay fine see now one two five actually one take from zero to five so welcome optico is coming uh if i'm giving two more okay just a welcome is coming so in case if i'm providing 8 to 11 just it's taking the true so in that way we can slice uh any data at the end i am going to explain the json pipe for that i am going to declare one json object first so name no miss the field and the value is nikira okay so let me try to bind if i'm not providing the pipe means it is just binding the object object now i am going to use the json pipe okay see now so whatever values in the object it's binding now i'm going to explain how we can use multiple pipes in the same component so already i'm adding the json pipe here i'm going to add one more pipe uppercase so see now it's binded in the object format i mean the json object and also it changed into the uppercase so this is all about the inbuilt pipes in angular application now i am going to create one custom pipe so we can achieve the same from suavelty uh using this custom pipes for creating the custom pipe we have the cla command so ng generate short form of pipe is pipe i'm going to create this pipe in one folder and pipe sgd true iemr so converting sgd amount into indian currency value so look like our pipes is generated so inside the pipe folder one spec file was there it's not required let me delete it first and so this is our actual pipe so in the top of that we have the pipe decorator and the name is sgd to inr so this name value basically we can use in our binding time so let me create one more element so i'm going to use this is for amount okay done so if i see now there is nothing binded because uh my pipe actually returning null so in case if i'm providing just 200 so it will defaultly binding of the 200. basically we are providing value is 2 000.12 but it's binding 200 because uh me not handled anything in our pipe we are just retaining 200 that's what it's binding as your 200 okay so already i'm passing some values whatever your value we are passing it's coming in or the value side so also we know our input is in number format so our input is number so whatever value is coming just i am trying to pass return it now see so we passed to two thousand point one double two so the value is returned that's it so if i am applying any logics here so if i'm trying to multiply into two so it will work accordingly so basically i created this pipe is for converting std value into inr so we all know the value is gd through a not today currency rate so it will be varying for any day so 55.58 so this is the actual value of indian money so as of now i am just a hard coded but it's this value will be changed instantly so let me make it is the parameter so if you want to pass any parameter we can this argument type so number and let me declare it constant and write equal to prg's now we can pass it here and let me go here so here i'm going to pass the input first i'm trying to give just a three for testing purpose so see now so the whatever value i passed it's coming based on that so now i'm trying to give the real time value as the input let me go here yes gd right so see now the value is coming very perfectly and i am trying to change the values and start moving like this and just to give true so see uh it's showing the exact value of sgd amount so as of now we have just hard coded this value 55.58 and we are passing it in the real time basically we will get this data in the any of the apa for implementing the real time implementation so if you think do we have any other option yes the same functionality we can achieve through the function also so comparing to the creating any function these pipes are very easy and simple to use so this is all about the pipes still if you have any doubts or clarifications please post in my comment box and also please don't forget to subscribe my channel in my next video i am going to explain forms in angular application thank you thanks for watching

Channel: Nihira Techiees

Views: 3,676

Keywords: nihira techiees, what is pipes in angular, how to use pipes, types of pipes, how to create custom pipe, currency pipe, decimal pipe, percentage pipe, basics of pipes, advance pipes, json pipe, date pipe, slice pipe, how to format date in angular, how to change value to upper case in angular, how to implement custom pipes in angular 13, how to pass parameter in pipes, how to use multiple pipes in angular, how to format data in data binding, when we can use pipe in angular

Id: U1uIO-869QI

Length: 15min 48sec (948 seconds)

Published: Tue Mar 01 2022