1
00:00:06,510 --> 00:00:08,370
- Imagine you have an Angular application

2
00:00:08,370 --> 00:00:10,890
with a hierarchy of components,

3
00:00:10,890 --> 00:00:13,500
a high level component like app

4
00:00:13,500 --> 00:00:16,530
which maybe gets data from a REST service.

5
00:00:16,530 --> 00:00:19,273
And imagine there's a lot
of data and it's too much

6
00:00:19,273 --> 00:00:23,550
for one component to display
because it's complicated.

7
00:00:23,550 --> 00:00:24,870
So what you can do instead

8
00:00:24,870 --> 00:00:27,162
of trying to display all
the data from one component

9
00:00:27,162 --> 00:00:29,970
you can define lower level components

10
00:00:29,970 --> 00:00:31,830
to take some of the strain.

11
00:00:31,830 --> 00:00:33,378
And from your high level component,

12
00:00:33,378 --> 00:00:37,029
you can pass some of that data
into a lower level component

13
00:00:37,029 --> 00:00:39,780
which knows how to deal with it.

14
00:00:39,780 --> 00:00:43,350
It's like functional decomposition
in regular programing.

15
00:00:43,350 --> 00:00:44,760
When you've got a lot of work to do,

16
00:00:44,760 --> 00:00:46,680
you don't put everything
into the main function,

17
00:00:46,680 --> 00:00:48,030
it would just be too big.

18
00:00:48,030 --> 00:00:50,010
You define lower level functions

19
00:00:50,010 --> 00:00:52,620
and you pass parameters into them to say,

20
00:00:52,620 --> 00:00:55,350
can you deal with this
part of my processing?

21
00:00:55,350 --> 00:00:57,540
So that's what you do in
an Angular application.

22
00:00:57,540 --> 00:01:00,195
A high level component
often gets the data.

23
00:01:00,195 --> 00:01:02,220
It then passes some of that data

24
00:01:02,220 --> 00:01:04,920
into a lower level
component to say, please

25
00:01:04,920 --> 00:01:09,150
can you render this for me in
an encapsulated kind of way?

26
00:01:09,150 --> 00:01:13,200
So the lower level component
is like a subservient function.

27
00:01:13,200 --> 00:01:17,340
It receives an input from
its parent and renders it.

28
00:01:17,340 --> 00:01:21,150
It can also pass events back
out like an output parameter.

29
00:01:21,150 --> 00:01:25,710
Sometimes a lower level component
needs to notify its parent

30
00:01:25,710 --> 00:01:27,630
that something important has happened

31
00:01:27,630 --> 00:01:30,180
so that the whole webpage can be updated.

32
00:01:30,180 --> 00:01:32,570
So a lower level component
can receive inputs

33
00:01:32,570 --> 00:01:36,960
and it can also pass events
back out to its parent

34
00:01:36,960 --> 00:01:39,450
to say something interesting has happened

35
00:01:39,450 --> 00:01:42,060
that the whole webpage needs to display.

36
00:01:42,060 --> 00:01:45,043
There's an event mechanism
for passing output parameters

37
00:01:45,043 --> 00:01:48,612
from a low level component
back to your parent.

38
00:01:48,612 --> 00:01:52,350
I've got an example that
helps to put this together.

39
00:01:52,350 --> 00:01:54,180
If you go to lesson 12,

40
00:01:54,180 --> 00:01:57,870
it's example two, the demo app in there.

41
00:01:57,870 --> 00:02:02,640
If you run it, it's gonna,
it basically looks like this.

42
00:02:02,640 --> 00:02:05,400
I've got three products

43
00:02:05,400 --> 00:02:10,230
each product I can buy each
product displays some data

44
00:02:10,230 --> 00:02:14,070
and there's a Buy button here, okay?

45
00:02:14,070 --> 00:02:16,140
What's actually going on here is I've got

46
00:02:16,140 --> 00:02:20,320
a top level component called
app that has all the data.

47
00:02:20,320 --> 00:02:22,440
It has three products.

