1
00:00:03,650 --> 00:00:11,280
Time to continue with our next exercise where we will examine components once again.

2
00:00:11,280 --> 00:00:15,600
We will modify the template for

3
00:00:15,600 --> 00:00:20,670
the menu component that we have already included into our Angular application

4
00:00:20,670 --> 00:00:30,580
by using a new kind of material component to layout our menu in a different way.

5
00:00:30,580 --> 00:00:36,625
Along the way, we will also look at the use of the ngIf structural directive.

6
00:00:36,625 --> 00:00:40,790
Going to the template file of our menu component,

7
00:00:40,790 --> 00:00:44,685
I'm going to make some changes to this template file.

8
00:00:44,685 --> 00:00:47,900
First, I'm going to add in another div here

9
00:00:47,900 --> 00:00:56,170
with fxFlex and then close off that div there.

10
00:00:56,170 --> 00:01:01,245
So, notice that now inside my outer div,

11
00:01:01,245 --> 00:01:03,050
I have two divs here.

12
00:01:03,050 --> 00:01:07,855
So, one with the div and the second one with the empty list.

13
00:01:07,855 --> 00:01:15,880
So, these are two pieces of content that need to be laid out onto the screen.

14
00:01:15,880 --> 00:01:19,450
But note that I have specified the fxLayout to be colored.

15
00:01:19,450 --> 00:01:21,590
So, which means that, these two pieces of

16
00:01:21,590 --> 00:01:24,445
content will be laid out one on top of each other,

17
00:01:24,445 --> 00:01:27,025
stacked one on top of each other.

18
00:01:27,025 --> 00:01:29,370
So, in the first div,

19
00:01:29,370 --> 00:01:32,330
I'm going to include a little bit of content here.

20
00:01:32,330 --> 00:01:38,570
So, I will put another div inside here.

21
00:01:38,570 --> 00:01:42,005
Later on, I will be adding more into this div.

22
00:01:42,005 --> 00:01:50,625
But for the moment, I will only have an h3 with the menu item there,

23
00:01:50,625 --> 00:01:56,875
and then add a horizontal line element to this menu.

24
00:01:56,875 --> 00:02:02,780
So, this will give the title for

25
00:02:02,780 --> 00:02:08,900
this particular page right on top in my application when it is rendered.

26
00:02:08,900 --> 00:02:12,395
So, that is one modification.

27
00:02:12,395 --> 00:02:14,070
Now for the second part,

28
00:02:14,070 --> 00:02:16,435
instead of using the mat-list-item,

29
00:02:16,435 --> 00:02:21,830
I'm going to now take the help of a mat-grid-list.

30
00:02:21,830 --> 00:02:26,000
Mat-grid-list allows me to layout the content as

31
00:02:26,000 --> 00:02:30,625
a grid of items rather than a list of items.

32
00:02:30,625 --> 00:02:38,220
We saw how the menu was laid out with the list of items in the previous exercise.

33
00:02:38,220 --> 00:02:41,810
Now, I would like to lay out the same menu in a different way a

34
00:02:41,810 --> 00:02:45,615
bit more attractive layout for the menu.

35
00:02:45,615 --> 00:02:48,140
So, instead of using the mat-list,

36
00:02:48,140 --> 00:02:52,520
I am going to now change this from mat-list to a mat-grid-list.

37
00:02:52,520 --> 00:02:54,005
So, before I do that,

38
00:02:54,005 --> 00:03:03,645
I will also enclose this inside another div to which I will apply the fxFlex here,

39
00:03:03,645 --> 00:03:10,320
so that the mat-grid-list is in its own there.

40
00:03:10,320 --> 00:03:14,540
So, that will give me more flexibility for adding items

41
00:03:14,540 --> 00:03:19,180
to this particular unit if I need later on.

42
00:03:19,180 --> 00:03:23,505
The grid list now takes a parameter called as

43
00:03:23,505 --> 00:03:28,450
columns which specifies how many columns should this grid contain.

44
00:03:28,450 --> 00:03:35,540
Right now I will specify the columns as two because I only have four items in my menu.

