1
00:00:03,950 --> 00:00:06,915
In the previous exercise,

2
00:00:06,915 --> 00:00:12,510
we scaffolded out our first basic Angular application.

3
00:00:12,510 --> 00:00:16,430
As I mentioned, we're going to work on that Angular application and develop

4
00:00:16,430 --> 00:00:20,350
it further throughout the rest of this course.

5
00:00:20,350 --> 00:00:24,230
Now, before we get started working on our Angular application,

6
00:00:24,230 --> 00:00:29,509
let's configure our Angular application to use a few additional modules,

7
00:00:29,509 --> 00:00:34,035
which enable us to design the templates for our Angular application.

8
00:00:34,035 --> 00:00:40,810
We will make use of the Angular Material module for designing the UI layouts.

9
00:00:40,810 --> 00:00:47,420
The Angular Material module provides us with a number of interesting layout components

10
00:00:47,420 --> 00:00:54,500
that we can make use of in designing our Angular components templates.

11
00:00:54,500 --> 00:01:01,915
In addition, we will make use of the flex layout which is based upon the CSS flex layout,

12
00:01:01,915 --> 00:01:08,015
which enables us to do responsive design within our Angular application.

13
00:01:08,015 --> 00:01:09,520
So, in this exercise,

14
00:01:09,520 --> 00:01:11,330
we're going to do these configurations.

15
00:01:11,330 --> 00:01:17,460
Along the way, we'll learn our first brief knowledge of components,

16
00:01:17,460 --> 00:01:23,980
even before we go on to examine components in more detail in the next lesson.

17
00:01:23,980 --> 00:01:31,810
To get started, let's begin our journey with a quick visit to the app.component.ts file.

18
00:01:31,810 --> 00:01:33,769
This is the file that supports

19
00:01:33,769 --> 00:01:38,390
the root component that forms part of our Angular application.

20
00:01:38,390 --> 00:01:40,765
Now, taking a look at this root component,

21
00:01:40,765 --> 00:01:45,090
there are a few things that will become very clear to you even without much explanation.

22
00:01:45,090 --> 00:01:49,715
The first thing that I would like to draw your attention to is this import statement.

23
00:01:49,715 --> 00:01:56,300
As you can see, this is importing the component class from the Angular core library.

24
00:01:56,300 --> 00:02:01,185
Then thereafter, we are preparing our AppComponent class here,

25
00:02:01,185 --> 00:02:03,280
and exporting that class.

26
00:02:03,280 --> 00:02:07,160
So, within this AppComponent class that we have declared,

27
00:02:07,160 --> 00:02:12,080
we have a variable that we have declared here called title,

28
00:02:12,080 --> 00:02:15,330
which is currently assigned to be a string.

29
00:02:15,330 --> 00:02:17,910
Now, taking a quick look at this variable,

30
00:02:17,910 --> 00:02:20,360
you immediately begin to wonder,

31
00:02:20,360 --> 00:02:24,740
how is this related to what we have seen in the browser,

32
00:02:24,740 --> 00:02:29,585
when you saw our Angular application being shown in the browser,

33
00:02:29,585 --> 00:02:33,740
the Angular application was displaying exactly these words in the browser.

34
00:02:33,740 --> 00:02:38,630
Indeed, this variable plays an important role in

35
00:02:38,630 --> 00:02:44,250
coming up with the view that you saw in our browser.

36
00:02:44,250 --> 00:02:46,730
Now, in addition, you also see that

37
00:02:46,730 --> 00:02:53,790
this component class is appended with a decorator here.

38
00:02:53,790 --> 00:02:58,395
So again, this is another decorator that you will encounter in Angular.

39
00:02:58,395 --> 00:03:01,590
So, this as we see is a component decorator.

40
00:03:01,590 --> 00:03:08,240
The component decorator internally takes a JavaScript object as a parameter here,

41
00:03:08,240 --> 00:03:14,700
and the first property that you see here called selector: app-root.