48
00:02:22,440 --> 00:02:25,800
I've got a lower level component
called product component.

49
00:02:25,800 --> 00:02:28,313
Each product component
displays one product

50
00:02:28,313 --> 00:02:32,070
and each product component
also can generate

51
00:02:32,070 --> 00:02:36,570
a sale event to say, this
product has been sold.

52
00:02:36,570 --> 00:02:41,490
This product has been sold,
and this product has been sold.

53
00:02:41,490 --> 00:02:43,230
When I click one of these buttons

54
00:02:43,230 --> 00:02:46,140
it generates an event, a sale event

55
00:02:46,140 --> 00:02:48,923
and it passes it back to
the top level component.

56
00:02:48,923 --> 00:02:51,000
And the top level component says, oh

57
00:02:51,000 --> 00:02:54,360
did this sale event just
occur on that product?

58
00:02:54,360 --> 00:02:56,076
It adds them into a big list of sales

59
00:02:56,076 --> 00:02:59,220
and it displays all the
lists at the bottom.

60
00:02:59,220 --> 00:03:02,760
So we're gonna see how
this works in this section.

61
00:03:02,760 --> 00:03:05,370
And then afterwards,
we'll see how to test it.

62
00:03:05,370 --> 00:03:08,130
How can you pass in
parameters into a component

63
00:03:08,130 --> 00:03:09,750
and how can you receive outputs

64
00:03:09,750 --> 00:03:12,090
from a component as an event?

65
00:03:12,090 --> 00:03:14,850
So in that application,
there were two components,

66
00:03:14,850 --> 00:03:18,360
the high level AppComponent
that receives the data

67
00:03:18,360 --> 00:03:20,056
and passes it down

68
00:03:20,056 --> 00:03:22,290
to a lower level component
called product component

69
00:03:22,290 --> 00:03:25,410
which decides how to display it, right?

70
00:03:25,410 --> 00:03:28,080
So let's dig into the code
and see how it all works.

71
00:03:28,080 --> 00:03:30,180
I thought a good starting point would be

72
00:03:30,180 --> 00:03:34,350
to define just a simple
class to represent a product,

73
00:03:34,350 --> 00:03:38,040
nothing to do with Angular,
nothing to do with templates.

74
00:03:38,040 --> 00:03:39,810
It's just basic data.

75
00:03:39,810 --> 00:03:44,220
A product has a description
and a category and a price.

76
00:03:44,220 --> 00:03:46,890
It's just a regular, plain old class.

77
00:03:46,890 --> 00:03:48,150
In my code folder,

78
00:03:48,150 --> 00:03:52,500
if you're going to source
app, you can see it here.

79
00:03:52,500 --> 00:03:57,180
Okay, so a product just has
data that can be displayed.

80
00:03:57,180 --> 00:03:59,220
I also thought it would
be useful to define

81
00:03:59,220 --> 00:04:02,910
an interface called sale, to
represent information about

82
00:04:02,910 --> 00:04:07,910
when the user clicks on the
Buy button for a product,

83
00:04:08,161 --> 00:04:11,242
it generates a sale
event to say this product

84
00:04:11,242 --> 00:04:13,274
has just been sold.

85
00:04:13,274 --> 00:04:15,346
So the way you represent events

86
00:04:15,346 --> 00:04:18,007
in Angular is using an interface.

87
00:04:18,007 --> 00:04:21,030
It basically represents
information about the event.

88
00:04:21,030 --> 00:04:23,831
When a sale occurs, you
need to know the description

89
00:04:23,831 --> 00:04:26,712
of the product that's
been sold and the quantity

90
00:04:26,712 --> 00:04:28,980
or how many have been sold.

91
00:04:28,980 --> 00:04:31,515
One of these event objects
will be emitted back

92
00:04:31,515 --> 00:04:35,493
to the parent whenever the
user clicks the Buy button.

93
00:04:36,420 --> 00:04:39,990
So let's see how the
components work, right?

94
00:04:39,990 --> 00:04:42,199
Probably the most important component

95
00:04:42,199 --> 00:04:43,650
in this is the product component.