45
00:03:35,540 --> 00:03:37,290
So, two columns are sufficient enough.

46
00:03:37,290 --> 00:03:41,995
So, at least I have two rows of the grid there.

47
00:03:41,995 --> 00:03:45,770
Also, this takes another parameter called

48
00:03:45,770 --> 00:03:50,010
as rowHeight or an attribute called as rowHeight,

49
00:03:50,010 --> 00:03:56,650
which I will specify to be 200 pixel here.

50
00:03:56,680 --> 00:04:03,630
So, that would complete the mat-grid-list that I have inside the div there.

51
00:04:03,630 --> 00:04:09,120
Now, once I make the change, then inside this,

52
00:04:09,120 --> 00:04:12,700
I will go in and use,

53
00:04:12,700 --> 00:04:15,045
instead of the mat-list-item,

54
00:04:15,045 --> 00:04:20,450
this is now going to be a mat-grid-tile here.

55
00:04:20,450 --> 00:04:22,480
So, the grid tile.

56
00:04:22,480 --> 00:04:24,580
Basically, tiles of the grid.

57
00:04:24,580 --> 00:04:27,350
This grid tile, as you realize,

58
00:04:27,350 --> 00:04:31,200
I'm going to be iterating over the list of dishes.

59
00:04:31,200 --> 00:04:35,090
So, I'm still using my ngFor directive with it.

60
00:04:35,090 --> 00:04:38,510
This mat-grid-tile will now enclose

61
00:04:38,510 --> 00:04:43,095
the content that is going to be laid out in each tile of my grid here.

62
00:04:43,095 --> 00:04:45,320
Now, inside the tile,

63
00:04:45,320 --> 00:04:49,105
I'm going to use the image as it exists.

64
00:04:49,105 --> 00:04:53,990
But I'm going to use the image,

65
00:04:53,990 --> 00:04:58,750
not with the matListAvatar because that cannot be applied here, and instead,

66
00:04:58,750 --> 00:05:04,720
I will specify the height for the image as 200 pixels.

67
00:05:04,720 --> 00:05:09,230
So, this matches the row height so that my image will stretch

68
00:05:09,230 --> 00:05:14,325
the entire height of my tile there.

69
00:05:14,325 --> 00:05:16,830
So, image height, 200 pixel,

70
00:05:16,830 --> 00:05:20,190
and the source and the alt will remain as such.

71
00:05:20,190 --> 00:05:22,745
Then, the next part,

72
00:05:22,745 --> 00:05:24,830
instead of the h1,

73
00:05:24,830 --> 00:05:27,110
I'm going to change this one

74
00:05:27,110 --> 00:05:33,880
to be

75
00:05:33,880 --> 00:05:39,710
enclosed inside mat-grid-tile-footer.

76
00:05:41,780 --> 00:05:49,770
So, whatever content is inside here will appear inside the mat-grid-tile-footer here.

77
00:05:49,770 --> 00:05:54,035
Now, inside there I can specify whatever content I want.

78
00:05:54,035 --> 00:05:57,295
So, for the grid tile,

79
00:05:57,295 --> 00:06:00,170
given the complete description is a bit too much.

80
00:06:00,170 --> 00:06:02,245
So, I'm going to remove this description,

81
00:06:02,245 --> 00:06:05,765
and instead, only use the h1 there.

82
00:06:05,765 --> 00:06:12,355
Now, in addition, I'm going to take the help of an angular pipe here.

83
00:06:12,355 --> 00:06:16,340
The pipe that I'm going to apply to this, as you can see,

84
00:06:16,340 --> 00:06:22,095
the pipe is the vertical bar on your keyboard.

85
00:06:22,095 --> 00:06:25,440
Then, I will use the uppercase pipe.

86
00:06:25,440 --> 00:06:27,175
So, what does this pipe do?

87
00:06:27,175 --> 00:06:32,795
This pipe, the uppercase pipe will transform the dish name from

88
00:06:32,795 --> 00:06:39,015
whatever it is into an entire word with uppercase letters.

