In this lecture, we will learn how to customize the output of a pipe through parameters at the end
of the day.
Pipes are functions.
Pipes can have arguments to modify the behavior or output.
You can refer to the documentation of a pipe to learn more about its arguments.
Not all pipes are configurable.
For example, the title case pipe does not have parameters or have to explore a different pipe for this
demonstration.
We are going to learn about a new pipe called date.
The date pipe will format a valid date object.
This pipe can be useful for rendering friendlier dates to users.
It gives us complete control over the formatting of a date.
Unlike the title case pipe, the date pipe has a parameter for modifying the date format to get started.
Let's create a date object.
Open the app component class file.
We will create a property called current date.
Its value will be a new instance of a date object.
The date pipe can work with three types of values we can use numbers, strings and date objects.
I think working with a date object will be the easiest by default.
New instances of the date object will store the current date and time.
We can avoid trying to guess the current date with a string or number.
In addition, it's clearly impossible for a date object to store of value other than a date, whereas
a string may have a typo.
If we attempt to pass an invalid value to the date pipe, we may encounter unexpected behavior.
In most cases, I recommend applying date pipes to date objects for the most accurate results.
Let's switch over to the app template file.
At the bottom of the template, we will add a paragraph tagged with the following expression current
date.
Let's switch over to the browser.
Date objects can be rendered in a template.
However, the formatting isn't appealing.
Ideally, the format of a date should be the month, day and year.
At the same time, we shouldn't modify the date object.
In some cases, you may want to work with date objects for sorting.
JavaScript allows for arrays to be sortable with dates.
In this scenario, applying the date pipe will allow us to format the date without directly modifying
the date object.
Let's fix the formatting with the date pipe.
Switch back to the editor.
We will add the date pipe after the current date expression.
By default, the date pipe will format the date by displaying the month, day and year.
Everything else will be removed.
It's possible you may see a different format based on your current environment or when you're taking
this course for a consistent format.
I recommend passing in a format.
The date pipes first parameter is the format for the date.
We can add a parameter by adding a colon after the name of the pipe, followed by the value.
A parameter for a pipe is the equivalent of passing in a value two way functions argument list.
In the resource section of this lecture, I provide a link to a page called Custom Format Options.
On this page, we can give you an exhaustive list of options for formatting a date under the format
column.
There are various placeholders available.
These placeholders will be replaced with their true value from the date object.
The date pipe will take care of replacing the placeholders with the appropriate value.
For example, let's say we want to output the month and day.
According to the table, we have five formats for displaying the month.
Angular does a good job of accounting for various formats.
Let's use the MRM placeholder as for the day.
We will stick with the placeholder back in the editor.
We will pass in the placeholders.
The value of the placeholder must be passed in as a string.
Be sure to wrap the values with quotes.
As for the arrangement, the month should appear before the day.
If you'd like, you can reverse the arrangement for a different format.
Feel free to explore the various formats at your disposal.
Switch over to the browser.
The date has been properly formatted, according to our specifications.
Choosing a format is a powerful feature, but there is an alternative solution for those who prefer
to let angular format dates.
The value of the format does not need to be a series of placeholders.
Alternatively, Angular provides a set of predefined formats.
Let's switch back to the documentation page on this page.
There's a section called predefined format options.
Instead of passing in a format, we can pass in a predefined format, Angular will format the date based
on the rules in the equivalent to column.
The Angular team provides these formats for the most popular date formats in the community.
You may prefer to use predefined formats as a shortcut.
It'll save you time from scrolling around the documentation for outputting the desired format.
For example, we can use the short option instead of typing the same format with placeholders, Angular
will be able to format the date regardless of the absence of placeholders.
According to the table, the format renders the month, day, year and time.
We're going to wrap up our discussion of the date pipe in the following lecture.
We will explore some more pipes.