96
00:04:43,650 --> 00:04:46,320
The product component receives inputs

97
00:04:46,320 --> 00:04:49,830
to say this is the data
that you need to display.

98
00:04:49,830 --> 00:04:53,070
And it also has to generate
an event, a sale event

99
00:04:53,070 --> 00:04:54,870
back out to the parent

100
00:04:54,870 --> 00:04:57,090
whenever the user clicks the Buy button

101
00:04:57,090 --> 00:04:59,400
to notify the parent component

102
00:04:59,400 --> 00:05:02,340
that another sale needs to be displayed.

103
00:05:02,340 --> 00:05:05,400
So let's have a look at the
product component, right?

104
00:05:05,400 --> 00:05:09,009
So here is my low level product
component, class definition

105
00:05:09,009 --> 00:05:12,230
my top level AppComponent,

106
00:05:12,230 --> 00:05:15,000
this is how it's gonna hand together.

107
00:05:15,000 --> 00:05:16,457
My top level AppComponent

108
00:05:16,457 --> 00:05:21,457
will basically have three
product objects, okay?

109
00:05:21,467 --> 00:05:23,550
And for each product object

110
00:05:23,550 --> 00:05:26,451
it'll pass that into a product component.

111
00:05:26,451 --> 00:05:30,450
I'll write PC, okay product component,

112
00:05:30,450 --> 00:05:31,800
it'll pass it as an input.

113
00:05:31,800 --> 00:05:34,305
It'll pass one product object as an input

114
00:05:34,305 --> 00:05:36,570
to that product component

115
00:05:36,570 --> 00:05:39,361
it'll then create another
product component.

116
00:05:39,361 --> 00:05:43,170
I'll pass this product
object as an input into that.

117
00:05:43,170 --> 00:05:46,529
So each product component
receives as an input,

118
00:05:46,529 --> 00:05:51,529
a product object, basically to render.

119
00:05:52,020 --> 00:05:54,466
So here's my product component class.

120
00:05:54,466 --> 00:05:57,120
Let's go through the code then.

121
00:05:57,120 --> 00:06:00,178
So it has an input
property called product.

122
00:06:00,178 --> 00:06:03,570
Okay, so let's look at that.

123
00:06:03,570 --> 00:06:06,480
It receives when a product
component is rendered,

124
00:06:06,480 --> 00:06:08,610
it'll receive an input parameter.

125
00:06:08,610 --> 00:06:11,820
It's like a function that
receives an input parameter,

126
00:06:11,820 --> 00:06:15,489
input is a standard decorator in Angular.

127
00:06:15,489 --> 00:06:19,200
So my product component,
my product component.

128
00:06:19,200 --> 00:06:20,430
If I draw it here,

129
00:06:20,430 --> 00:06:23,739
my product component will
automatically receive.

130
00:06:23,739 --> 00:06:27,408
It will automatically be
initialized like a parameter.

131
00:06:27,408 --> 00:06:29,010
There'll be a product field

132
00:06:29,010 --> 00:06:32,340
in here which will
automatically be hooked up

133
00:06:32,340 --> 00:06:35,708
to point to a product object.

134
00:06:35,708 --> 00:06:39,690
Okay, so my application
component will basically

135
00:06:39,690 --> 00:06:43,980
pass a product object,
a high definition TV,

136
00:06:43,980 --> 00:06:46,770
it'll pass it into this property.

137
00:06:46,770 --> 00:06:49,290
This property will
automatically be initialized

138
00:06:49,290 --> 00:06:53,790
to point to a product passed
in by the application.

139
00:06:53,790 --> 00:06:56,640
The exclamation mark is
a relatively new addition

140
00:06:56,640 --> 00:06:58,140
in type script.

141
00:06:58,140 --> 00:06:59,940
The type script compiler would likes

142
00:06:59,940 --> 00:07:02,100
to see everything being initialized.

143
00:07:02,100 --> 00:07:04,260
So when you have a field that doesn't seem

144
00:07:04,260 --> 00:07:08,220
to have any construction,
you'd get a type script error.