89
00:06:39,015 --> 00:06:42,215
So, whatever the dish name would be rendered as

90
00:06:42,215 --> 00:06:49,280
completely uppercase letters when it is rendered onto the template there.

91
00:06:49,280 --> 00:06:52,800
So, that's the use of an angular pipe here.

92
00:06:52,800 --> 00:06:56,870
So, we're going to use more angular pipes as we go along.

93
00:06:56,870 --> 00:07:05,205
This is our first encounter with one of the built-in angular pipes in this course.

94
00:07:05,205 --> 00:07:10,400
So, with this, we have now modified our layout

95
00:07:10,400 --> 00:07:15,670
to show this div here and then this grid list here.

96
00:07:15,670 --> 00:07:17,240
Let's save the changes.

97
00:07:17,240 --> 00:07:21,070
Going now to app.module.ts file,

98
00:07:21,070 --> 00:07:24,640
we need to import the MatGridListModule in there.

99
00:07:24,640 --> 00:07:27,660
So, going to the top there, we'll say,

100
00:07:27,660 --> 00:07:36,490
"Import MatGridListModule from angular/material/grid/list."

101
00:07:39,260 --> 00:07:42,055
Once we have added this,

102
00:07:42,055 --> 00:07:45,925
then we will go down to the imports in the decorator,

103
00:07:45,925 --> 00:07:53,210
and then include the MatGridListModule into the inputs.

104
00:07:53,210 --> 00:07:55,830
Let's, again, save the changes.

105
00:07:55,830 --> 00:08:01,650
Let's go and take a quick look at our webpage and what it looks like on the screen.

106
00:08:01,650 --> 00:08:03,730
Going to our webpage,

107
00:08:03,730 --> 00:08:09,125
you can now see that your menu is now laid out in a different way.

108
00:08:09,125 --> 00:08:13,590
Although, it is not really that great looking at the moment.

109
00:08:13,590 --> 00:08:15,230
I am no designer,

110
00:08:15,230 --> 00:08:18,880
so that's the best that I could get from it.

111
00:08:18,880 --> 00:08:22,330
Now, if I had 20 items in my menu,

112
00:08:22,330 --> 00:08:27,110
then I could lay out multiple items on each row and multiple columns,

113
00:08:27,110 --> 00:08:31,860
and then I could compress the space that each item occupies,

114
00:08:31,860 --> 00:08:35,660
or I can increase the size of the image so that it

115
00:08:35,660 --> 00:08:40,245
occupies the entire thing until it'll look a lot more attractive on the screen.

116
00:08:40,245 --> 00:08:49,185
Now, let's take a look at this same thing when it is viewed in a smaller devices' screen.

117
00:08:49,185 --> 00:08:52,400
So, this is where I'm going to take the help of

118
00:08:52,400 --> 00:08:57,990
the developer options in my Chrome browser.

119
00:08:57,990 --> 00:09:01,175
So, I will start off the development tools here.

120
00:09:01,175 --> 00:09:04,330
When I have the development tools here,

121
00:09:04,330 --> 00:09:08,340
you can see this button here saying, "Toggle device toolbar."

122
00:09:08,340 --> 00:09:10,070
So, let me toggle back.

123
00:09:10,070 --> 00:09:16,180
Then you can see the same page being rendered on different screen sizes.

124
00:09:16,180 --> 00:09:23,210
So here, you see the page being rendered in a Galaxy S5,

125
00:09:23,210 --> 00:09:27,030
and then the same thing

126
00:09:28,090 --> 00:09:34,435
you can see it being rendered in landscape mode.

127
00:09:34,435 --> 00:09:39,110
So, you can see that this allows me to view the same page

128
00:09:39,110 --> 00:09:44,490
on different screen sizes using the built-in developer tools in Android.

129
00:09:44,490 --> 00:09:48,755
So, let's take a look at what it looks like on an iPhone.

130
00:09:48,755 --> 00:09:51,815
The menu looks much more attractive here.

131
00:09:51,815 --> 00:09:55,220
This is what I would like to achieve on the screen.

