Angular 10 Tutorial #31 - Built-In Pipes in Angular | Angular 10 Tutorial For Beginners

hi friends welcome back to arc tutorials this is angular 10 full tutorial series for absolute beginners in today's episode we will learn about built-in pipes just a recap of the previous episode we started with the mini series on pipes we started with the basic introduction of what are pipes in angular and today we'll learn about the built-in pipes that are available in angular this is part 31 of the angular 10 complete tutorial playlist i am planning around 100 tutorials for you including the live series live project that i am starting very soon once we do the foundation and fundamental concepts make sure that you check out the description box that's where i will be updating the github link which has the notes also going forward when we start the real-time application the application link will also be provided to you all right so on your screen right now uh what you're seeing are the topics that i've already covered in detail along with notes with for absolute beginners make sure that you check them out that i'm sure you will gain knowledge through that also it will help you to have a sequence and continuity to your learning all right so today's episode number 31 learning about built-in pipes all right so what are built-in pipes so what is a pipe right so just quick recap for our viewers who are joining us new on this episode pipes are nothing but which allows us to transform data right into a desired format so basically when you pass some data as an input you can transform it and expect a new expected output desired desired output right so for example angular has these built-in pipes so what they do some of them are very by their name itself you can know lowercase uppercase percent currency date and json so uppercase will convert the string into uppercase lowercase will convert the string into lower all lowercase percent will be able to convert it into a percent currency will give you by default some currency date will have some default format that you can use similarly json right so these are all the built-in pipes that we can use now so let's see that in action because that's where you will actually learn how to use them right so let's get started with some hands-on examples for you all right so uh so let's quickly make some notes um so that way you will have things to refer when you are studying so built in pipes so first built in what is a pipe a pipe is is is used to transform the input data into output desired format right there are built-in pipes right um which are readily available available for us to use directly right so i will not write them now instead what we will do we will start writing practical right so and then we will update that list as an indigo so this is angular built pipes okay so let's get started so what i'm going to do is i'll create a div and everything will be in templates right so whenever you say you're working with um built-in pipes right built-in pipes we use them in templates right now we can use multiple pipes in the template on elements right so remember these points because these are very important now let's do so we already see that we have a username variable right uh or i'll keep it simple for you i'll just lowercase example so i'm just using that string so that you when you're uh studying or when you're practicing it would be easy for you to relate right so how do you write a pipe you write using pipe operator followed by the built-in pipe that's your syntax right so how do you write it you write it like this right so the syntax is you write the element and this can be any element it can be a paragraph it can be a span it can be a div right so any element any element wherever you are rendering the data and mostly it would be a div span or a paragraph so then you will give the string so this will be your string that you want to convert or i should call that as input data right so you will give a input data pipe operator followed by the type of pipe so here you will write name of pipe right name of pipe that you want to provide so in our case we are starting with lower case right so i have already started the application let's see it here so what we'll do so now you see um let's define this string in the component and built-in pipe built-in pipe examples okay so here i am giving a string right so let us give a string and say i am giving all caps now youtube right or i'll say arc tutorials right and what we'll do we'll make it all caps right so i have a variable it is all caps and in my template i have written that make everything lowercase now let's see it in our application it's not showing let's see why app component let's save it case example pipe and followed by lower case okay what are we missing let's check okay so it's here i didn't i did not save it so all right so now we have it here it i'm saying lower case so you see that it is now showing that it has lower case right let's put okay so you have built-in pipes and here you have arc tutorials which is an all lower case because here i have everything in caps now do let's do an example of uppercase and here we'll say youtube learning or let's put all small learning angular framework right now you see this is all in lower case so let's take this and then then put it in the template and copy it into the div okay here and just copy it here put it uppercase and that's it right so now we have the div which is uppercase and lowercase so here now everything is lowercase because it is still lowercase so now i'm going to make it uppercase right now see everything is upper case right so this is a classic example where you might want to have some kind of ah say username right there are examples so built in pipes we just saw lowercase uppercase right so what are some good use cases that you can think of right so whenever you are saving uh usernames or let's say some kind of email address right um so these this is the way you want it to be lower case right the reason being that you don't want to distinguish between uppercase and lowercase for upper names email address etc so this is a place where you can apply a pipe and have everything to be lower case right though user may enter up the upper case or camel case whatever but you will show it like a lower case right so that's one good example i can think of uppercase again let's say you are showing some kind of currency or you know some kind of country code or say airport code you want to show it in uppercase so that's where you can use uppercase right this is some examples that i have seen in past will keep learning will keep i'll keep sharing with you as and when i see something new but this is what i can think of right away let's learn about the other ones now so this was about uppercase and lowercase now let's take something called date example right so let's put date and here we'll put date okay so in the date example let's go here and put date example equal to date dot you can use date dot now for now so this will give you date which is today's date right so let's see that in action now so it is giving november 25 2020 right so today is november 24 25 and it is giving 2020. so this is how uh date works right so it is giving you today's date all right so that being said this was about date now date can have multiple formats okay it can take um date can take multiple options okay we will see that in the next videos coming videos where you can do parameters uh two pipes and we can also do chaining of pipes right we'll see that in the coming episodes for now uh hold on to that thought just do the basic date okay so that was about the basic date now the next one is next is you can say json all right so if you want to print a json object all right so you can say json example equal to right so you can say username and you'll say arc and you would say major is angular and experience right you can say 10 etcetera so basically it's just an object right json object now you want to print it as it is so what you can do is copy this here again for easy purpose i'm just copying if you want you can type and practice that's the best way to learn alrighty so you have json example now you have json data so when you open your browser it's printing you json object right the entire json object it's printing you now where is this useful right so i can tell you i use this especially for debug purpose right so let's say i'm debugging something and i want to quickly see what was the json object entire json object value that is returned i use this um if you are showing some kind of code in your application right you can use this json object etc so this is one cool way of using json the next one is currency right so currency is obviously you know that it can be used for displaying currency data whenever you're dealing with any kind of currency data money a kind of application if you're doing e-commerce etc all right so let me put json like some currency example so let me give a value here i'll say 125 let's save it here let's save it now by default it will show you 125 dollars right so you see here it say it says dollar 125 right so that's because currency by default uses default uses dollar sign right dollar symbol okay i forgot to add it in the date here it's by default if you see it shows month dd and yy right so if you see here um sorry okay so by default um it was showing that and just like date currency can also take parameters like what kind of currency you want to show how to render etcetera right so these are some of the built-in i would say pipes that are available for us to use there is one more percent so let me show you that also real quick um so let me add it here and here you'll say percent save it and go to your component example equal to now let's say zero point some number right so now into so just whatever is the percentage you multiply by 100 it will show you percentage sign so i'm expecting 67.67 so it is rounding off right um because you have just given percentage it will round off uh but you can customize that as well and it would um so we can customize it as well and get that to a data right all right um where is our sorry uh okay let me see where is my okay one second sorry i lost it okay okay so here you are so percentage by default is rounding to nearby integer whole integer right and if you see it is just nothing but the logic is simple multiply by 100 and add a percent that percent symbol that's what it does right here you see it's 68 percent and it is showing that right cool um so that's all i think we are having um uh the examples of built-in pipe today i hope it's clear i hope after this episode you are now master in built-in pipes if you have any doubts let me know in the comments section i'll be more than happy to help you in the next episode we will learn about parameterized pipes where you can send parameters to pipes right so join me in the next episode i look forward for that please do like this video share it comment it and subscribe to my channel also if you really like my work and my tutorials please consider buying me a coffee at buy me a coffee.com slash arc tutorials thank you again so much for joining see you the next episode

Channel: ARC Tutorials

Views: 5,440

Keywords: Angular 10 tutorial for beginners, angular 10 crash course, angular 10 tutorial for beginners step by step, angular 10 tutorials for beginners 2020, angular tutorial 2020, angular 10 full course, angular full example, angular 10 for experienced, angular 10 full tutorial series, angular 10 crud tutorials, angular 10 tutorial for beginners, angular complete tutorial series, angular 10 tutorials, angular full tutorial series, angular 2021 full course, Angular Built-In Pipe tutorial

Id: WHu2JmuM-IM

Length: 15min 56sec (956 seconds)

Published: Wed Nov 25 2020