1
00:00:04,180 --> 00:00:09,370
Hello, everyone, and welcome back in this lesson, we're going to start to introduce the notion of

2
00:00:09,370 --> 00:00:10,820
angular pipes.

3
00:00:10,840 --> 00:00:12,870
So what exactly is a pipe?

4
00:00:12,880 --> 00:00:19,960
A pipe is a template mechanism that we can use to transform data and display it in another form to the

5
00:00:19,960 --> 00:00:20,420
user.

6
00:00:20,560 --> 00:00:22,000
Let's give a concrete example.

7
00:00:22,120 --> 00:00:29,020
Let's have here a very common type of data, which is a date, let's add here a start date at the level

8
00:00:29,020 --> 00:00:30,480
of our application component.

9
00:00:30,490 --> 00:00:37,080
And for the sake of this example, let's quickly instantiate the date using the date constructor.

10
00:00:37,240 --> 00:00:41,640
So we are going to adhere to the 1st of January of 2000.

11
00:00:41,650 --> 00:00:47,470
So the months are zero based and the days of the month are one based.

12
00:00:47,470 --> 00:00:51,500
So this corresponds to the 1st of January of 2000.

13
00:00:51,640 --> 00:00:56,160
Let's say that we would like to display this date here, the level of our template.

14
00:00:56,170 --> 00:01:02,770
We're going to quickly arrive here, a small container where we are going to try out multiple pipes.

15
00:01:02,800 --> 00:01:06,130
We're going to add here a science class called Demo.

16
00:01:06,250 --> 00:01:09,770
And we're going to start quickly adding here some data.

17
00:01:09,950 --> 00:01:16,960
Let's hear the start date, for example, that we have available here from the component and see how

18
00:01:16,960 --> 00:01:18,820
this gets displayed on the screen.

19
00:01:18,970 --> 00:01:23,980
So if we refresh here the application, we are going to see that our start date looks like this.

20
00:01:24,130 --> 00:01:26,320
This is not very helpful for the user.

21
00:01:26,350 --> 00:01:31,960
This is not the typical way that we want to display a date in order to better display the data to the

22
00:01:31,960 --> 00:01:32,370
user.

23
00:01:32,380 --> 00:01:36,790
Let's apply here and angular by using the following syntax.

24
00:01:36,970 --> 00:01:44,380
We add these vertical bar here and then after we have here the name of the pipe that we want to apply

25
00:01:44,380 --> 00:01:46,230
in this case, the date pipe.

26
00:01:46,240 --> 00:01:47,770
Let's quickly see this in action.

27
00:01:47,780 --> 00:01:53,170
So as you can see, what we have now in the template is a properly formatted data stream.

28
00:01:53,260 --> 00:01:59,290
What happened here is that the pipe is essentially a function that is going to take as input the start

29
00:01:59,290 --> 00:02:05,110
date and it's going to give us as output these formatted string that we have here.

30
00:02:05,370 --> 00:02:10,320
This pipe here, which is essentially a function, can take several arguments.

31
00:02:10,330 --> 00:02:17,640
So, for example, what we have here is a default format for a date, but we can specify our own format.

32
00:02:17,650 --> 00:02:23,890
Let's say that separates the month and the year with the slash instead of having here a comma and a

33
00:02:23,890 --> 00:02:31,420
space so we can apply here a parameter to our pipe by applying here to Colon and then between quotes

34
00:02:31,420 --> 00:02:35,110
as a string, we are going to add here the formatting that we want.

35
00:02:35,110 --> 00:02:40,630
We are going to say that we want first the month, then the day, and then we're going to say that we

36
00:02:40,630 --> 00:02:43,270
want the year with only two digits.

37
00:02:43,480 --> 00:02:46,840
So as you can see, we have here the date correctly displayed.

38
00:02:47,080 --> 00:02:50,410
Now, let's say that we want four digits for the year.

39
00:02:50,410 --> 00:02:53,760
Instead, we have here 2000 as expected.