42
00:03:14,700 --> 00:03:19,100
Now, if you recall when we looked at the index.HTML file,

43
00:03:19,100 --> 00:03:23,275
we saw that we have included a element there called app-root.

44
00:03:23,275 --> 00:03:26,865
Now, you begin to see where that app-root arises from.

45
00:03:26,865 --> 00:03:31,250
So, this is the selector for the component that we declare here,

46
00:03:31,250 --> 00:03:36,020
which is what is used within our template class to specify where

47
00:03:36,020 --> 00:03:41,960
the view corresponding to this component should be displayed in the browser.

48
00:03:41,960 --> 00:03:47,845
The second property that you define here is the templateUrl.

49
00:03:47,845 --> 00:03:50,890
This points to a file,

50
00:03:50,890 --> 00:03:53,030
an HTML file as you can see,

51
00:03:53,030 --> 00:03:57,945
which contains the template corresponding to this particular component.

52
00:03:57,945 --> 00:04:02,335
The template which defines the view for this component.

53
00:04:02,335 --> 00:04:07,565
The third property that you define here as you can see, says, styleUrls,

54
00:04:07,565 --> 00:04:14,450
which as you notice here is assigned to the app.component.scss file.

55
00:04:14,450 --> 00:04:19,130
So, this file should contain all the scss code that can be

56
00:04:19,130 --> 00:04:24,310
used for CSS styling for our the components template.

57
00:04:24,310 --> 00:04:29,260
So, this is a quick visit to the app.component.ts file.

58
00:04:29,260 --> 00:04:33,365
Now, let's go to the app.component.HTML file,

59
00:04:33,365 --> 00:04:36,905
and take a quick look at the template.

60
00:04:36,905 --> 00:04:40,480
Go into the app.component.HTML file,

61
00:04:40,480 --> 00:04:43,635
you see that this app.component file,

62
00:04:43,635 --> 00:04:51,384
the HTML code here contains just an h1 tag with something in here with a double braces.

63
00:04:51,384 --> 00:04:58,310
Now, obviously, this is not something that you're used to from your knowledge of HTML,

64
00:04:58,310 --> 00:05:01,755
or CSS or JavaScript that you've seen before.

65
00:05:01,755 --> 00:05:04,325
This is Angular syntax.

66
00:05:04,325 --> 00:05:07,055
This is what we call as interpolation.

67
00:05:07,055 --> 00:05:12,350
This is using the Angular's one-way data binding.

68
00:05:12,350 --> 00:05:16,775
I'm throwing a few terms at you at this moment.

69
00:05:16,775 --> 00:05:20,690
Hold onto this terms we will come back to look at those terms in

70
00:05:20,690 --> 00:05:25,185
more detail in the remaining lessons of this course.

71
00:05:25,185 --> 00:05:28,140
The first thing as I mentioned is interpolation,

72
00:05:28,140 --> 00:05:33,290
the second one that I mentioned is one-way data bind.

73
00:05:33,680 --> 00:05:42,200
Also, you immediately see that this is the variable that you saw in the companion,

74
00:05:42,200 --> 00:05:48,560
typeScript file, which defines the TypeScript code corresponding to the App component.

75
00:05:48,560 --> 00:05:51,640
So, once you specify something like this here,

76
00:05:51,640 --> 00:05:58,970
the implication is that whatever the value for this title will be substituted in place

77
00:05:58,970 --> 00:06:08,170
here and will be used as the inner HTML code for this h1 tag here.

78
00:06:08,170 --> 00:06:11,600
That's the purpose of including this here.

79
00:06:11,600 --> 00:06:15,140
We will now go on to install some of

80
00:06:15,140 --> 00:06:22,410
the other Angular relation modules which will enable us to design templates.

81
00:06:22,410 --> 00:06:25,985
Then we'll come back to this app.component.HTML file.

