1
00:00:00,300 --> 00:00:06,390
In this lecture, we will learn how to customize the output of a pipe through parameters at the end

2
00:00:06,390 --> 00:00:07,050
of the day.

3
00:00:07,080 --> 00:00:08,340
Pipes are functions.

4
00:00:08,610 --> 00:00:12,660
Pipes can have arguments to modify the behavior or output.

5
00:00:13,050 --> 00:00:17,670
You can refer to the documentation of a pipe to learn more about its arguments.

6
00:00:18,000 --> 00:00:19,830
Not all pipes are configurable.

7
00:00:20,130 --> 00:00:27,420
For example, the title case pipe does not have parameters or have to explore a different pipe for this

8
00:00:27,420 --> 00:00:28,320
demonstration.

9
00:00:28,410 --> 00:00:31,410
We are going to learn about a new pipe called date.

10
00:00:31,830 --> 00:00:35,100
The date pipe will format a valid date object.

11
00:00:35,460 --> 00:00:39,330
This pipe can be useful for rendering friendlier dates to users.

12
00:00:39,660 --> 00:00:43,080
It gives us complete control over the formatting of a date.

13
00:00:43,500 --> 00:00:50,640
Unlike the title case pipe, the date pipe has a parameter for modifying the date format to get started.

14
00:00:50,820 --> 00:00:52,860
Let's create a date object.

15
00:00:53,190 --> 00:00:55,530
Open the app component class file.

16
00:00:58,060 --> 00:01:01,120
We will create a property called current date.

17
00:01:01,510 --> 00:01:05,080
Its value will be a new instance of a date object.

18
00:01:07,680 --> 00:01:14,340
The date pipe can work with three types of values we can use numbers, strings and date objects.

19
00:01:14,670 --> 00:01:18,930
I think working with a date object will be the easiest by default.

20
00:01:19,170 --> 00:01:23,640
New instances of the date object will store the current date and time.

21
00:01:24,030 --> 00:01:28,140
We can avoid trying to guess the current date with a string or number.

22
00:01:28,770 --> 00:01:35,250
In addition, it's clearly impossible for a date object to store of value other than a date, whereas

23
00:01:35,250 --> 00:01:36,750
a string may have a typo.

24
00:01:37,080 --> 00:01:43,590
If we attempt to pass an invalid value to the date pipe, we may encounter unexpected behavior.

25
00:01:43,950 --> 00:01:50,550
In most cases, I recommend applying date pipes to date objects for the most accurate results.

26
00:01:50,880 --> 00:01:53,700
Let's switch over to the app template file.

27
00:01:56,380 --> 00:02:02,500
At the bottom of the template, we will add a paragraph tagged with the following expression current

28
00:02:02,500 --> 00:02:02,920
date.

29
00:02:05,550 --> 00:02:07,410
Let's switch over to the browser.

30
00:02:10,199 --> 00:02:12,810
Date objects can be rendered in a template.

31
00:02:13,080 --> 00:02:15,600
However, the formatting isn't appealing.

32
00:02:15,930 --> 00:02:20,640
Ideally, the format of a date should be the month, day and year.

33
00:02:21,030 --> 00:02:24,600
At the same time, we shouldn't modify the date object.

34
00:02:24,990 --> 00:02:28,980
In some cases, you may want to work with date objects for sorting.

35
00:02:29,340 --> 00:02:32,820
JavaScript allows for arrays to be sortable with dates.

36
00:02:33,150 --> 00:02:39,600
In this scenario, applying the date pipe will allow us to format the date without directly modifying

37
00:02:39,600 --> 00:02:40,770
the date object.

38
00:02:41,310 --> 00:02:43,920
Let's fix the formatting with the date pipe.

39
00:02:44,280 --> 00:02:45,750
Switch back to the editor.

40
00:02:45,990 --> 00:02:49,890
We will add the date pipe after the current date expression.

41
00:02:52,550 --> 00:02:58,670
By default, the date pipe will format the date by displaying the month, day and year.

42
00:02:59,060 --> 00:03:00,860
Everything else will be removed.