145
00:07:08,220 --> 00:07:12,780
The exclamation mark says it
is definitely initialized.

146
00:07:12,780 --> 00:07:14,310
It's just not yet.

147
00:07:14,310 --> 00:07:16,150
You can't see it in the constructor

148
00:07:17,983 --> 00:07:19,470
but it will be initialized
by some other mechanism.

149
00:07:19,470 --> 00:07:21,967
The application component
will basically pass

150
00:07:22,935 --> 00:07:25,020
in a value to initialize this field.

151
00:07:25,020 --> 00:07:26,940
So it stops the compiler

152
00:07:26,940 --> 00:07:30,540
from complaining about
an un-initialized field.

153
00:07:30,540 --> 00:07:33,150
So whenever you have
a component that needs

154
00:07:33,150 --> 00:07:37,590
to receive an input to say what
data to display input, okay?

155
00:07:37,590 --> 00:07:40,430
That's how you receive the input.

156
00:07:40,430 --> 00:07:42,900
Okay, now what else have we got?

157
00:07:42,900 --> 00:07:45,840
I've got an output property here sale.

158
00:07:45,840 --> 00:07:49,260
So effectively, that means
my product component.

159
00:07:49,260 --> 00:07:51,210
If this is my product component

160
00:07:51,210 --> 00:07:54,930
my product component is
going to emit an event.

161
00:07:54,930 --> 00:07:57,183
And that event would be called sale.

162
00:07:58,980 --> 00:08:01,470
Like a button click from a button.

163
00:08:01,470 --> 00:08:04,890
My product component
can emit a sale event.

164
00:08:04,890 --> 00:08:09,150
Now, technically speaking an
event, an output parameter

165
00:08:09,150 --> 00:08:11,550
is an instance of event emitter.

166
00:08:11,550 --> 00:08:14,361
Event emitter is a regular Angular class

167
00:08:14,361 --> 00:08:16,800
and you have to specify what kind

168
00:08:16,800 --> 00:08:18,950
of object when you raise an event

169
00:08:18,950 --> 00:08:22,320
or when you emit an event,
you have to pass data out.

170
00:08:22,320 --> 00:08:23,790
And that's what this says.

171
00:08:23,790 --> 00:08:26,288
What kind of object will be emitted?

172
00:08:26,288 --> 00:08:30,003
Well, that's the sale object
that we looked at just now.

173
00:08:31,170 --> 00:08:33,960
Okay, when I was showing
you the sale interface

174
00:08:33,960 --> 00:08:36,873
basically one of these
objects will be emitted

175
00:08:36,873 --> 00:08:38,988
whenever a sale occurs.

176
00:08:38,988 --> 00:08:42,630
Okay, so we'll explain how
that happens in a minute.

177
00:08:42,630 --> 00:08:47,047
But basically this sale
property is an output event

178
00:08:47,047 --> 00:08:50,550
and it will have in here,
like the product description

179
00:08:50,550 --> 00:08:53,343
and the quantity that
the user has just bought.

180
00:08:54,210 --> 00:08:57,776
So presumably that sale
event will be handled

181
00:08:57,776 --> 00:08:59,370
by my application component.

182
00:08:59,370 --> 00:09:02,010
It's a way of notifying for me down here.

183
00:09:02,010 --> 00:09:05,925
I can notify my parent
that a sale has occurred.

184
00:09:05,925 --> 00:09:07,800
So we can basically update the list

185
00:09:07,800 --> 00:09:10,383
of sales being displayed on the webpage.

186
00:09:11,430 --> 00:09:12,600
As it happens,

187
00:09:12,600 --> 00:09:16,621
the way it works is each
product has a button.

188
00:09:16,621 --> 00:09:19,650
And when the user clicks this button

189
00:09:19,650 --> 00:09:22,770
this is the event handler
function that gets invoked, okay?

190
00:09:22,770 --> 00:09:26,730
So basically the user has
clicked Buy on one product.

191
00:09:26,730 --> 00:09:30,210
So what we do is we create a sale object.

