1
00:00:06,570 --> 00:00:08,910
- [Instructor] In this section
and the following section,

2
00:00:08,910 --> 00:00:11,292
we're going to see how to define a pipe,

3
00:00:11,292 --> 00:00:13,410
in Angular and how to test it.

4
00:00:13,410 --> 00:00:15,000
So, what is a pipe?

5
00:00:15,000 --> 00:00:19,080
A pipe is a class that transforms content

6
00:00:19,080 --> 00:00:21,030
into an HTML output.

7
00:00:21,030 --> 00:00:23,940
So, imagine you had an HTML template

8
00:00:23,940 --> 00:00:26,550
and you wanted to display an expression.

9
00:00:26,550 --> 00:00:28,590
So, this expression
here could be some data

10
00:00:28,590 --> 00:00:29,880
from your component.

11
00:00:29,880 --> 00:00:33,453
You can use this syntax to
pass the data through a pipe.

12
00:00:34,500 --> 00:00:36,960
There are some standard
pipes provided in Angular

13
00:00:36,960 --> 00:00:38,417
and you can invent your own pipe as well.

14
00:00:38,417 --> 00:00:40,170
It's a transformation.

15
00:00:40,170 --> 00:00:42,300
It'll take your expression
and it'll run it

16
00:00:42,300 --> 00:00:44,490
through some transformation to output it

17
00:00:44,490 --> 00:00:46,110
in a different format.

18
00:00:46,110 --> 00:00:48,480
Some pipes take parameters.

19
00:00:48,480 --> 00:00:51,450
Ultimately, this boils down
to a function in a class.

20
00:00:51,450 --> 00:00:54,000
So, this is effectively taking your value

21
00:00:54,000 --> 00:00:55,560
or passing it into a function

22
00:00:55,560 --> 00:00:58,380
and also potentially
passing in parameters,

23
00:00:58,380 --> 00:01:00,630
which help the pipe do the transformation.

24
00:01:00,630 --> 00:01:02,310
Let me show you an example.

25
00:01:02,310 --> 00:01:05,310
Imagine your component was a person

26
00:01:05,310 --> 00:01:06,773
and that person had a full name.

27
00:01:06,773 --> 00:01:09,840
You can pass the full name
through the uppercase pipe.

28
00:01:09,840 --> 00:01:13,350
That's the standard pipe
provided by Angular.

29
00:01:13,350 --> 00:01:16,650
Obviously, it converts your
full name into uppercase.

30
00:01:16,650 --> 00:01:19,200
Alternatively, if your salary is a number,

31
00:01:19,200 --> 00:01:22,500
you can pass it into the
currency pipe and it'll display,

32
00:01:22,500 --> 00:01:26,580
there's a currency, you know,
dollars or euros or whatever.

33
00:01:26,580 --> 00:01:28,890
Here's another interesting example.

34
00:01:28,890 --> 00:01:31,140
Imagine this is the date
when you joined the company,

35
00:01:31,140 --> 00:01:33,900
the date and time when
you joined the company,

36
00:01:33,900 --> 00:01:35,700
you can pass it through the date pipe.

37
00:01:35,700 --> 00:01:38,670
Each of these is a
standard pipe in Angular

38
00:01:38,670 --> 00:01:41,130
and the date pipe takes a parameter,

39
00:01:41,130 --> 00:01:43,050
specifying the format you want.

40
00:01:43,050 --> 00:01:45,540
Optionally, you can say
hours, minutes, seconds,

41
00:01:45,540 --> 00:01:48,360
and then an AM or PM indicator.

42
00:01:48,360 --> 00:01:51,540
So, the general syntax
is in your HTML template

43
00:01:51,540 --> 00:01:54,660
a piece of data that you
want to output, pipe,

44
00:01:54,660 --> 00:01:56,918
the name of the pipe
followed by any parameters

45
00:01:56,918 --> 00:01:59,160
that the pipe might take.

46
00:01:59,160 --> 00:02:02,340
So, what we're gonna do
in this section is see how

47
00:02:02,340 --> 00:02:05,820
to define a custom pipe, as
well as the standard ones.