40
00:02:53,800 --> 00:03:01,240
And let's say that instead of this format, we would like to show here a string for the month, so January,

41
00:03:01,240 --> 00:03:07,980
February, etc. In order to do that, we apply the following format here with free M's instead of two.

42
00:03:08,170 --> 00:03:13,700
And if we refresh these, we are going to see that we have here January 1st, 2000.

43
00:03:13,720 --> 00:03:18,530
So now we have a string instead of digits for the month as expected.

44
00:03:18,550 --> 00:03:24,640
If by some reason our PI needs multiple arguments, then we can pass them by separating the multiple

45
00:03:24,640 --> 00:03:26,950
arguments with another column.

46
00:03:27,160 --> 00:03:29,520
We will see examples of that in a moment.

47
00:03:29,560 --> 00:03:33,640
So this is the date by it's very useful for displaying dates.

48
00:03:33,640 --> 00:03:39,280
As we can see, there are several other built in pipes in English because let's have a look at them

49
00:03:39,340 --> 00:03:40,700
besides the date pipe.

50
00:03:40,720 --> 00:03:45,060
We also have other pipes that are available for string formatting.

51
00:03:45,190 --> 00:03:51,400
Let's create here a member variable called Title, which is going to correspond to the title of the

52
00:03:51,400 --> 00:03:53,330
first course of our lists.

53
00:03:53,500 --> 00:03:55,210
Let's go back here to the list.

54
00:03:55,210 --> 00:04:00,760
So the title is going to correspond to this string here, angular core, deep Dave.

55
00:04:00,880 --> 00:04:03,010
As you can see, this is Title Chesed.

56
00:04:03,040 --> 00:04:08,080
Let's make it a normal sentence without capitalization first.

57
00:04:08,230 --> 00:04:14,080
So going back here to our example in our application component, we're going to see that we have here

58
00:04:14,080 --> 00:04:17,709
a couple of pipes available for formatting strings.

59
00:04:17,920 --> 00:04:22,160
We are going to first start by simply printing the title out.

60
00:04:22,240 --> 00:04:25,660
So as you can see, we have here angular core, deep dive.

61
00:04:25,690 --> 00:04:29,500
Let's now see what happens if we apply a couple of built pipes.

62
00:04:29,530 --> 00:04:36,220
We have, for example, the uppercase pipe that, like one would expect, simply takes the string and

63
00:04:36,220 --> 00:04:38,160
makes it all uppercase.

64
00:04:38,180 --> 00:04:45,280
Another pipe that is related to this one is the lower case by that will, as the name implies, make

65
00:04:45,280 --> 00:04:47,130
the whole string lowercase.

66
00:04:47,260 --> 00:04:51,940
We also have the built-In title case pipe like the name implies.

67
00:04:51,940 --> 00:04:58,510
The title case pipe is going to capitalize only the first letter of each word besides the pipes for

68
00:04:58,510 --> 00:04:59,650
formatting strings.

69
00:04:59,650 --> 00:05:00,370
We also have.

70
00:05:00,420 --> 00:05:06,510
A built in pipe for formatting, no amounts, so if we head over here to our components, we are going

71
00:05:06,510 --> 00:05:12,490
to hear here a new variable called Price and we are going to assign it the value 999.

72
00:05:12,660 --> 00:05:18,540
Let's now see the multiple options that we have available for displaying this price on the screen for

73
00:05:18,540 --> 00:05:18,870
that.

74
00:05:18,870 --> 00:05:22,530
The pipe that we are going to be using is going to be the no pipe.

75
00:05:22,710 --> 00:05:23,770
Let's try that.

76
00:05:23,910 --> 00:05:29,490
So as you can see, if we do not pass in here any extra arguments, we are going to have the number

77
00:05:29,490 --> 00:05:31,820
just like it is displayed on the screen.

78
00:05:31,830 --> 00:05:34,710
But the no pipe can take several arguments.

79
00:05:34,920 --> 00:05:39,710
So the first argument is going to be the minimal number of integer digits.