192
00:09:30,210 --> 00:09:32,550
We create a sale object to say

193
00:09:32,550 --> 00:09:34,890
what's the description of the product.

194
00:09:34,890 --> 00:09:37,800
So I'm creating a sale object here.

195
00:09:37,800 --> 00:09:39,450
Let's say the product description

196
00:09:40,896 --> 00:09:43,110
is an ultra high definition
TV, and what's the quantity?

197
00:09:43,110 --> 00:09:45,000
Well, I've just hard coded that as one.

198
00:09:45,000 --> 00:09:47,070
So I've set the quantity to one.

199
00:09:47,070 --> 00:09:49,350
That sale object I then emit, I say

200
00:09:49,350 --> 00:09:54,350
on this sale emitter, emit the
data that I've just created.

201
00:09:54,510 --> 00:09:57,660
Here's the data emitted as the sale event.

202
00:09:57,660 --> 00:10:00,450
So effectively from my
product component here

203
00:10:00,450 --> 00:10:02,763
it has just emitted a sale event.

204
00:10:04,012 --> 00:10:07,530
And the object here describes the sale

205
00:10:07,530 --> 00:10:09,930
what product and how many.

206
00:10:09,930 --> 00:10:12,600
So my component can receive inputs

207
00:10:12,600 --> 00:10:15,900
from the parent to say,
here's the data you need.

208
00:10:15,900 --> 00:10:18,120
And I can raise events and pass them back

209
00:10:18,120 --> 00:10:21,780
as outputs back to my parent,
my parent, presumably be

210
00:10:21,780 --> 00:10:25,170
in the application component
to say, handle that event.

211
00:10:25,170 --> 00:10:29,400
Something important just happened, right?

212
00:10:29,400 --> 00:10:30,840
So here's the HTML.

213
00:10:30,840 --> 00:10:33,540
This is the HTML for a product.

214
00:10:33,540 --> 00:10:36,480
It's my product component, HTML.

215
00:10:36,480 --> 00:10:38,160
This is what we see being displayed here

216
00:10:38,160 --> 00:10:42,210
each product will
receive a product object.

217
00:10:42,210 --> 00:10:46,290
Okay, so remember in my
product component class

218
00:10:46,290 --> 00:10:50,343
it has a field called product.

219
00:10:51,930 --> 00:10:56,760
My application component will
have created a product object

220
00:10:56,760 --> 00:11:00,090
and basically passed it in to that, okay?

221
00:11:00,090 --> 00:11:02,970
So my product component
has a product field

222
00:11:02,970 --> 00:11:06,333
which points to a product object.

223
00:11:06,333 --> 00:11:09,891
And inside that product
object, there's a description,

224
00:11:09,891 --> 00:11:13,410
a category and a price.

225
00:11:13,410 --> 00:11:16,565
So get the product object
that takes me over here,

226
00:11:16,565 --> 00:11:20,850
in that product object,
get the description,

227
00:11:20,850 --> 00:11:22,293
the category and the price,

228
00:11:23,580 --> 00:11:26,230
get the description, the
category and the price

229
00:11:27,401 --> 00:11:29,970
of the product that was
passed into me as an input.

230
00:11:29,970 --> 00:11:33,255
Oh, and also when the
user clicks the Buy button

231
00:11:33,255 --> 00:11:35,250
it calls the click function.

232
00:11:35,250 --> 00:11:37,740
And remember what that
does the click function,

233
00:11:37,740 --> 00:11:40,710
if here's my product
component, the click function

234
00:11:40,710 --> 00:11:42,840
it created a sale object

235
00:11:42,840 --> 00:11:45,513
and it admitted that sale
object as a sale event.

236
00:11:47,676 --> 00:11:52,500
Okay and my application component
can handle the sale event

237
00:11:52,500 --> 00:11:55,650
for my product and update the products

238
00:11:55,650 --> 00:11:58,260
the sales that are displayed.

239
00:11:58,260 --> 00:12:00,040
So I think we've finished looking

240
00:12:01,059 --> 00:12:02,100
at the low level component.