48
00:02:05,820 --> 00:02:09,840
And then, we'll see how
to test it afterwards.

49
00:02:09,840 --> 00:02:14,130
So, you can use the Angular CLI
to help you generate a pipe.

50
00:02:14,130 --> 00:02:16,860
You say NG, G for generate.

51
00:02:16,860 --> 00:02:20,070
I'm generating a pipe and
then you give it a name, okay?

52
00:02:20,070 --> 00:02:23,460
So, this pipe I'm gonna
generate flexi-titlecase.

53
00:02:23,460 --> 00:02:26,040
It'll, the idea is you
can give it a string

54
00:02:26,040 --> 00:02:29,160
and it'll convert the
first letter into uppercase

55
00:02:29,160 --> 00:02:33,000
and the rest into lowercase,
or the other way around, okay?

56
00:02:33,000 --> 00:02:34,980
The first letter into lowercase

57
00:02:34,980 --> 00:02:36,840
and then all the other
letters into upper case.

58
00:02:36,840 --> 00:02:39,960
So, it's a flexi-titlecase converter.

59
00:02:39,960 --> 00:02:42,120
That's a pipe that we're gonna generate.

60
00:02:42,120 --> 00:02:43,620
I've done that already.

61
00:02:43,620 --> 00:02:45,450
If you go into the demo application.

62
00:02:45,450 --> 00:02:48,720
So, it's example four,
there's a demo application,

63
00:02:48,720 --> 00:02:52,800
where we've generated
flexi-titlecase pipe.

64
00:02:52,800 --> 00:02:55,200
This is what it generates, Angular CLI,

65
00:02:55,200 --> 00:02:56,910
in the source app folder.

66
00:02:56,910 --> 00:02:59,290
It'll generate the file
called flexi-titlecase

67
00:03:00,180 --> 00:03:02,790
dot pipe, because it's a pipe.

68
00:03:02,790 --> 00:03:06,270
There's the code and there's
the test for the code.

69
00:03:06,270 --> 00:03:08,370
Okay, so you can have a look at this.

70
00:03:08,370 --> 00:03:11,883
In the example for demo app, let's see.

71
00:03:13,590 --> 00:03:18,590
Here's the code and in
my source app folder

72
00:03:18,660 --> 00:03:21,183
here is my flexi-titlecase pipe.

73
00:03:22,170 --> 00:03:23,790
So, I've implemented it fully.

74
00:03:23,790 --> 00:03:25,950
I'll explain the code in a minute,

75
00:03:25,950 --> 00:03:28,470
and then I've tested it fully as well,

76
00:03:28,470 --> 00:03:31,980
and we'll see how the test
works in the next section.

77
00:03:31,980 --> 00:03:33,750
And then one other thing,

78
00:03:33,750 --> 00:03:37,530
which is worth mentioning,
Angular needs to know

79
00:03:37,530 --> 00:03:39,480
about components and pipes.

80
00:03:39,480 --> 00:03:43,080
So, in your model, you
basically have to tell Angular

81
00:03:43,080 --> 00:03:45,210
what components have you defined,

82
00:03:45,210 --> 00:03:47,160
and what pipes have you defined?

83
00:03:47,160 --> 00:03:51,870
Okay, so you have to declare
in your NG model decorator,

84
00:03:51,870 --> 00:03:56,037
you have to declare the
Angular, what components

85
00:03:57,300 --> 00:04:00,810
and pipes you have created,
so that it knows about them.

86
00:04:00,810 --> 00:04:03,720
So, we can establish them
as necessary and apply them.

87
00:04:03,720 --> 00:04:07,530
So, in the declarations
section here app component

88
00:04:07,530 --> 00:04:11,940
is my component class
and flexi-titlecase pipe

89
00:04:11,940 --> 00:04:14,100
is my pipe here.

90
00:04:14,100 --> 00:04:18,390
Now, this was automatically
added by Angular CLI.

91
00:04:18,390 --> 00:04:20,250
Whenever you create a new component,

92
00:04:20,250 --> 00:04:23,370
or whenever you create a new
pipe Angular automatically