132
00:09:55,220 --> 00:10:02,155
If my images were much larger in size even on the higher resolution screens,

133
00:10:02,155 --> 00:10:06,045
the menu would look like this.

134
00:10:06,045 --> 00:10:11,205
In landscape mode, this is what it's going to look like.

135
00:10:11,205 --> 00:10:15,045
Now, take a note of this developer tools in Chrome.

136
00:10:15,045 --> 00:10:21,790
We're going to be using the developer tools later on when we use Angular in

137
00:10:21,790 --> 00:10:25,340
more detail because we can examine things like what Angular

138
00:10:25,340 --> 00:10:30,180
can print for us on the console.

139
00:10:30,180 --> 00:10:36,650
Then we can even examine how the different parts of our application are being fetched.

140
00:10:36,650 --> 00:10:40,440
We can look at the network performance of our application, and so on.

141
00:10:40,440 --> 00:10:45,110
So, that is where these developer tools addition is very,

142
00:10:45,110 --> 00:10:47,270
very useful for us.

143
00:10:47,270 --> 00:10:51,100
Switching back to the normal way,

144
00:10:51,100 --> 00:10:56,790
this is what our webpage looks like on a standard desktop browser.

145
00:10:56,790 --> 00:10:58,545
We're not done yet.

146
00:10:58,545 --> 00:11:02,955
Let's go back to the menu components.

147
00:11:02,955 --> 00:11:07,200
Typescript file and then this dishes that I have

148
00:11:07,200 --> 00:11:11,765
defined here instead of keeping this inside my class,

149
00:11:11,765 --> 00:11:18,060
I'm going to move this dishes into a constant that I

150
00:11:18,060 --> 00:11:25,670
will define right up there and we'll name it as const dishes,

151
00:11:25,860 --> 00:11:31,370
and this would be of the type dish an array,

152
00:11:31,370 --> 00:11:38,825
and then I will cut this whole set of dishes from here and then move it up there.

153
00:11:38,825 --> 00:11:43,450
This is in preparation for a future exercise where we're going

154
00:11:43,450 --> 00:11:50,050
to not include this kind of data in our application,

155
00:11:50,050 --> 00:11:59,950
but instead we will be moving this into a service.

156
00:11:59,950 --> 00:12:05,260
So, what I have done is cut that dishes information and

157
00:12:05,260 --> 00:12:11,405
then put it into a constant here with the name dishes in all capitals here,

158
00:12:11,405 --> 00:12:16,100
and then now my dishes is left as an orphan here.

159
00:12:16,100 --> 00:12:26,275
So, this I'm going to make it equal to dishes here.

160
00:12:26,275 --> 00:12:31,165
Now, you got to wonder how come I have removed the type for the dishes.

161
00:12:31,165 --> 00:12:35,125
TypeScript is intelligent enough to realize that when you do this,

162
00:12:35,125 --> 00:12:40,360
it will automatically assign the type to dishes to match what you have in dishes.

163
00:12:40,360 --> 00:12:44,195
So, even if you don't type it in TypeScript will do that,

164
00:12:44,195 --> 00:12:47,350
but if you want to be completely clear you

165
00:12:47,350 --> 00:12:50,925
can do this too and that will work just as fine.

166
00:12:50,925 --> 00:12:53,920
Okay, if you prefer this will leave it as such.

167
00:12:53,920 --> 00:13:01,795
Now, in addition, I'm going to introduce one more variable here called selectedDish.

168
00:13:01,795 --> 00:13:08,665
This variable I'm going to use in this exercise and one of the later exercises also.

169
00:13:08,665 --> 00:13:17,875
So, I'm going to make this equal to the first dish in my array.

170
00:13:17,875 --> 00:13:24,730
Now, this selectedDish will be useful for the next part of this exercise.

171
00:13:24,730 --> 00:13:29,265
So, let's save the changes and then move back to our template.

172
00:13:29,265 --> 00:13:33,460
In the template, what I'm going to do is right below the menu,

173
00:13:33,460 --> 00:13:39,825
I'm going to use a card element from angular material to