241
00:12:02,100 --> 00:12:04,500
We've seen how to receive inputs.

242
00:12:04,500 --> 00:12:06,604
We've seen how to send outputs.

243
00:12:06,604 --> 00:12:08,430
We need to look at it from the other side

244
00:12:08,430 --> 00:12:12,090
of the coin now and see how the
application component works.

245
00:12:12,090 --> 00:12:14,010
So here's my application component,

246
00:12:14,010 --> 00:12:16,649
in terms of code, it's quite simple.

247
00:12:16,649 --> 00:12:20,760
I've got an empty array of
products, which I then populate.

248
00:12:20,760 --> 00:12:22,470
So those are the products.

249
00:12:22,470 --> 00:12:26,340
My application component
basically owns the data.

250
00:12:26,340 --> 00:12:30,540
So my application component
has three products

251
00:12:30,540 --> 00:12:32,760
in an array like that.

252
00:12:32,760 --> 00:12:35,490
And ultimately, what it's
gonna do is gonna basically

253
00:12:35,490 --> 00:12:39,192
pass each one as an input
into a product component,

254
00:12:39,192 --> 00:12:40,620
it'll create a product component

255
00:12:40,620 --> 00:12:43,710
and pass the ultra high definition TV.

256
00:12:43,710 --> 00:12:45,660
It'll create a second product component

257
00:12:47,190 --> 00:12:48,240
and it'll pass in the second product,

258
00:12:48,240 --> 00:12:50,310
that'll be the carving skis.

259
00:12:50,310 --> 00:12:52,290
And then it'll create
another product component.

260
00:12:52,290 --> 00:12:55,110
Basically, each component has an input

261
00:12:55,110 --> 00:12:57,205
for which is one product.

262
00:12:57,205 --> 00:12:59,910
Oh, but also of course,

263
00:12:59,910 --> 00:13:03,335
each of these products
can generate a sale event.

264
00:13:03,335 --> 00:13:06,270
Maybe that product's been sold

265
00:13:06,270 --> 00:13:08,160
or that product has been sold.

266
00:13:08,160 --> 00:13:10,890
So I need to handle those events
and that's what this does.

267
00:13:10,890 --> 00:13:12,660
We'll see how it hooks up in a minute.

268
00:13:12,660 --> 00:13:14,670
But this is my callback function.

269
00:13:14,670 --> 00:13:16,980
This callback function will handle a sale

270
00:13:16,980 --> 00:13:20,880
that comes from one of these components.

271
00:13:20,880 --> 00:13:25,500
So here it is, it'll handle,
it'll receive the sale object,

272
00:13:25,500 --> 00:13:28,326
the product description and the quantity.

273
00:13:28,326 --> 00:13:29,853
It just builds up a string,

274
00:13:30,816 --> 00:13:34,290
high definition TV, quantity one.

275
00:13:34,290 --> 00:13:37,140
And then it adds that string into a list.

276
00:13:37,140 --> 00:13:38,670
I've got an array here.

277
00:13:38,670 --> 00:13:40,710
It's just a list of strings.

278
00:13:40,710 --> 00:13:41,940
That's the list of strings

279
00:13:41,940 --> 00:13:45,309
that is displayed at the
bottom of the webpage.

280
00:13:45,309 --> 00:13:49,380
So these are the skills
that actually get displayed.

281
00:13:49,380 --> 00:13:51,663
It's just a list of innovative strings.

282
00:13:53,470 --> 00:13:55,793
Right, here is the here's
where it all comes together.

283
00:13:56,675 --> 00:13:57,900
So my top level application component,

284
00:13:57,900 --> 00:14:02,190
remember my top level
application component

285
00:14:02,190 --> 00:14:07,190
had three products, the
TV, the skis, and the boots

286
00:14:07,770 --> 00:14:10,688
and what it does for each
of those bits of data

287
00:14:10,688 --> 00:14:12,831
it creates a product component

288
00:14:12,831 --> 00:14:16,950
and it passes it in as an input, okay?

289
00:14:16,950 --> 00:14:19,470
And that's what we see happening here,