93
00:04:23,370 --> 00:04:25,620
updates your module file to include

94
00:04:25,620 --> 00:04:27,720
the definition in your module.

95
00:04:27,720 --> 00:04:28,590
Okay, so that's good.

96
00:04:28,590 --> 00:04:30,360
So, that means we're ready to start using

97
00:04:30,360 --> 00:04:33,180
that pipe in our application.

98
00:04:33,180 --> 00:04:35,970
So, let's see how to implement the pipe.

99
00:04:35,970 --> 00:04:38,520
The pipe basically is a transformation.

100
00:04:38,520 --> 00:04:40,890
It takes some property

101
00:04:40,890 --> 00:04:43,757
and it runs it through a
transformation function,

102
00:04:43,757 --> 00:04:46,740
which you can write and
whatever you return,

103
00:04:46,740 --> 00:04:48,570
that's what gets rendered.

104
00:04:48,570 --> 00:04:51,810
Right, well, here is my
flexi-titlecase pipe.

105
00:04:51,810 --> 00:04:54,000
So, things to observe.

106
00:04:54,000 --> 00:04:56,790
First of all, it's a
class which implements

107
00:04:56,790 --> 00:04:59,190
the pipe transform interface.

108
00:04:59,190 --> 00:05:02,013
Pipe transform is a
standard Angular interface.

109
00:05:02,988 --> 00:05:06,120
Okay, you have to implement
the transform method.

110
00:05:06,120 --> 00:05:08,100
More about that in a minute.

111
00:05:08,100 --> 00:05:11,310
You'll also have noticed
the pipe decorator.

112
00:05:11,310 --> 00:05:14,700
This is how you implement
the pipe, but the decorator,

113
00:05:14,700 --> 00:05:18,300
basically, has to give it a
name that he can use in HTML.

114
00:05:18,300 --> 00:05:21,750
So, this pipe here says
in your HTML template

115
00:05:21,750 --> 00:05:26,580
this is the name of the
pipe that you need to use

116
00:05:26,580 --> 00:05:30,840
to basically invoke this pipe
class, 'cause like a label.

117
00:05:30,840 --> 00:05:33,240
So, flexi-titlecase pipe.

118
00:05:33,240 --> 00:05:36,510
So, flexi-titlecase will invoke this pipe

119
00:05:36,510 --> 00:05:37,920
or to be more specific.

120
00:05:37,920 --> 00:05:40,170
It'll invoke this transform function.

121
00:05:40,170 --> 00:05:42,540
Whenever you use this pipe, the value that

122
00:05:42,540 --> 00:05:44,790
you're piping into it, but
coming to the transform

123
00:05:44,790 --> 00:05:46,800
function as the first parameter.

124
00:05:46,800 --> 00:05:49,290
That's the value that
you're trying to transform.

125
00:05:49,290 --> 00:05:51,540
Okay, so that's the original value that

126
00:05:51,540 --> 00:05:53,533
you're trying to transform.

127
00:05:53,533 --> 00:05:55,260
You have to receive that.

128
00:05:55,260 --> 00:05:57,870
And if you want to,
your transform function

129
00:05:57,870 --> 00:06:00,960
can also receive parameters
to help you decide

130
00:06:00,960 --> 00:06:02,160
how to transform it.

131
00:06:02,160 --> 00:06:04,890
In my case, I decided to have a parameter

132
00:06:04,890 --> 00:06:06,270
called upper lower.

133
00:06:06,270 --> 00:06:09,270
It's either indicating
to convert to uppercase

134
00:06:09,270 --> 00:06:11,430
for the first letter, and then lower case

135
00:06:11,430 --> 00:06:13,925
for the rest, or the other way around.

136
00:06:13,925 --> 00:06:16,350
It returns a string.

137
00:06:16,350 --> 00:06:18,090
The transformed output.

138
00:06:18,090 --> 00:06:20,910
The implementation for
this is just code actually.

139
00:06:20,910 --> 00:06:21,743
Have a look.

140
00:06:21,743 --> 00:06:23,970
The value that comes in,
we're gonna convert it

