In the previous exercise,
we scaffolded out our first basic Angular application.
As I mentioned, we're going to work on that Angular application and develop
it further throughout the rest of this course.
Now, before we get started working on our Angular application,
let's configure our Angular application to use a few additional modules,
which enable us to design the templates for our Angular application.
We will make use of the Angular Material module for designing the UI layouts.
The Angular Material module provides us with a number of interesting layout components
that we can make use of in designing our Angular components templates.
In addition, we will make use of the flex layout which is based upon the CSS flex layout,
which enables us to do responsive design within our Angular application.
So, in this exercise,
we're going to do these configurations.
Along the way, we'll learn our first brief knowledge of components,
even before we go on to examine components in more detail in the next lesson.
To get started, let's begin our journey with a quick visit to the app.component.ts file.
This is the file that supports
the root component that forms part of our Angular application.
Now, taking a look at this root component,
there are a few things that will become very clear to you even without much explanation.
The first thing that I would like to draw your attention to is this import statement.
As you can see, this is importing the component class from the Angular core library.
Then thereafter, we are preparing our AppComponent class here,
and exporting that class.
So, within this AppComponent class that we have declared,
we have a variable that we have declared here called title,
which is currently assigned to be a string.
Now, taking a quick look at this variable,
you immediately begin to wonder,
how is this related to what we have seen in the browser,
when you saw our Angular application being shown in the browser,
the Angular application was displaying exactly these words in the browser.
Indeed, this variable plays an important role in
coming up with the view that you saw in our browser.
Now, in addition, you also see that
this component class is appended with a decorator here.
So again, this is another decorator that you will encounter in Angular.
So, this as we see is a component decorator.
The component decorator internally takes a JavaScript object as a parameter here,
and the first property that you see here called selector: app-root.
Now, if you recall when we looked at the index.HTML file,
we saw that we have included a element there called app-root.
Now, you begin to see where that app-root arises from.
So, this is the selector for the component that we declare here,
which is what is used within our template class to specify where
the view corresponding to this component should be displayed in the browser.
The second property that you define here is the templateUrl.
This points to a file,
an HTML file as you can see,
which contains the template corresponding to this particular component.
The template which defines the view for this component.
The third property that you define here as you can see, says, styleUrls,
which as you notice here is assigned to the app.component.scss file.
So, this file should contain all the scss code that can be
used for CSS styling for our the components template.
So, this is a quick visit to the app.component.ts file.
Now, let's go to the app.component.HTML file,
and take a quick look at the template.
Go into the app.component.HTML file,
you see that this app.component file,
the HTML code here contains just an h1 tag with something in here with a double braces.
Now, obviously, this is not something that you're used to from your knowledge of HTML,
or CSS or JavaScript that you've seen before.
This is Angular syntax.
This is what we call as interpolation.
This is using the Angular's one-way data binding.
I'm throwing a few terms at you at this moment.
Hold onto this terms we will come back to look at those terms in
more detail in the remaining lessons of this course.
The first thing as I mentioned is interpolation,
the second one that I mentioned is one-way data bind.
Also, you immediately see that this is the variable that you saw in the companion,
typeScript file, which defines the TypeScript code corresponding to the App component.
So, once you specify something like this here,
the implication is that whatever the value for this title will be substituted in place
here and will be used as the inner HTML code for this h1 tag here.
That's the purpose of including this here.
We will now go on to install some of
the other Angular relation modules which will enable us to design templates.
Then we'll come back to this app.component.HTML file.
Then redesign this template a little bit later in this exercise.
In order to help us design responsive views within our Angular application,
we're going to take the help of a couple of
related modules for Angular called as the Angular Material module.
The Angular Material module provides us with a number of components.
Layout components that we can use in designing
our new templates for our Angular components.
The Angular Material module if you want to compare this is somewhat like what Bootstrap
provided us for designing our web pages that we examined in the previous course.
Also, I will use another module called as the Angular flex layout module.
The flex layout module provides support for using CSS
flex layout within our Angular templates for our Angular components.
Now, these two modules need to be explicitly
installed and then imported into our Angular application,
that is what we're going to do in the next step.
But before we go forward,
one question that you might be wondering about is,
why not use Bootstrap for doing the design of the templates for our Angular application?
Indeed, you can also use Bootstrap to design the templates for our Angular application.
But you can only use
the CSS components part of Bootstrap within your Angular application.
The jQuery based components.
The JavaScript components can not be explicitly used there might be some conflicts
between the jQuery based components from Bootstrap and the Angular code itself.
So, it is best to avoid using the JavaScript components from Bootstrap
in case you choose to use Bootstrap as the way for designing your Angular templates.
But on the other hand,
I also thought that this would provide us with a good opportunity of learning get
another UI layout framework that is the Angular material framework.
So, that's the reason why I chose to use the Angular material framework
and the Angular flex layout in this particular course.
Now, as we go through the rest of this course,
I won't explicitly explain how to use
the Angular Material components or how to use the Angular Flex-Layout.
Instead, we will learn them by looking at examples.
We will make use of these two,
both the Angular Material best components and the Angular Flex-Layout support,
when we design our templates for our Angular components in this particular course.
So, by the process of making use of these components,
you will also along the way,
learn how to make use of both Angular Material and
Angular Flex-Layout within your Angular application.
I thought that by doing the exercises,
you would learn a lot more about Angular Material.
Now, to explain the conceptual aspects of why
Angular Material components work the way they do or how Grid works for example,
or how a responsive design works,
we have already examined some of those in the previous course on Bootstrap.
So, the same concepts will also come to our aid.
Instead, we will look at the mechanics of using both Angular Material and
the Angular Flex-Layout within our Angular application in this particular course.
To get started using an Angular Material,
of course the first thing that you need to do is to install the Angular Material module.
So, at the prompt type npm install --save @angular/material.
So, as you can see,
we specify all the Angular relate modules with the @angular,
so you will see also the same thing for the Flex-Layout.
We are installing the 6.4.7 version of the Angular Material module.
In addition, the material module requires the installation of CDK.
So, we'll also install that by doing
npm install @angular/cdk@6.4.7 --save,
and install that together with Angular Material.
So, Angular Material makes use of the Angular cdk for its components.
In addition, when you are using Angular Material,
you also need to import the Angular animations module into your Angular application.
Starting with the Angular version four,
the Angular animation support was extracted
out of the core modules into its own separate module.
So, which means that if you need to
make use of animations within your Angular application,
you need to explicitly install the Angular animations module.
So, let's go ahead and install that too.
So, you'll say
npm install --save @angular/animations@6.1.7.
Also, another module that I will install
together is called HammerJS.
The HammerJS module is used by Angular
for supporting some gestures within your Angular application.
So, that's the reason why we install HammerJS also within our application,
and the current version of HammerJS that we are using is 2.0.8.
Now, we have now installed whatever we need
for the angular material module to be used within our Angular application.
Next, I'm going to move on to install
the Angular Flex-Layout within my Angular application.
So, to do that, I pad the prompt
npm install --save @angular/ flex-layout
and we'll install the latest version of that.
So, now that we have all the pieces that we need for our Angular application installed,
let's go ahead and then configure our Angular application to make
use of these new modules that we installed into our Angular application.
The first thing that we will do is go to index.HTML file,
and then we will configure the index.HTML file to use the Angular Material icons.
So, to include the Angular Material icons so that they can be
used within the templates of your Angular application, so,
let me go right there in the head of index.HTML,
and then create a new link with
href="https://fonts.googleapis.com/icon?family=Material+Icons" and this is a style sheet.
So, with this, I can now make use of the Angular Material icons within
my Angular application wherever I choose to do so within the templates.
The next step is to go to the app module.ts and
then import the three modules that we have just installed.
So, the first one that I'm going import is called as
the BrowserAnimationsModule which I will import from
@angular/platform-browser/animations. So, now the next one
that I'm going to import is the MaterialToolbarModule.
So, this imports the @angular/material/toolbar module
that can be used within our Angular applications templates.
So, Angular Material, and also import
the FlexLayoutModule from @angular/flex-layout.
So, once we have all these modules imported then one additional change that I need to
do is- oh let me also import Hammer.JS while I am right there.
So, let me import
Hammer.JS into my application.
And once I am at it,
the other change that I need to do is to also include
those modules into the inputs of the NG module decorator here.
So, I'm going to go there and say browser module,
browser animations module there and then after the HTTP module,
I will import the material toolbar module and also the flex
layout module as part of the inputs inside the NG module decorator for my app module.
So, with this all my configurations to use the material toolbar module and
the angular flex layout module and together with
the animations module in angular is completed.
Now let's step into the components template and make use of
our first angular material component in designing the layout
for our applications app component.
Going to the app components template file,
I'm going to replace this now with
a angular material component
called as mat-toolbar.
So, the mat-toolbar enables me to design
a toolbar that I can use in my angular application.
Toolbar typically displayed at the top of your page within your application.
So, for this toolbar I will specify the color as primary.
We will see what this means in a short while.
And also we will close off this MD toolbar here.
Now inside this I'm going to use a span with
the name of my restaurant for which I am designing this website.
So, Ristorante Con Fusion.
Now you see why I named this folder as Confusion.
So, what is the update that we need to do to the app component HTML file.
While we're at it we will also include a few SCSS updates to my styles.SCSS file.
So, if you go down into your code here,
you will find this styles.SCSS file here.
So, this is where you can include all the global styles in
this file and this will be available for all the components to make use of.
Each component has its own SCSS files where you can include component
level customization or component
level SCSS code to be used within that specific component.
We will use both approaches within
this angular application that we are developing in this course.
But right now I'm going to update the main styles.SCSS
file with some code that will be useful for my whole angular application.
The first thing that I'm going to do,
is to import a prebuilt theme that is available through angular material.
This prebuilt theme in angular material provides us with a way of specifying
certain colors and the way some things are laid
out within my angular material components.
The colors that will be available through the prebuilt frame our primary color,
the accent color, and the warning color.
Now the specific theme that I will use is called deep Purple.
So, in this case the primary color will be deep Purple.
The accent color will be amber and the warning color will be red in this case.
Now you can build your own angular material themes that
you can use within your application but I will
leave that as an exercise for you to explore on your own.
Right now within my angular application I'm going to use one
of the prebuilt things called deep purple amber.
So, to do that going to the styles.SCSS file,
I will import
angular material
prebuilt themes deep purple amber.CSS.
So, this one prebuilt theme I will make use of within my angular application.
You'll pretty soon see how this prebuilt theme works in
the angular application in the templates that we designed for our angular application.
In addition, I'm going to configure some properties for
my body of the index.HTML page so I will specify the padding as zero,
margin as zero, and then the font family that I will
use is rubato or sans serif within my application.
You can choose to use whatever you want within your angular applications.
I selected to use these two within my angular application.
Let's save the changes,
and let's go and take a quick look at our angular application in the browser.
Before you do that,
make sure that your NG serve is running in
one of the terminal windows in your computer.
The development server should be continuously running so that it will automatically do
decompilation and then load
the updated version of the angular application into the browser window.
Going to the browser,
you now see the changes that we have made to
the angular application reflected into the view in
my browser so you can see that we now have a toolbar at the top with
the wordings that we included in the app components template file there.
And you can see the color that has been applied to the toolbar.
So the color, primary color,
so this is the deep purple color that is applied to the toolbar.
Now the theming that we have defined will add either deep purple or amber color,
depending on what is used by the specific angular material components
that we use within our angular applications templates.
With this we complete this exercise.
In this exercise, we configured our angular application to make
use of the angular material and angular flex layout.
We also made use of
our first angular material component in the app components template file.
And we used the built-in theme from angular material for our angular application.
Save all the changes and then this is a good time for you
to do a git commit with the message configuring angular.