174
00:13:39,825 --> 00:13:46,555
display this selectedDish right below the menu there.

175
00:13:46,555 --> 00:13:50,700
Now, although this is not the best way of doing it,

176
00:13:50,700 --> 00:13:57,720
but this I am doing in preparation for the next exercise just to

177
00:13:57,720 --> 00:14:04,920
illustrate to you how a material card element can be used for our application.

178
00:14:04,920 --> 00:14:09,330
So, I'm going to use a div with an fx flex here,

179
00:14:09,330 --> 00:14:12,710
and then to this div I'm going to add in

180
00:14:12,710 --> 00:14:22,565
a ngIf with the selectedDish.

181
00:14:22,565 --> 00:14:28,045
So, note that I am applying an ngIf to this div here to

182
00:14:28,045 --> 00:14:33,330
specify that if the selectedDish is currently null,

183
00:14:33,330 --> 00:14:37,535
then I won't add this div to the dom.

184
00:14:37,535 --> 00:14:38,920
If it is not,

185
00:14:38,920 --> 00:14:42,050
then this div will be added to the dom,

186
00:14:42,050 --> 00:14:48,485
and will display the card element with the content in the If.

187
00:14:48,485 --> 00:14:55,760
So, I'm going to use a card element for displaying the details of the selectedDish.

188
00:14:55,760 --> 00:14:57,290
So, to do that,

189
00:14:57,290 --> 00:15:02,870
I use a mat-card here from the material designs card here.

190
00:15:02,870 --> 00:15:05,090
The mat-card itself has

191
00:15:05,090 --> 00:15:10,375
an mat-card header part

192
00:15:10,375 --> 00:15:15,640
and also together with the mat-card-header,

193
00:15:15,640 --> 00:15:21,010
it'll have an mat-card-content.

194
00:15:21,010 --> 00:15:25,055
Let me close off that mat-card-content.

195
00:15:25,055 --> 00:15:27,785
So, in the header, what do I want to show in the header?

196
00:15:27,785 --> 00:15:31,725
In the header, I want to use

197
00:15:31,725 --> 00:15:37,600
an mat-card-title to show

198
00:15:37,600 --> 00:15:44,490
the details of the name of the selectedDish here.

199
00:15:44,490 --> 00:15:53,755
So, I would go in and say h3 and close off the h3 and inside here I'm going to

200
00:15:53,755 --> 00:15:59,870
use the interpolation and then say

201
00:16:00,240 --> 00:16:09,035
selectedDish name and pipe uppercase.

202
00:16:09,035 --> 00:16:17,375
So, note how I have included the name of the selectedDish using the mat-card-title.

203
00:16:17,375 --> 00:16:22,750
Now, in addition, I'm going to use a method,

204
00:16:23,720 --> 00:16:33,930
one called image which takes an attribute called mat-card-image and

205
00:16:33,930 --> 00:16:43,630
the source would be as you expected,

206
00:16:43,630 --> 00:16:49,270
this should be selectedDish.image and

207
00:16:49,270 --> 00:16:54,310
then the alternative I am going

208
00:16:54,310 --> 00:17:01,640
to give as selectedDish.name.

209
00:17:03,450 --> 00:17:11,790
So, this would be the image that will be included into my card here.

210
00:17:11,790 --> 00:17:13,905
So, in the content,

211
00:17:13,905 --> 00:17:27,640
I'm going to include selectedDish description,

212
00:17:31,680 --> 00:17:36,105
and then along with the content here,

213
00:17:36,105 --> 00:17:41,860
I can also add in some buttons to the bottom of the card.

214
00:17:41,860 --> 00:17:54,445
So, I will use mat-card-actions here and inside

215
00:17:54,445 --> 00:17:58,585
there I can include a button.

216
00:17:58,585 --> 00:18:06,550
So, you see that this is the use of a button

217
00:18:06,550 --> 00:18:14,210
in my application, two buttons.

218
00:18:16,130 --> 00:18:20,040
Notice the use of this mat-button here.

219
00:18:20,040 --> 00:18:26,360
So, this will turn this button into a material design like button here,