43
00:03:01,130 --> 00:03:06,920
It's possible you may see a different format based on your current environment or when you're taking

44
00:03:06,920 --> 00:03:09,500
this course for a consistent format.

45
00:03:09,710 --> 00:03:11,990
I recommend passing in a format.

46
00:03:12,620 --> 00:03:16,400
The date pipes first parameter is the format for the date.

47
00:03:16,730 --> 00:03:22,700
We can add a parameter by adding a colon after the name of the pipe, followed by the value.

48
00:03:23,000 --> 00:03:28,850
A parameter for a pipe is the equivalent of passing in a value two way functions argument list.

49
00:03:29,150 --> 00:03:35,900
In the resource section of this lecture, I provide a link to a page called Custom Format Options.

50
00:03:38,610 --> 00:03:45,090
On this page, we can give you an exhaustive list of options for formatting a date under the format

51
00:03:45,090 --> 00:03:45,690
column.

52
00:03:45,720 --> 00:03:47,920
There are various placeholders available.

53
00:03:48,330 --> 00:03:53,220
These placeholders will be replaced with their true value from the date object.

54
00:03:53,640 --> 00:03:58,890
The date pipe will take care of replacing the placeholders with the appropriate value.

55
00:03:59,280 --> 00:04:03,120
For example, let's say we want to output the month and day.

56
00:04:03,660 --> 00:04:07,860
According to the table, we have five formats for displaying the month.

57
00:04:08,310 --> 00:04:11,880
Angular does a good job of accounting for various formats.

58
00:04:12,300 --> 00:04:16,620
Let's use the MRM placeholder as for the day.

59
00:04:16,680 --> 00:04:20,399
We will stick with the placeholder back in the editor.

60
00:04:20,430 --> 00:04:22,470
We will pass in the placeholders.

61
00:04:24,970 --> 00:04:28,570
The value of the placeholder must be passed in as a string.

62
00:04:28,960 --> 00:04:31,420
Be sure to wrap the values with quotes.

63
00:04:31,720 --> 00:04:35,440
As for the arrangement, the month should appear before the day.

64
00:04:35,770 --> 00:04:39,880
If you'd like, you can reverse the arrangement for a different format.

65
00:04:40,270 --> 00:04:43,870
Feel free to explore the various formats at your disposal.

66
00:04:44,170 --> 00:04:45,730
Switch over to the browser.

67
00:04:48,340 --> 00:04:52,540
The date has been properly formatted, according to our specifications.

68
00:04:52,930 --> 00:04:58,810
Choosing a format is a powerful feature, but there is an alternative solution for those who prefer

69
00:04:58,840 --> 00:05:00,940
to let angular format dates.

70
00:05:01,270 --> 00:05:05,620
The value of the format does not need to be a series of placeholders.

71
00:05:05,980 --> 00:05:10,600
Alternatively, Angular provides a set of predefined formats.

72
00:05:10,900 --> 00:05:15,040
Let's switch back to the documentation page on this page.

73
00:05:15,280 --> 00:05:18,700
There's a section called predefined format options.

74
00:05:21,280 --> 00:05:28,510
Instead of passing in a format, we can pass in a predefined format, Angular will format the date based

75
00:05:28,510 --> 00:05:31,360
on the rules in the equivalent to column.

76
00:05:31,840 --> 00:05:37,610
The Angular team provides these formats for the most popular date formats in the community.

77
00:05:37,990 --> 00:05:41,770
You may prefer to use predefined formats as a shortcut.

78
00:05:42,190 --> 00:05:47,950
It'll save you time from scrolling around the documentation for outputting the desired format.

79
00:05:48,550 --> 00:05:55,870
For example, we can use the short option instead of typing the same format with placeholders, Angular

80
00:05:55,870 --> 00:06:00,400
will be able to format the date regardless of the absence of placeholders.

81
00:06:00,730 --> 00:06:06,400
According to the table, the format renders the month, day, year and time.

82
00:06:07,000 --> 00:06:11,830
We're going to wrap up our discussion of the date pipe in the following lecture.

83
00:06:11,860 --> 00:06:13,960
We will explore some more pipes.