82
00:06:25,985 --> 00:06:31,375
Then redesign this template a little bit later in this exercise.

83
00:06:31,375 --> 00:06:38,330
In order to help us design responsive views within our Angular application,

84
00:06:38,330 --> 00:06:40,340
we're going to take the help of a couple of

85
00:06:40,340 --> 00:06:45,360
related modules for Angular called as the Angular Material module.

86
00:06:45,360 --> 00:06:49,705
The Angular Material module provides us with a number of components.

87
00:06:49,705 --> 00:06:53,795
Layout components that we can use in designing

88
00:06:53,795 --> 00:06:59,595
our new templates for our Angular components.

89
00:06:59,595 --> 00:07:06,290
The Angular Material module if you want to compare this is somewhat like what Bootstrap

90
00:07:06,290 --> 00:07:14,055
provided us for designing our web pages that we examined in the previous course.

91
00:07:14,055 --> 00:07:19,850
Also, I will use another module called as the Angular flex layout module.

92
00:07:19,850 --> 00:07:26,195
The flex layout module provides support for using CSS

93
00:07:26,195 --> 00:07:33,440
flex layout within our Angular templates for our Angular components.

94
00:07:33,440 --> 00:07:36,620
Now, these two modules need to be explicitly

95
00:07:36,620 --> 00:07:40,195
installed and then imported into our Angular application,

96
00:07:40,195 --> 00:07:43,530
that is what we're going to do in the next step.

97
00:07:43,530 --> 00:07:45,645
But before we go forward,

98
00:07:45,645 --> 00:07:48,910
one question that you might be wondering about is,

99
00:07:48,910 --> 00:07:58,350
why not use Bootstrap for doing the design of the templates for our Angular application?

100
00:07:58,350 --> 00:08:05,220
Indeed, you can also use Bootstrap to design the templates for our Angular application.

101
00:08:05,220 --> 00:08:07,310
But you can only use

102
00:08:07,310 --> 00:08:12,850
the CSS components part of Bootstrap within your Angular application.

103
00:08:12,850 --> 00:08:16,800
The jQuery based components.

104
00:08:16,800 --> 00:08:21,709
The JavaScript components can not be explicitly used there might be some conflicts

105
00:08:21,709 --> 00:08:27,870
between the jQuery based components from Bootstrap and the Angular code itself.

106
00:08:27,870 --> 00:08:33,800
So, it is best to avoid using the JavaScript components from Bootstrap

107
00:08:33,800 --> 00:08:40,925
in case you choose to use Bootstrap as the way for designing your Angular templates.

108
00:08:40,925 --> 00:08:42,980
But on the other hand,

109
00:08:42,980 --> 00:08:47,000
I also thought that this would provide us with a good opportunity of learning get

110
00:08:47,000 --> 00:08:54,350
another UI layout framework that is the Angular material framework.

111
00:08:54,350 --> 00:08:58,640
So, that's the reason why I chose to use the Angular material framework

112
00:08:58,640 --> 00:09:03,745
and the Angular flex layout in this particular course.

113
00:09:03,745 --> 00:09:07,540
Now, as we go through the rest of this course,

114
00:09:07,540 --> 00:09:10,450
I won't explicitly explain how to use

115
00:09:10,450 --> 00:09:14,980
the Angular Material components or how to use the Angular Flex-Layout.

116
00:09:14,980 --> 00:09:20,615
Instead, we will learn them by looking at examples.

117
00:09:20,615 --> 00:09:22,620
We will make use of these two,

118
00:09:22,620 --> 00:09:29,135
both the Angular Material best components and the Angular Flex-Layout support,

119
00:09:29,135 --> 00:09:36,715
when we design our templates for our Angular components in this particular course.

120
00:09:36,715 --> 00:09:41,495
So, by the process of making use of these components,

121
00:09:41,495 --> 00:09:44,025
you will also along the way,

122
00:09:44,025 --> 00:09:47,650
learn how to make use of both Angular Material and