290
00:14:19,470 --> 00:14:21,090
so I'm gonna explain that in a moment.

291
00:14:21,090 --> 00:14:24,030
I'm just gonna kind of help
you to visualize it first.

292
00:14:24,030 --> 00:14:26,775
So it'll basically create
three product components

293
00:14:26,775 --> 00:14:31,383
and it'll pass the product
data as an input into each one.

294
00:14:32,460 --> 00:14:33,420
So let's have a look at that.

295
00:14:33,420 --> 00:14:36,300
Then you can write a for loop in Angular.

296
00:14:36,300 --> 00:14:39,210
You can have, this is called
a structural directive.

297
00:14:39,210 --> 00:14:41,590
It's a for loop, in Angular for loop

298
00:14:42,864 --> 00:14:44,280
where you give it the array products

299
00:14:44,280 --> 00:14:47,340
and well, so P is going to be one product.

300
00:14:47,340 --> 00:14:50,689
And what it does is it
renders the product component.

301
00:14:50,689 --> 00:14:54,690
Remember the product component.

302
00:14:54,690 --> 00:14:56,890
If I go into the product component

303
00:14:58,020 --> 00:14:59,610
remember the product component

304
00:14:59,610 --> 00:15:03,210
it had a selector app product, okay?

305
00:15:03,210 --> 00:15:06,840
So whenever you wanna
create a product component

306
00:15:06,840 --> 00:15:11,310
you basically use that, but
it has an input parameter.

307
00:15:11,310 --> 00:15:13,110
Whenever you render one of those,

308
00:15:13,110 --> 00:15:16,800
you've gotta give it a
product property as an input

309
00:15:16,800 --> 00:15:18,390
and you've gotta handle the possibility

310
00:15:18,390 --> 00:15:21,570
of a sale event to be an output, okay?

311
00:15:21,570 --> 00:15:24,420
So when my application component creates

312
00:15:24,420 --> 00:15:26,100
one of these products

313
00:15:26,100 --> 00:15:28,350
it's gotta pass a product
property as an input

314
00:15:28,350 --> 00:15:31,773
and it's gonna handle the
sale event as an output.

315
00:15:32,790 --> 00:15:37,790
So this is how you do it render
a and app product, right?

316
00:15:38,850 --> 00:15:40,950
So that's going to be a product component.

317
00:15:41,970 --> 00:15:43,650
I'll just write PC.

318
00:15:43,650 --> 00:15:47,880
The product component
has a product property

319
00:15:47,880 --> 00:15:49,203
and input property.

320
00:15:50,893 --> 00:15:53,100
Here is how you initialize
an input property.

321
00:15:53,100 --> 00:15:55,470
When you render a component.

322
00:15:55,470 --> 00:15:58,710
If that component has an input property,

323
00:15:58,710 --> 00:16:01,710
square brackets, okay, it'll initialize.

324
00:16:01,710 --> 00:16:05,430
It's like passing the parameter
into the product property.

325
00:16:05,430 --> 00:16:07,620
So the first product was going to be

326
00:16:07,620 --> 00:16:12,247
the ultra high definition,
TV, 1800 pounds,

327
00:16:14,100 --> 00:16:16,170
a bargain like that.

328
00:16:16,170 --> 00:16:19,830
That object is basically
hooked up like that.

329
00:16:19,830 --> 00:16:21,900
I've passed in as an input,

330
00:16:21,900 --> 00:16:25,620
I've passed my product as
an input to this field.

331
00:16:25,620 --> 00:16:30,210
Also my product component
can generate a sale event

332
00:16:30,210 --> 00:16:31,650
as an output.

333
00:16:31,650 --> 00:16:32,760
This is how you handle events.

334
00:16:32,760 --> 00:16:34,380
Well, we know this already.

335
00:16:34,380 --> 00:16:37,380
We've seen this before, when
we handle button clicks.

336
00:16:37,380 --> 00:16:38,910
When you have some kind

337
00:16:38,910 --> 00:16:40,920
of element that can generate an event