80
00:05:39,780 --> 00:05:45,980
So in this case, let's say that we want a minimum of free integer digits here left of the comma.

81
00:05:46,170 --> 00:05:51,140
Then we can also provide here the number of minimal fraction digits.

82
00:05:51,150 --> 00:05:57,450
Let's say that we have a minimum of three digits and a maximum of five fractioned digits.

83
00:05:57,690 --> 00:06:04,410
We need to add here a column so that this string here is considered an argument as to the number PI.

84
00:06:04,620 --> 00:06:10,770
So if we try this out, we are going to see that indeed we have here free integer digits and we have

85
00:06:10,770 --> 00:06:13,080
here free fractioned digits.

86
00:06:13,110 --> 00:06:20,790
As expected, five would be the number of maximum digits in case that we would provide here more digits

87
00:06:20,790 --> 00:06:22,050
with this formatting.

88
00:06:22,050 --> 00:06:29,100
If our price has a bit more than five digits, then what is going to happen is that our fraction part

89
00:06:29,100 --> 00:06:36,120
is going to get rounded to a maximum of five fractioned digits, this pipersville for formatting any

90
00:06:36,120 --> 00:06:37,710
numeric amount in general.

91
00:06:37,860 --> 00:06:44,340
But if we want to format a price in a currency, then we also have available another pipe, which is

92
00:06:44,340 --> 00:06:45,890
the currency pipe.

93
00:06:46,200 --> 00:06:47,700
So let's have a look here.

94
00:06:47,700 --> 00:06:54,000
If we apply it without any argument, we are going to see that it defaults to US dollars and we can

95
00:06:54,000 --> 00:06:58,170
see that this price here was rounded to two digits.

96
00:06:58,350 --> 00:07:03,240
Now, let's say that we want to display another currency instead of U.S. dollars.

97
00:07:03,240 --> 00:07:04,610
Let's see euros.

98
00:07:04,620 --> 00:07:10,530
We are going to see that we have here the correct currency symbol applied and the same goes for any

99
00:07:10,530 --> 00:07:13,390
other currency when we are displaying numeric amounts.

100
00:07:13,460 --> 00:07:17,520
Another very common use case is when we have to display a percentage.

101
00:07:17,550 --> 00:07:23,460
Let's say that we have here a new member variable called rate, and this corresponds to a percentage,

102
00:07:23,460 --> 00:07:25,910
let's say, of 67 percent.

103
00:07:26,040 --> 00:07:29,620
We can display these here on the screen in the following way.

104
00:07:29,670 --> 00:07:36,600
We are going to take the rate member variable and we are going to apply at the percent built in angular

105
00:07:36,600 --> 00:07:37,170
pipe.

106
00:07:37,170 --> 00:07:42,050
So as we can see, our percentage is correctly displayed on the screen as expected.

107
00:07:42,210 --> 00:07:48,570
Besides perhaps for formatting strings or numeric amounts, we also have built in pipes available for

108
00:07:48,780 --> 00:07:50,610
handling collections of data.

109
00:07:50,640 --> 00:07:56,610
For example, we have the built-In slice pipe that will allow us to slice an array in a similar way

110
00:07:56,610 --> 00:08:00,360
to what we will do with the JavaScript array slice operator.

111
00:08:00,600 --> 00:08:03,240
So here is how this slice pipe works.

112
00:08:03,240 --> 00:08:09,330
We are going to apply it here to our course collection and we are going to slice only the first three

113
00:08:09,330 --> 00:08:11,070
elements of our array.

114
00:08:11,190 --> 00:08:16,530
So the first element that we want to include, it's going to be the Element zero, which corresponds

115
00:08:16,530 --> 00:08:17,930
to this card here.

116
00:08:18,030 --> 00:08:23,730
And the second element that we are going to pass to the slice pipe is going to be the end index that

117
00:08:23,730 --> 00:08:24,820
we want to slice.

118
00:08:24,840 --> 00:08:31,260
So we should expect to see here the cards zero and one, but not the careto.