141
00:06:23,970 --> 00:06:27,840
into either titlecase with
a capital or title case

142
00:06:27,840 --> 00:06:30,694
with a lowercase letter,
depends on this parameter.

143
00:06:30,694 --> 00:06:34,080
If the parameter isn't upper

144
00:06:34,080 --> 00:06:36,780
and it isn't lower, then it's an error.

145
00:06:36,780 --> 00:06:40,950
In that case, we just return
the value and transformed.

146
00:06:40,950 --> 00:06:44,310
Otherwise, we take the
incoming value, a string,

147
00:06:44,310 --> 00:06:48,780
we split it at a space to
give us an array of words.

148
00:06:48,780 --> 00:06:51,960
And then, for each word,
we either convert it

149
00:06:51,960 --> 00:06:56,100
into the first character,
uppercase, the rest lowercase,

150
00:06:56,100 --> 00:06:57,930
or the other way around.

151
00:06:57,930 --> 00:07:00,960
Okay, so I've kind of dot,
dot, dotted the syntax here.

152
00:07:00,960 --> 00:07:03,810
Ultimately, what we then
do is get all those words

153
00:07:03,810 --> 00:07:06,570
and join them together
again into one giant string.

154
00:07:06,570 --> 00:07:07,680
Probably worthwhile taking a look

155
00:07:07,680 --> 00:07:09,080
at the actual code for that.

156
00:07:09,960 --> 00:07:10,793
So, here we are.

157
00:07:10,793 --> 00:07:13,233
Here is my flexi-titlecase pipe.

158
00:07:15,060 --> 00:07:18,720
Okay, so like I said, you
have to annotate it with pipe,

159
00:07:18,720 --> 00:07:22,530
so it knows how to use the pipe in HTML.

160
00:07:22,530 --> 00:07:27,030
Your pipe class has to implement
pipe transform interface,

161
00:07:27,030 --> 00:07:28,560
which means you have a transform function.

162
00:07:28,560 --> 00:07:31,980
We see the original value,
plus any parameters,

163
00:07:31,980 --> 00:07:36,980
return a string unchanged
if the parameter is invalid,

164
00:07:37,380 --> 00:07:41,700
otherwise split the word,
split the string into words.

165
00:07:41,700 --> 00:07:43,800
If we're meant to convert to uppercase,

166
00:07:43,800 --> 00:07:47,610
then what it'll do is
it'll take the next word.

167
00:07:47,610 --> 00:07:51,330
It'll take the first character
and convert it to uppercase.

168
00:07:51,330 --> 00:07:54,060
And it'll take the rest of the word

169
00:07:54,060 --> 00:07:55,770
and convert it to lowercase.

170
00:07:55,770 --> 00:07:58,440
Okay, so if the user said upper,

171
00:07:58,440 --> 00:08:00,630
the first letter would be uppercased,

172
00:08:00,630 --> 00:08:03,690
and the rest of the
string will be lowercased.

173
00:08:03,690 --> 00:08:06,150
Otherwise, it's the other way around.

174
00:08:06,150 --> 00:08:09,480
The first character in each
word will be lowercased,

175
00:08:09,480 --> 00:08:11,943
and the rest of each
word will be uppercased.

176
00:08:12,870 --> 00:08:14,280
Okay, so it does that for each word.

177
00:08:14,280 --> 00:08:17,100
Each word is converted, according
to that kind of algorithm.

178
00:08:17,100 --> 00:08:19,230
And at the end, we just join
everything together again

179
00:08:19,230 --> 00:08:22,740
into a string, and that's what we return.

180
00:08:22,740 --> 00:08:25,170
So, that's my titlecase component.

181
00:08:25,170 --> 00:08:27,780
Quite pleased with that actually.

182
00:08:27,780 --> 00:08:29,700
Let's see how to use it.

183
00:08:29,700 --> 00:08:32,280
So, to use that pipe, you
would do something like this.

184
00:08:32,280 --> 00:08:35,610
Here's my application component
and it's got my full name.

185
00:08:35,610 --> 00:08:39,210
So, my full name is Andrew Carl Olsen.