338
00:16:40,920 --> 00:16:44,086
this is how you say, well,
it can generate a sale event.

339
00:16:44,086 --> 00:16:47,222
If the sale event occurs,
call this function.

340
00:16:47,222 --> 00:16:49,895
Okay, so that would basically call

341
00:16:49,895 --> 00:16:52,654
if that component generates the sale event

342
00:16:52,654 --> 00:16:54,655
it calls this function.

343
00:16:54,655 --> 00:16:58,350
That's the function we just
looked at on the previous slide

344
00:16:58,350 --> 00:17:02,734
it'll grab the sale event,
ultra high definition TV

345
00:17:02,734 --> 00:17:05,587
that gets passed in a dollar event.

346
00:17:05,587 --> 00:17:10,380
That's the sale event that
my product rendered emitted.

347
00:17:10,380 --> 00:17:13,620
So when the user clicked
the Buy button on here,

348
00:17:13,620 --> 00:17:16,816
it emitted a sale object sale event

349
00:17:16,816 --> 00:17:19,448
that gets handled by this function.

350
00:17:19,448 --> 00:17:23,047
This is the sale object that was emitted.

351
00:17:23,047 --> 00:17:26,160
Let me remind you how that worked

352
00:17:26,160 --> 00:17:28,080
in my application component.

353
00:17:28,080 --> 00:17:30,420
My application component can say

354
00:17:30,420 --> 00:17:32,190
there's the sale handler function.

355
00:17:32,190 --> 00:17:37,140
It'll receive the sale event
and update the list of sales

356
00:17:37,140 --> 00:17:38,977
in its array.

357
00:17:38,977 --> 00:17:41,280
Right, okay then.

358
00:17:41,280 --> 00:17:44,790
So let's just summarize
then app product create

359
00:17:44,790 --> 00:17:48,030
and render a product
component for one product.

360
00:17:48,030 --> 00:17:49,927
This is going to be three times

361
00:17:49,927 --> 00:17:54,060
that syntax the square bracket product,

362
00:17:54,060 --> 00:17:56,070
that's how you pass an input parameter

363
00:17:56,070 --> 00:17:57,600
into a product component.

364
00:17:57,600 --> 00:17:59,940
That's the name of the
field in the component.

365
00:17:59,940 --> 00:18:01,575
And here's the value
you're passing into it.

366
00:18:01,575 --> 00:18:05,850
The round bracket sale
handles the sale event

367
00:18:05,850 --> 00:18:06,900
from the component,

368
00:18:06,900 --> 00:18:09,240
hooks it up to this event handler function

369
00:18:09,240 --> 00:18:10,655
in my application.

370
00:18:10,655 --> 00:18:14,952
Finally, we display the
sales at the bottom.

371
00:18:14,952 --> 00:18:17,248
Okay, so here are the list of sales.

372
00:18:17,248 --> 00:18:22,248
Sales, remember, is just
an array of strings.

373
00:18:22,734 --> 00:18:27,536
So it'll always iterate
through that list of sales

374
00:18:27,536 --> 00:18:31,200
and for each sale, it'll
dissipate as a string.

375
00:18:31,200 --> 00:18:32,033
There we go.

376
00:18:32,033 --> 00:18:33,935
So that concludes the example.

377
00:18:33,935 --> 00:18:36,300
We've seen how a component

378
00:18:36,300 --> 00:18:41,300
like product component can
receive an input from its parent

379
00:18:42,967 --> 00:18:47,550
and how it can emit an
output back to its parent

380
00:18:47,550 --> 00:18:49,140
from the parent's perspective

381
00:18:49,140 --> 00:18:52,950
when the parent renders
the lower level component,

382
00:18:52,950 --> 00:18:56,160
you can set a property as an input

383
00:18:56,160 --> 00:18:58,923
and you can handle an event as an output.

384
00:19:00,364 --> 00:19:01,890
Okay, so that's a nice example.

385
00:19:01,890 --> 00:19:04,160
What we're gonna do in the next session

386
00:19:04,160 --> 00:19:08,523
is see how to test these
components using Jasmine.