119
00:08:31,260 --> 00:08:35,250
So the final index here is non-inclusive.

120
00:08:35,380 --> 00:08:36,480
Let's have a look at this.

121
00:08:36,480 --> 00:08:42,870
If we now refresh here, our application, we are going to see that only the index is zero and one from

122
00:08:42,870 --> 00:08:49,500
our courses array were included and indexed to was not included as expected.

123
00:08:49,720 --> 00:08:55,590
Besides the slice pipe, there are a couple of other built in pipes for handling JavaScript objects

124
00:08:55,590 --> 00:08:56,370
and arrays.

125
00:08:56,520 --> 00:09:01,430
One pipe that is very useful for debugging purposes is the jasen pipe.

126
00:09:01,620 --> 00:09:06,600
Let's take for example here our courses array and apply it the jasen pipe.

127
00:09:06,610 --> 00:09:11,700
So if you refresh here, the application, we can see that the courses array is being printed out to

128
00:09:11,700 --> 00:09:12,200
the screen.

129
00:09:12,210 --> 00:09:17,910
So this is very useful for debugging, for confirming that the given member variable contains the data

130
00:09:17,910 --> 00:09:25,890
that we expect and that a pipe that is quite useful for handling objects is the key value pipe.

131
00:09:26,040 --> 00:09:31,770
In order to see the key value pipe in action, let's create here a coarse object that is going to be

132
00:09:31,770 --> 00:09:35,100
the first element of the courses array.

133
00:09:35,130 --> 00:09:36,700
So this is not an array.

134
00:09:36,720 --> 00:09:38,400
This is a JavaScript object.

135
00:09:38,490 --> 00:09:43,760
The key value pipe is very useful for iterating through the properties of this object.

136
00:09:43,830 --> 00:09:45,090
Let's see this in action.

137
00:09:45,090 --> 00:09:49,140
Let's quickly print out the properties of the object to the screen.

138
00:09:49,320 --> 00:09:55,110
So we are going to create here a loop we are going to be using Engy for and we are going to loop through

139
00:09:55,110 --> 00:09:57,390
all the properties of our object.

140
00:09:57,390 --> 00:10:00,330
The course object as it is, is currently not.

141
00:10:00,390 --> 00:10:06,750
Iterable, but if we apply here to the key value by then, we are going to get here an array of key

142
00:10:06,750 --> 00:10:10,020
values and we can loop through that with energy for.

143
00:10:10,170 --> 00:10:13,740
So let's call each of the key value pairs a pair.

144
00:10:13,860 --> 00:10:20,800
We are then going to iterate over the array of key value pairs by using the length of Syntex.

145
00:10:20,820 --> 00:10:26,320
And here, inside this energy for loop, we are going to get here our key value pair.

146
00:10:26,490 --> 00:10:28,960
You can print it to the screen in the following way.

147
00:10:29,010 --> 00:10:35,130
We are going to first start by printing out the key and we can already see that here on the screen.

148
00:10:35,130 --> 00:10:41,310
We can see that we have here printed out the names of the course object properties and we can also print

149
00:10:41,310 --> 00:10:42,360
out the value.

150
00:10:42,450 --> 00:10:48,570
So we are going to separate the value here with the colon and we are going to access the value and we're

151
00:10:48,570 --> 00:10:50,270
going to print it out to the screen.

152
00:10:50,430 --> 00:10:56,460
So as we refresh our application, we are going to see that we have here the multiple property values

153
00:10:56,460 --> 00:10:57,930
of the course object.

154
00:10:57,930 --> 00:11:03,310
And with these, you now have a good overview on all the built-In angular pipes.

155
00:11:03,480 --> 00:11:08,710
Next, we are going to start to introduce some of the more advanced features of angular core.

156
00:11:08,940 --> 00:11:14,170
We are going to start with local template queering with the view Chele decorated.

157
00:11:14,610 --> 00:11:17,550
This is coming right up in the next lesson.