Introduction to Angular Pipes
Okay guys, in this video let's learn about pipes in Angular. Pipes allow us to transform data before displaying them in the view. Let's take a look at some of the built-in pipes with examples. And let's begin with the different pipes applicable on a string type property.
Now I have created a public name property and set it to codevolution, and I've bound it to the template using interpolation. So in the browser right now, we just have 'code evolution'.
Now the first pipe we have is the lowercase pipe, which converts a string to its lowercase representation. So we have name followed by the pipe operator, followed by the lowercase pipe. So now if we take a look at the browser, you can see 'code evolution' all in lowercase.
Similarly, we also have an uppercase pipe. So instead of lowercase, if I change this to uppercase, 'code evolution' will now be displayed in uppercase.
Next, we have a titleCase pipe as well. So I'm going to create a new H2 tag, and we are binding the message property, which is 'welcome to code evolution'. So you can see here that 't' and 'c' are in lower case and this will be converted into uppercase for title case. So in title case, the first letter of every word will be capitalized. So if I go back to the browser, you can see that 'Welcome To Code Evolution' is in title case.
The Slice Pipe for Substrings
Now you might also want to display a part of the string, in which case we can make use of the slice pipe. So again, we are making use of the name property and passing it through the slice pipe. Now, this pipe takes an argument. You specify a colon followed by a number that indicates from where the string has to start. For example, if I mentioned 3, this gives you a string that starts from the index 3 of 'code evolution'. So if you take a look at the browser, you can see 'evolution'. So in 'code evolution', this is 0, 1, and 2, and this is the third index, so 'evolution' is printed out.
Now you can also specify a second argument which is the limit. So from 3, I want up to but not including the 5th index. So this is going to give us the character at position 3 and 4 only. So if you take a look at the browser, you can see 'e' and 'v'. So this is 3rd and 4th, but not including the 5th letter. So that is the slice pipe.
The JSON Pipe for Objects
Now we also have a JSON pipe, which gives you a JSON representation of the object. So, I have created an object called person and let me show you how the JSON pipe works. We bind person using interpolation and then pass it through the JSON pipe. So if you now take a look at the browser, you can see the JSON representation of that particular object: first name John, last name Doe. So those are some of the pipes applicable for a string property type.
Next, let's take a look at numbers. For numbers, we have the number pipe, and this pipe takes one argument in a specific format. So let me copy-paste a few HTML elements and explain how it works. All right, so we have three h2 tags and we are using interpolation. We have a number 5.678, then the pipe character, and then the number pipe. Now this number pipe takes in an argument in a specific format. So this is a string representation. So within single quotes, we have a digit, followed by a dot, followed by a digit again, a dash, and then a digit again.
So what do these stand for? The first one is the minimum number of integer digits. This is followed by a dot and this again is followed by the minimum number of decimal digits, a dash and the maximum number of decimal digits.
So if you take a look at the first example, 1.2-3. So I want minimum one digit in the integer place. Five, okay, we've got that. Minimum two digits in the decimal place. Six, seven, okay, we've got that. And the maximum number is three digits in the decimal place. So six, seven, eight. So if you take a look at the browser, it is going to display 5.678. There is no change whatsoever.
So let's take a look at the second example and you can make out the difference. In the integer place, we have specified the minimum digits to be three. So we just have one digit, so it is going to append two digits to this 5. It is going to become 005. And we are saying we need minimum four digits in the decimal place. We currently have only three, so a zero will be appended towards the right in the decimal place. So six, seven, eight, zero. So if you take a look at the browser, it is going to be 005.6780. So that is the second example.
The third example, we say that we need three digits in the integer place, so this becomes 005. But we need a maximum of only two digits in the decimal place. We have specified two as the upper limit. So 678 has to be replaced with just a two-digit value. So in that scenario, 678 gets rounded off to 68. So if we take a look at the browser, you can see that 005.68. So this is how the number pipe works. We have a specific format with which you can vary the number of digits that you want to display in the template.
The Percent and Currency Pipes
Alright, next we also have a percent pipe and this is pretty straightforward. So we have a number 0.25, the pipe character, followed by the percent pipe. So if you take a look at the browser, it gives the percentage representation of the number. 0.25 is 25%.
Next, we also have a currency pipe. So you might want to display prices for your products, in which case we can use the currency pipe. So let me show you a few examples of the currency pipe. So I've created a new h2 tag again, the number is 0.25, but this time I'm passing it through the currency pipe. So if I save this and go take a look at the browser, it says 0.25 dollars. Now by default the currency is US dollars, but you can also specify the country as an argument. For example, I'm going to specify that the currency has to be Great Britain pounds. So the code is GBP. So if you take a look at the browser, it says 0.25 pounds. Now you can take a look at the ISO currency codes to get the string representation for all the countries that you are looking for.
Now if you take a look at the browser, it shows the currency symbol. But if you want the currency code itself and not the symbol, then you can pass a third argument. So I'm gonna put a colon again and then I'm going to say code. So if you take a look at the browser, it says GBP 0.25. And the same way if I change GBP to euros, so EUR, it says EUR 0.25. All right, so that is some of the pipes that you can apply to numbers.
Finally, we have the date pipe to work with different date formats. So I'm going to create a new property, public date = new Date(), and then let's bind it to our template. Now if I save this and take a look at the browser, you can see the date. Now, this is something we cannot really use in our application. So let me go over a few formats.
The first one is a short date format. So I'm going to add the pipe character, date pipe, colon, followed by the format. So this is going to be a short format. So if I take a look at the browser, it says '12/3/17, 9:49 PM'.
And similarly, if you want only the date and only the time, we can also do that as well. So instead of just short, I can have shortDate and shortTime. So now if we save this and take a look at the browser, you can see that we get just the date or just the time.
Now similar to the short format, there is also medium and long. So you can have medium, mediumDate, mediumTime, longDate, and longTime as well. The usage is same, so I'm not going to go over all of them. I recommend you take a look at the official documentation and pick the format that suits your application needs. So that is about the date pipe.
Key Takeaway & Conclusion
But one key point to remember about pipes is that the pipe operator transforms the data only for the view; it does not change the value of the property in the class. Well alright then, that is about built-in pipes in Angular. Thank you guys for watching, don't forget to subscribe, and I'll see you guys in the next video.