123
00:09:47,650 --> 00:09:51,495
Angular Flex-Layout within your Angular application.

124
00:09:51,495 --> 00:09:54,685
I thought that by doing the exercises,

125
00:09:54,685 --> 00:09:57,060
you would learn a lot more about Angular Material.

126
00:09:57,060 --> 00:10:01,505
Now, to explain the conceptual aspects of why

127
00:10:01,505 --> 00:10:07,440
Angular Material components work the way they do or how Grid works for example,

128
00:10:07,440 --> 00:10:09,915
or how a responsive design works,

129
00:10:09,915 --> 00:10:14,150
we have already examined some of those in the previous course on Bootstrap.

130
00:10:14,150 --> 00:10:17,935
So, the same concepts will also come to our aid.

131
00:10:17,935 --> 00:10:23,260
Instead, we will look at the mechanics of using both Angular Material and

132
00:10:23,260 --> 00:10:30,385
the Angular Flex-Layout within our Angular application in this particular course.

133
00:10:30,385 --> 00:10:33,005
To get started using an Angular Material,

134
00:10:33,005 --> 00:10:37,655
of course the first thing that you need to do is to install the Angular Material module.

135
00:10:37,655 --> 00:10:46,230
So, at the prompt type npm install --save @angular/material.

136
00:10:48,950 --> 00:10:51,240
So, as you can see,

137
00:10:51,240 --> 00:10:55,390
we specify all the Angular relate modules with the @angular,

138
00:10:55,390 --> 00:10:58,650
so you will see also the same thing for the Flex-Layout.

139
00:10:58,650 --> 00:11:03,980
We are installing the 6.4.7 version of the Angular Material module.

140
00:11:03,980 --> 00:11:09,440
In addition, the material module requires the installation of CDK.

141
00:11:09,440 --> 00:11:12,730
So, we'll also install that by doing

142
00:11:12,730 --> 00:11:21,100
npm install @angular/cdk@6.4.7 --save,

143
00:11:21,100 --> 00:11:25,035
and install that together with Angular Material.

144
00:11:25,035 --> 00:11:31,495
So, Angular Material makes use of the Angular cdk for its components.

145
00:11:31,495 --> 00:11:35,595
In addition, when you are using Angular Material,

146
00:11:35,595 --> 00:11:43,035
you also need to import the Angular animations module into your Angular application.

147
00:11:43,035 --> 00:11:46,445
Starting with the Angular version four,

148
00:11:46,445 --> 00:11:49,740
the Angular animation support was extracted

149
00:11:49,740 --> 00:11:53,695
out of the core modules into its own separate module.

150
00:11:53,695 --> 00:11:56,130
So, which means that if you need to

151
00:11:56,130 --> 00:11:58,900
make use of animations within your Angular application,

152
00:11:58,900 --> 00:12:04,370
you need to explicitly install the Angular animations module.

153
00:12:04,370 --> 00:12:07,275
So, let's go ahead and install that too.

154
00:12:07,275 --> 00:12:08,325
So, you'll say

155
00:12:08,325 --> 00:12:18,940
npm install --save @angular/animations@6.1.7.

156
00:12:20,040 --> 00:12:23,290
Also, another module that I will install

157
00:12:23,290 --> 00:12:33,130
together is called HammerJS.

158
00:12:33,130 --> 00:12:36,940
The HammerJS module is used by Angular

159
00:12:36,940 --> 00:12:40,700
for supporting some gestures within your Angular application.

160
00:12:40,700 --> 00:12:45,750
So, that's the reason why we install HammerJS also within our application,

161
00:12:45,750 --> 00:12:51,830
and the current version of HammerJS that we are using is 2.0.8.

162
00:12:51,830 --> 00:12:56,050
Now, we have now installed whatever we need

163
00:12:56,050 --> 00:13:01,185
for the angular material module to be used within our Angular application.