220
00:18:26,360 --> 00:18:30,725
and so, these two buttons will appear at the bottom of my card here.

221
00:18:30,725 --> 00:18:35,065
So, with this, I have added in the details of the selectedDish.

222
00:18:35,065 --> 00:18:36,980
There is reason for me to do this.

223
00:18:36,980 --> 00:18:40,910
I'm showing you how you can display the details in a card,

224
00:18:40,910 --> 00:18:45,435
well, this is in preparation for your first assignment.

225
00:18:45,435 --> 00:18:52,700
So, you can see how we can use a material design card in our template here.

226
00:18:52,700 --> 00:18:59,565
Going to @module.ts, we need to import the card and the button module.

227
00:18:59,565 --> 00:19:07,390
So, going up to the top we'll say import MatCardModule from

228
00:19:07,390 --> 00:19:13,555
angular material card and

229
00:19:13,555 --> 00:19:23,150
import MatButtonModule from angular material button.

230
00:19:23,700 --> 00:19:27,280
Now that we have added these two to the top,

231
00:19:27,280 --> 00:19:31,389
let's go to the decorator,

232
00:19:31,389 --> 00:19:40,580
and in the imports let's add in the MatCardModule and the MatPatternModule.

233
00:19:41,430 --> 00:19:46,945
So, let's save the changes and then take a quick look at our web page.

234
00:19:46,945 --> 00:19:50,535
Taking a look at our angular application in the browser,

235
00:19:50,535 --> 00:19:54,690
you now see that we have the menu being displayed

236
00:19:54,690 --> 00:20:00,255
here and then at the bottom we now have a card element.

237
00:20:00,255 --> 00:20:06,090
So, you can see the card element here with the title there and the image there.

238
00:20:06,090 --> 00:20:09,770
Of course, the image looks horrendous because it's

239
00:20:09,770 --> 00:20:12,990
the actual image size that I have given you is so

240
00:20:12,990 --> 00:20:17,130
small and it has been expanded to fill the entire screen.

241
00:20:17,130 --> 00:20:20,075
Look at the bottom here. So, this

242
00:20:20,075 --> 00:20:24,625
contains the description of the image and then two buttons here,

243
00:20:24,625 --> 00:20:26,020
right down below here.

244
00:20:26,020 --> 00:20:35,990
So, this is how the mat-button styles the buttons in an angular template,

245
00:20:35,990 --> 00:20:37,395
so you have like and the share button.

246
00:20:37,395 --> 00:20:39,070
Of course, they are not doing anything,

247
00:20:39,070 --> 00:20:43,695
but note the material design like behavior's there.

248
00:20:43,695 --> 00:20:45,070
So, when you click on the button,

249
00:20:45,070 --> 00:20:48,100
you can see the ripples going through.

250
00:20:48,100 --> 00:20:52,440
So, that's the reason why I decided to use

251
00:20:52,440 --> 00:21:04,260
the angular material module for designing the templates in this course.

252
00:21:04,260 --> 00:21:07,700
So, taking a look at it on a smaller device,

253
00:21:07,700 --> 00:21:11,960
it looks much more attractive on a smaller device.

254
00:21:11,960 --> 00:21:16,000
So, you can see that the rendering is much better on a smaller device,

255
00:21:16,000 --> 00:21:19,715
you can see that on the screen you can see

256
00:21:19,715 --> 00:21:27,245
the card right there showing the details and the two buttons there,

257
00:21:27,245 --> 00:21:29,750
the like and the share button,

258
00:21:29,750 --> 00:21:34,190
and the details of the dish.

259
00:21:37,080 --> 00:21:40,650
So, that completes this exercise.

260
00:21:40,650 --> 00:21:42,170
So, in this exercise,

261
00:21:42,170 --> 00:21:49,800
we have examined the use of the grid list and

262
00:21:49,800 --> 00:22:00,030
the card material design components to design the template for our menu component.

263
00:22:00,030 --> 00:22:05,720
This may be a good time for you to do a good comment with the message,

264
00:22:05,720 --> 00:22:09,620
Angular components part two.