186
00:08:39,210 --> 00:08:40,067
So, you didn't know that, did you?

187
00:08:40,067 --> 00:08:45,067
That's my full name and here
is my app component HTML.

188
00:08:45,300 --> 00:08:50,130
So, first of all, I display
my full name as it is.

189
00:08:50,130 --> 00:08:52,830
And then, I pass my full name through

190
00:08:52,830 --> 00:08:54,630
my flexi-titlecase pipe.

191
00:08:54,630 --> 00:08:59,070
Remember, this here,
corresponds to this here.

192
00:08:59,070 --> 00:09:01,020
Whatever name you specify there,

193
00:09:01,020 --> 00:09:02,850
that's the name that you're gonna use

194
00:09:02,850 --> 00:09:05,730
in your HTML flexi-titlecase.

195
00:09:05,730 --> 00:09:08,550
So, take the full name,
pass it through that pipe.

196
00:09:08,550 --> 00:09:10,380
Basically, it'll pass my full name

197
00:09:10,380 --> 00:09:12,870
into this transform function.

198
00:09:12,870 --> 00:09:15,150
Andrew Carl Olsen goes into there,

199
00:09:15,150 --> 00:09:19,230
and whatever it returns, that's
what's gonna be displayed.

200
00:09:19,230 --> 00:09:21,450
Oh, it takes a parameter, parameters.

201
00:09:21,450 --> 00:09:23,626
Each parameters is separated by a colon.

202
00:09:23,626 --> 00:09:25,230
It looks a bit odd.

203
00:09:25,230 --> 00:09:28,380
It's basically colon, the
transform function for my pipe,

204
00:09:28,380 --> 00:09:31,080
and it passes that into the parameter.

205
00:09:31,080 --> 00:09:34,770
That would convert my
full name into capital A,

206
00:09:34,770 --> 00:09:38,370
capital C, capital O,
rest would be lowercase.

207
00:09:38,370 --> 00:09:40,710
And then, I use the other converter.

208
00:09:40,710 --> 00:09:42,780
I basically convert it into lowercase

209
00:09:42,780 --> 00:09:44,070
and see what that looks like.

210
00:09:44,070 --> 00:09:47,040
All right, so that's, that should be fine.

211
00:09:47,040 --> 00:09:49,893
Let's serve the application
and see what it looks like.

212
00:09:50,820 --> 00:09:51,653
There we go.

213
00:09:51,653 --> 00:09:53,700
So, the full name was originally displayed

214
00:09:53,700 --> 00:09:55,260
in its original format.

215
00:09:55,260 --> 00:09:57,759
I passed it into my flexi-titlecase pipe

216
00:09:57,759 --> 00:10:00,870
with an upper parameter,
uppercase first letter,

217
00:10:00,870 --> 00:10:02,490
lowercase for the rest.

218
00:10:02,490 --> 00:10:06,030
And then, I did the same with
the parameter set the lower.

219
00:10:06,030 --> 00:10:09,300
So, the first parameter is
lowercase and the first letter,

220
00:10:09,300 --> 00:10:11,370
and then everything else is upper case.

221
00:10:11,370 --> 00:10:13,170
So, that's my pipe.

222
00:10:13,170 --> 00:10:15,810
Pretty much all pipes look,
you know, similar to that.

223
00:10:15,810 --> 00:10:17,352
Obviously, what you do inside here,

224
00:10:17,352 --> 00:10:19,950
it depends what kind of data you've got

225
00:10:19,950 --> 00:10:21,270
and how you wanna transform it,

226
00:10:21,270 --> 00:10:23,190
but the basic idea is the same.

227
00:10:23,190 --> 00:10:26,610
You will receive an input,
plus some parameters,

228
00:10:26,610 --> 00:10:28,890
and you have to return a string.

229
00:10:28,890 --> 00:10:32,130
So, what we'll do in
the next section is see

230
00:10:32,130 --> 00:10:35,486
how to test this pipe, so that
it's given a certain input

231
00:10:35,486 --> 00:10:37,470
it returns the correct output.

232
00:10:37,470 --> 00:10:40,120
We can test this to make
sure that it works properly.