Hello, everyone, and welcome back in this lesson, we're going to start to introduce the notion of
angular pipes.
So what exactly is a pipe?
A pipe is a template mechanism that we can use to transform data and display it in another form to the
user.
Let's give a concrete example.
Let's have here a very common type of data, which is a date, let's add here a start date at the level
of our application component.
And for the sake of this example, let's quickly instantiate the date using the date constructor.
So we are going to adhere to the 1st of January of 2000.
So the months are zero based and the days of the month are one based.
So this corresponds to the 1st of January of 2000.
Let's say that we would like to display this date here, the level of our template.
We're going to quickly arrive here, a small container where we are going to try out multiple pipes.
We're going to add here a science class called Demo.
And we're going to start quickly adding here some data.
Let's hear the start date, for example, that we have available here from the component and see how
this gets displayed on the screen.
So if we refresh here the application, we are going to see that our start date looks like this.
This is not very helpful for the user.
This is not the typical way that we want to display a date in order to better display the data to the
user.
Let's apply here and angular by using the following syntax.
We add these vertical bar here and then after we have here the name of the pipe that we want to apply
in this case, the date pipe.
Let's quickly see this in action.
So as you can see, what we have now in the template is a properly formatted data stream.
What happened here is that the pipe is essentially a function that is going to take as input the start
date and it's going to give us as output these formatted string that we have here.
This pipe here, which is essentially a function, can take several arguments.
So, for example, what we have here is a default format for a date, but we can specify our own format.
Let's say that separates the month and the year with the slash instead of having here a comma and a
space so we can apply here a parameter to our pipe by applying here to Colon and then between quotes
as a string, we are going to add here the formatting that we want.
We are going to say that we want first the month, then the day, and then we're going to say that we
want the year with only two digits.
So as you can see, we have here the date correctly displayed.
Now, let's say that we want four digits for the year.
Instead, we have here 2000 as expected.
And let's say that instead of this format, we would like to show here a string for the month, so January,
February, etc. In order to do that, we apply the following format here with free M's instead of two.
And if we refresh these, we are going to see that we have here January 1st, 2000.
So now we have a string instead of digits for the month as expected.
If by some reason our PI needs multiple arguments, then we can pass them by separating the multiple
arguments with another column.
We will see examples of that in a moment.
So this is the date by it's very useful for displaying dates.
As we can see, there are several other built in pipes in English because let's have a look at them
besides the date pipe.
We also have other pipes that are available for string formatting.
Let's create here a member variable called Title, which is going to correspond to the title of the
first course of our lists.
Let's go back here to the list.
So the title is going to correspond to this string here, angular core, deep Dave.
As you can see, this is Title Chesed.
Let's make it a normal sentence without capitalization first.
So going back here to our example in our application component, we're going to see that we have here
a couple of pipes available for formatting strings.
We are going to first start by simply printing the title out.
So as you can see, we have here angular core, deep dive.
Let's now see what happens if we apply a couple of built pipes.
We have, for example, the uppercase pipe that, like one would expect, simply takes the string and
makes it all uppercase.
Another pipe that is related to this one is the lower case by that will, as the name implies, make
the whole string lowercase.
We also have the built-In title case pipe like the name implies.
The title case pipe is going to capitalize only the first letter of each word besides the pipes for
formatting strings.
We also have.
A built in pipe for formatting, no amounts, so if we head over here to our components, we are going
to hear here a new variable called Price and we are going to assign it the value 999.
Let's now see the multiple options that we have available for displaying this price on the screen for
that.
The pipe that we are going to be using is going to be the no pipe.
Let's try that.
So as you can see, if we do not pass in here any extra arguments, we are going to have the number
just like it is displayed on the screen.
But the no pipe can take several arguments.
So the first argument is going to be the minimal number of integer digits.
So in this case, let's say that we want a minimum of free integer digits here left of the comma.
Then we can also provide here the number of minimal fraction digits.
Let's say that we have a minimum of three digits and a maximum of five fractioned digits.
We need to add here a column so that this string here is considered an argument as to the number PI.
So if we try this out, we are going to see that indeed we have here free integer digits and we have
here free fractioned digits.
As expected, five would be the number of maximum digits in case that we would provide here more digits
with this formatting.
If our price has a bit more than five digits, then what is going to happen is that our fraction part
is going to get rounded to a maximum of five fractioned digits, this pipersville for formatting any
numeric amount in general.
But if we want to format a price in a currency, then we also have available another pipe, which is
the currency pipe.
So let's have a look here.
If we apply it without any argument, we are going to see that it defaults to US dollars and we can
see that this price here was rounded to two digits.
Now, let's say that we want to display another currency instead of U.S. dollars.
Let's see euros.
We are going to see that we have here the correct currency symbol applied and the same goes for any
other currency when we are displaying numeric amounts.
Another very common use case is when we have to display a percentage.
Let's say that we have here a new member variable called rate, and this corresponds to a percentage,
let's say, of 67 percent.
We can display these here on the screen in the following way.
We are going to take the rate member variable and we are going to apply at the percent built in angular
pipe.
So as we can see, our percentage is correctly displayed on the screen as expected.
Besides perhaps for formatting strings or numeric amounts, we also have built in pipes available for
handling collections of data.
For example, we have the built-In slice pipe that will allow us to slice an array in a similar way
to what we will do with the JavaScript array slice operator.
So here is how this slice pipe works.
We are going to apply it here to our course collection and we are going to slice only the first three
elements of our array.
So the first element that we want to include, it's going to be the Element zero, which corresponds
to this card here.
And the second element that we are going to pass to the slice pipe is going to be the end index that
we want to slice.
So we should expect to see here the cards zero and one, but not the careto.
So the final index here is non-inclusive.
Let's have a look at this.
If we now refresh here, our application, we are going to see that only the index is zero and one from
our courses array were included and indexed to was not included as expected.
Besides the slice pipe, there are a couple of other built in pipes for handling JavaScript objects
and arrays.
One pipe that is very useful for debugging purposes is the jasen pipe.
Let's take for example here our courses array and apply it the jasen pipe.
So if you refresh here, the application, we can see that the courses array is being printed out to
the screen.
So this is very useful for debugging, for confirming that the given member variable contains the data
that we expect and that a pipe that is quite useful for handling objects is the key value pipe.
In order to see the key value pipe in action, let's create here a coarse object that is going to be
the first element of the courses array.
So this is not an array.
This is a JavaScript object.
The key value pipe is very useful for iterating through the properties of this object.
Let's see this in action.
Let's quickly print out the properties of the object to the screen.
So we are going to create here a loop we are going to be using Engy for and we are going to loop through
all the properties of our object.
The course object as it is, is currently not.
Iterable, but if we apply here to the key value by then, we are going to get here an array of key
values and we can loop through that with energy for.
So let's call each of the key value pairs a pair.
We are then going to iterate over the array of key value pairs by using the length of Syntex.
And here, inside this energy for loop, we are going to get here our key value pair.
You can print it to the screen in the following way.
We are going to first start by printing out the key and we can already see that here on the screen.
We can see that we have here printed out the names of the course object properties and we can also print
out the value.
So we are going to separate the value here with the colon and we are going to access the value and we're
going to print it out to the screen.
So as we refresh our application, we are going to see that we have here the multiple property values
of the course object.
And with these, you now have a good overview on all the built-In angular pipes.
Next, we are going to start to introduce some of the more advanced features of angular core.
We are going to start with local template queering with the view Chele decorated.
This is coming right up in the next lesson.