164
00:13:01,185 --> 00:13:04,605
Next, I'm going to move on to install

165
00:13:04,605 --> 00:13:09,415
the Angular Flex-Layout within my Angular application.

166
00:13:09,415 --> 00:13:11,460
So, to do that, I pad the prompt

167
00:13:11,460 --> 00:13:19,000
npm install --save @angular/ flex-layout

168
00:13:19,000 --> 00:13:22,970
and we'll install the latest version of that.

169
00:13:24,760 --> 00:13:31,720
So, now that we have all the pieces that we need for our Angular application installed,

170
00:13:31,720 --> 00:13:36,290
let's go ahead and then configure our Angular application to make

171
00:13:36,290 --> 00:13:41,025
use of these new modules that we installed into our Angular application.

172
00:13:41,025 --> 00:13:46,205
The first thing that we will do is go to index.HTML file,

173
00:13:46,205 --> 00:13:51,975
and then we will configure the index.HTML file to use the Angular Material icons.

174
00:13:51,975 --> 00:13:55,800
So, to include the Angular Material icons so that they can be

175
00:13:55,800 --> 00:13:59,580
used within the templates of your Angular application, so,

176
00:13:59,580 --> 00:14:04,020
let me go right there in the head of index.HTML,

177
00:14:04,020 --> 00:14:11,905
and then create a new link with

178
00:14:11,905 --> 00:14:47,075
href="https://fonts.googleapis.com/icon?family=Material+Icons" and this is a style sheet.

179
00:14:47,075 --> 00:14:52,110
So, with this, I can now make use of the Angular Material icons within

180
00:14:52,110 --> 00:14:58,865
my Angular application wherever I choose to do so within the templates.

181
00:14:58,865 --> 00:15:04,530
The next step is to go to the app module.ts and

182
00:15:04,530 --> 00:15:09,825
then import the three modules that we have just installed.

183
00:15:09,825 --> 00:15:14,345
So, the first one that I'm going import is called as

184
00:15:14,345 --> 00:15:29,460
the BrowserAnimationsModule which I will import from

185
00:15:38,170 --> 00:15:47,230
@angular/platform-browser/animations. So, now the next one

186
00:15:47,230 --> 00:15:54,115
that I'm going to import is the MaterialToolbarModule.

187
00:15:54,115 --> 00:16:00,370
So, this imports the @angular/material/toolbar module

188
00:16:00,370 --> 00:16:06,100
that can be used within our Angular applications templates.

189
00:16:06,100 --> 00:16:14,305
So, Angular Material, and also import

190
00:16:14,305 --> 00:16:26,720
the FlexLayoutModule from @angular/flex-layout.

191
00:16:27,470 --> 00:16:34,050
So, once we have all these modules imported then one additional change that I need to

192
00:16:34,050 --> 00:16:40,035
do is- oh let me also import Hammer.JS while I am right there.

193
00:16:40,035 --> 00:16:43,100
So, let me import

194
00:16:45,260 --> 00:16:51,585
Hammer.JS into my application.

195
00:16:51,585 --> 00:16:53,830
And once I am at it,

196
00:16:53,830 --> 00:16:58,400
the other change that I need to do is to also include

197
00:16:58,400 --> 00:17:04,165
those modules into the inputs of the NG module decorator here.

198
00:17:04,165 --> 00:17:06,845
So, I'm going to go there and say browser module,

199
00:17:06,845 --> 00:17:13,440
browser animations module there and then after the HTTP module,

200
00:17:13,440 --> 00:17:21,009
I will import the material toolbar module and also the flex

201
00:17:21,009 --> 00:17:29,350
layout module as part of the inputs inside the NG module decorator for my app module.

202
00:17:29,350 --> 00:17:36,215
So, with this all my configurations to use the material toolbar module and

203
00:17:36,215 --> 00:17:38,975
the angular flex layout module and together with

204
00:17:38,975 --> 00:17:44,680
the animations module in angular is completed.

205
00:17:44,680 --> 00:17:50,270
Now let's step into the components template and make use of

206
00:17:50,270 --> 00:17:54,570
our first angular material component in designing the layout

207
00:17:54,570 --> 00:18:00,110
for our applications app component.

208
00:18:00,750 --> 00:18:06,020
Going to the app components template file,

209
00:18:06,020 --> 00:18:09,460
I'm going to replace this now with

210
00:18:09,460 --> 00:18:17,895
a angular material component

211
00:18:17,895 --> 00:18:21,480
called as mat-toolbar.

212
00:18:21,480 --> 00:18:24,645
So, the mat-toolbar enables me to design

213
00:18:24,645 --> 00:18:29,410
a toolbar that I can use in my angular application.

214
00:18:29,410 --> 00:18:35,805
Toolbar typically displayed at the top of your page within your application.

215
00:18:35,805 --> 00:18:41,395
So, for this toolbar I will specify the color as primary.

216
00:18:41,395 --> 00:18:44,145
We will see what this means in a short while.

217
00:18:44,145 --> 00:18:50,245
And also we will close off this MD toolbar here.

218
00:18:50,245 --> 00:18:56,230
Now inside this I'm going to use a span with

219
00:18:56,230 --> 00:19:05,790
the name of my restaurant for which I am designing this website.

220
00:19:05,790 --> 00:19:08,150
So, Ristorante Con Fusion.

221
00:19:08,150 --> 00:19:12,650
Now you see why I named this folder as Confusion.

222
00:19:12,650 --> 00:19:19,765
So, what is the update that we need to do to the app component HTML file.

223
00:19:19,765 --> 00:19:29,315
While we're at it we will also include a few SCSS updates to my styles.SCSS file.

224
00:19:29,315 --> 00:19:32,470
So, if you go down into your code here,

225
00:19:32,470 --> 00:19:37,000
you will find this styles.SCSS file here.

226
00:19:37,000 --> 00:19:40,450
So, this is where you can include all the global styles in

227
00:19:40,450 --> 00:19:44,810
this file and this will be available for all the components to make use of.

228
00:19:44,810 --> 00:19:51,970
Each component has its own SCSS files where you can include component

229
00:19:51,970 --> 00:19:54,620
level customization or component

230
00:19:54,620 --> 00:20:00,280
level SCSS code to be used within that specific component.

231
00:20:00,280 --> 00:20:03,090
We will use both approaches within

232
00:20:03,090 --> 00:20:07,980
this angular application that we are developing in this course.

233
00:20:07,980 --> 00:20:13,530
But right now I'm going to update the main styles.SCSS

234
00:20:13,530 --> 00:20:20,270
file with some code that will be useful for my whole angular application.

235
00:20:20,270 --> 00:20:22,185
The first thing that I'm going to do,

236
00:20:22,185 --> 00:20:28,160
is to import a prebuilt theme that is available through angular material.

237
00:20:28,160 --> 00:20:33,380
This prebuilt theme in angular material provides us with a way of specifying

238
00:20:33,380 --> 00:20:36,000
certain colors and the way some things are laid

239
00:20:36,000 --> 00:20:39,265
out within my angular material components.

240
00:20:39,265 --> 00:20:44,800
The colors that will be available through the prebuilt frame our primary color,

241
00:20:44,800 --> 00:20:49,050
the accent color, and the warning color.

242
00:20:49,050 --> 00:20:53,000
Now the specific theme that I will use is called deep Purple.

243
00:20:53,000 --> 00:20:56,870
So, in this case the primary color will be deep Purple.

244
00:20:56,870 --> 00:21:01,860
The accent color will be amber and the warning color will be red in this case.

245
00:21:01,860 --> 00:21:07,880
Now you can build your own angular material themes that

246
00:21:07,880 --> 00:21:10,970
you can use within your application but I will

247
00:21:10,970 --> 00:21:14,385
leave that as an exercise for you to explore on your own.

248
00:21:14,385 --> 00:21:17,930
Right now within my angular application I'm going to use one

249
00:21:17,930 --> 00:21:21,510
of the prebuilt things called deep purple amber.

250
00:21:21,510 --> 00:21:25,575
So, to do that going to the styles.SCSS file,

251
00:21:25,575 --> 00:21:28,870
I will import

252
00:21:32,190 --> 00:21:38,080
angular material

253
00:21:38,080 --> 00:21:48,640
prebuilt themes deep purple amber.CSS.

254
00:21:48,640 --> 00:21:54,015
So, this one prebuilt theme I will make use of within my angular application.

255
00:21:54,015 --> 00:21:58,335
You'll pretty soon see how this prebuilt theme works in

256
00:21:58,335 --> 00:22:03,060
the angular application in the templates that we designed for our angular application.

257
00:22:03,060 --> 00:22:08,360
In addition, I'm going to configure some properties for

258
00:22:08,360 --> 00:22:16,530
my body of the index.HTML page so I will specify the padding as zero,

259
00:22:16,530 --> 00:22:23,230
margin as zero, and then the font family that I will

260
00:22:23,230 --> 00:22:30,360
use is rubato or sans serif within my application.

261
00:22:30,360 --> 00:22:34,320
You can choose to use whatever you want within your angular applications.

262
00:22:34,320 --> 00:22:38,095
I selected to use these two within my angular application.

263
00:22:38,095 --> 00:22:40,130
Let's save the changes,

264
00:22:40,130 --> 00:22:46,495
and let's go and take a quick look at our angular application in the browser.

265
00:22:46,495 --> 00:22:48,040
Before you do that,

266
00:22:48,040 --> 00:22:53,080
make sure that your NG serve is running in

267
00:22:53,080 --> 00:22:58,940
one of the terminal windows in your computer.

268
00:22:58,940 --> 00:23:04,870
The development server should be continuously running so that it will automatically do

269
00:23:04,870 --> 00:23:07,040
decompilation and then load

270
00:23:07,040 --> 00:23:11,975
the updated version of the angular application into the browser window.

271
00:23:11,975 --> 00:23:14,290
Going to the browser,

272
00:23:14,290 --> 00:23:17,925
you now see the changes that we have made to

273
00:23:17,925 --> 00:23:24,090
the angular application reflected into the view in

274
00:23:24,090 --> 00:23:30,085
my browser so you can see that we now have a toolbar at the top with

275
00:23:30,085 --> 00:23:37,095
the wordings that we included in the app components template file there.

276
00:23:37,095 --> 00:23:41,290
And you can see the color that has been applied to the toolbar.

277
00:23:41,290 --> 00:23:42,580
So the color, primary color,

278
00:23:42,580 --> 00:23:46,180
so this is the deep purple color that is applied to the toolbar.

279
00:23:46,180 --> 00:23:52,000
Now the theming that we have defined will add either deep purple or amber color,

280
00:23:52,000 --> 00:23:56,590
depending on what is used by the specific angular material components

281
00:23:56,590 --> 00:24:01,750
that we use within our angular applications templates.

282
00:24:01,750 --> 00:24:05,285
With this we complete this exercise.

283
00:24:05,285 --> 00:24:09,470
In this exercise, we configured our angular application to make

284
00:24:09,470 --> 00:24:13,880
use of the angular material and angular flex layout.

285
00:24:13,880 --> 00:24:16,410
We also made use of

286
00:24:16,410 --> 00:24:22,150
our first angular material component in the app components template file.

287
00:24:22,150 --> 00:24:29,605
And we used the built-in theme from angular material for our angular application.

288
00:24:29,605 --> 00:24:34,530
Save all the changes and then this is a good time for you

289
00:24:34,530 --> 00:24:39,880
to do a git commit with the message configuring angular.