Now we will move on to
our next exercise where we will create
a new component and add it to our Angular application.
Then, we will make use of that component to control a part
of the screen that we have designed for our Angular application.
The screen for our Angular application is pretty boring at the moment.
All that we have is a toolbar at the top and then a blank,
white screen here, but that also gives us ideas.
We can now take additional content and then
place that into this part of the screen here. How do we do that?
We can create a new component and then hand
over this part of the screen to that component and say,
''You take care of rendering whatever you want into that part of the screen.''
So, that view will be controlled by the new component.
How do we do that? Let's go through the exercise now.
To get started with the exercise,
go to the exercise instructions that follow this particular video.
Then in the exercise instructions,
you will see some exercise resources,
which is a zip file available to you.
Download that zip file to your computer,
and this will give you an images.zip files.
So, just save it as images.zip file to your downloads folder,
unzip it, and then this will give you
an images folder containing
a set of images that we're going to make use of in our application.
Unzip the images.zip file that you just downloaded,
and move that images.zip file into your project,
and within your project,
into the sources and assets folder here.
So, again, move the images folder that you get by
unzipping the images.zip file and then move that images folder into your application,
so, inside your application,
under sources and assets subfolder.
These images that are supplied in here will be
available for use within your Angular application.
Now, we're going to make use of the Angular CLI to
automatically generate a component for us and add it to our Angular application.
So, in the terminal,
go to the folder containing your Angular application and type
ng generate component menu.
So, we will name this component as the MenuComponent.
This MenuComponent will contain the menu for
the restaurant that we are preparing our Angular application for.
So, when you type this,
this will automatically generate
the MenuComponent and then add it to your Angular application.
This MenuComponent will be created and added into
the source/app/menu folder of your application.
So, it will create a set of files in the menu folder.
So, you can see that it creates an SCSS file,
an HTML file, and the ts file,
and then something called the spectral ts file.
We'll come back to that later.
Then, also, it'll update your app module.ts file.
So, let's go and take a look at what just happened when you
created this MenuComponent and added it to your Angular application.
Let's go to the Editor.
Coming to our Editor,
you'll now notice that,
in the app folder,
there is a new folder called menu there,
and this menu folder contains all the MenuComponent related files here.
The Angular CLI follows the Angular standard style guide.
The style guide suggests that each component should be placed
into its own folder as are seen here,
and I pretty much like this because I am very obsessive about
keeping it clean hierarchy for my application folders here.
So, this works very well for me.
Some people like a flat hierarchy,
but I just get confused with that part.
So, I prefer storing each component in its own folder.
So, it works good for me.
Now, if you open the app module.ts file,
you will notice that the app module.ts file has been updated
by including another import into the app module.ts file.
So, you see that, along with the AppComponent,
the MenuComponent has automatically been added in as an import to your app module.
So, this means that the MenuComponent is now
available for your Angular application to be used.
Also, if you check the declarations property inside the NgModule decorator,
you will see that in the declarations property,
in addition to the AppComponent,
you also have the MenuComponent included.
This is the reason why I love Angular CLI,
because it simplifies all this worked for me.
If I were to do it by hand,
I will have to manually go into the app module.ts and then type in all this code there,
and there is a high probability that I will end up making mistakes there.
So, we're saving ourselves a lot of trouble by using the Angular CLI.
So, that's why I have fallen in love with
Angular CLI for creating my Angular applications.
So, with that, we have set up
our MenuComponent to be available for our Angular application.
Now, where am I going to make use of the MenuComponent?
I'm going to make use of the MenuComponent inside my AppComponents template.
So, I will go to the AppComponents template and then
include the MenuComponent here in my AppComponent.
So, that will essentially handover that part of the screen to my MenuComponent.
How do we do that?
To do that, we'll first take a quick look at the MenuComponent.ts file.
So, when you open the MenuComponent.ts file,
you'll see that the selector for the MenuComponent has been defined as app-menu.
So, this is the standard selector name that the Angular CLI gives for your components.
You can change this if you want,
but whatever selector you specify here,
that would form the tags that you use to include it into your template file.
So, going back to AppComponent.html,
now, if I want to include the menu file in here,
so I will just say,
app menu tag and voila,
that part of the screen is now handed over to my MenuComponent,
and it's up to the MenuComponent to decide what it wants to place in there.
So, whatever is defined,
the MenuComponents template will be placed into place in here.
So, now, all that we are left with is to go and prepare
our MenuComponent to show the appropriate information for us.
Let's save the changes,
and then we will then switch to
the next step where we will create the menu for our restaurant using the MenuComponent.
Before I do that,
what I am going to do is,
go to the app folder here,
and then in the app folder,
I'm going to create a new subfolder and name that as shared subfolder.
Now, any files that I'm going to share across various components,
I'm going to put it into the shared folder here.
Now, inside the shared folder,
I'm going to create a new file named dish.ts.
Inside this dish.ts, I'm going to create a class to define
a dish and make it available for the remaining components to use.
So, to define a TypeScript class here,
I will say export,
so I'm exporting this TypeScript class here,
export class, and then I will name the class as dish.
Inside this dish class,
I can now define various properties.
So, for the dish class,
I will define one property,
which is an ID, which I define as a string.
Now, notice, if you are coming from the JavaScript world,
in JavaScript, you don't need to specify the type of any variable.
TypeScript brings in this facility for you to specify the type for each variable.
So, if you specify name, column, and string,
that means that the name variable will be always of the string type.
So, if you try to assign an integer to the name,
then TypeScript compiler will automatically
catch that for you and then tell you that there is an error.
That's the reason, using TypeScript,
you can reduce the number of errors that you might cause.
JavaScript traditionally doesn't do this error
checking because it doesn't have any concept of datatypes.
But if you're coming from a traditional programming language like C++ or Java,
you're very familiar with the datatypes,
the primitive datatypes, and
other kinds of datatypes that are already defined into the language.
TypeScript brings that feature to JavaScript or rather as part of TypeScript,
and that enables you to define variables and attach types to those variables,
hence the name TypeScript.
So, for the dish,
I'm going to create a name property.
Then I'm going to create an image property,
which is also a string.
This image string will be a string which points to
the URL of the image that I'm going to use for this particular dish.
Then I will define a category for this dish as also another string featured as Boolean,
label as a string.
Price as a string and then description as a string.
So, these are properties that I associate with the dish class.
So, this will define various dishes in my menu of my restaurant,
and for each dish I need to specify all these various properties.
Now, why would I need that?
That'll help me to construct the menu for my restaurant as you will see pretty soon.
So, with this, we complete the definition of my class there.
Let's save the changes to the dish.ts file.
Now, this dish.ts file is exporting a class.
Now, I can import this class into any of
the component type script files of my application.
Next, I'm going to switch to my menu.component.ts file.
Inside the menu.component.ts file in addition to importing the component,
I'll then also see that you are importing an OnInit there.
We'll come to the OnInit part in one of the later exercises.
I'll explain what that does in a later exercise.
We'll also import the new class that we created called the Dish class.
Why do we import this dish class?
So that we can use that as a type for a variable that I am defining here.
So, where is this dish class?
It is in../shared/dish folder.
So, this is in the shared dish folder above there.
Then you'll see that we have defined the menu component here.
So, you can see that it says,
"Export class menu component" and then it says, "Implement on it."
We're going to come back to that in a little bit later.
You also see that there is a constructor and there is one more method here called ngOnit.
We're going to use these in some of the later exercises.
So, let's just leave it there as such and we'll
come back to understand what that is in a short while.
Also, notice that for this component,
the template is defined in menu component dot HTML,
and the style URLs defined there.
Now, in addition, into my menu component class,
I'm going to include a new variable called as
dishes which would be an array of the dish type.
Okay? Then I'm going to simply include the set of
dishes into my dishes variable that I've defined here.
Now, to type all the thing in by hand is going to take me a lot of time.
So instead, what I would suggest for you to do is just go and copy
the content directly from the instructions that follow this video.
So, that's what I'm going to do.
Then come back and paste that in here.
You can now see that I have cut and pasted the information for
all my dishes from the instructions in here.
So, this completes the array of all the dishes that are defined in my instructions.
So, that's the easiest way of getting hold of this information.
So, just cut and paste it from there.
Now, notice that for this dish,
each one of them is a JavaScript object here.
So, that can be mapped into the corresponding type script class there.
So, you can see that each JavaScript object has properties there,
and these properties exactly match the properties that I defined for my dish class.
So, once I define this,
then these dishes will now become an array of
dishes and this will now become available for
me to use when I define my HTML template for my menu.
Let's save the changes that we have done so far and then we'll
open the menu.component.html file.
So, we'll go to the menu.component.html file.
You will see that in the menu.component.html file,
you currently have just a P with menu works here.
So, if you just pasted it in there and then seeing the application working,
you'd have seen just this menu works on the screen.
I'm going to replace this with my own template code here.
This is where I'm going to take the help of the angular flex layout to help me
to lay out my content well in my screen.
So, to get started,
I will start with a div,
to which I will apply a class called container.
I'm going to define the container class by using
some CSS code a little bit later in this exercise.
So, I will apply the class container here.
I'm going to also define a property called fxlayout.
An attribute called fxlayout.
Now, this fxlayout is an attribute
that the angular flex layout allows me to apply to a div.
This specifies whether the various content
that I include inside those div should be laid out either horizontally or vertically.
So, I'm going to specify this to be a column.
So, whatever content I include inside this div,
will be laid out vertically one below the other on my screen.
If you have seen the grid way of working with content in Bootstrap,
you would see that this essentially tells me that I'm going to
lay down everything into a single column down there.
Don't confuse this column with Bootstrap's column from the Bootstrap's grid.
They're two different things.
Here, the attribute is fxlayout and I specify column.
I can also specify this as row,
which means that the content will be laid out horizontally.
Now also, one more attribute I'm going to specify for this is fxLayoutGap,
which I will specify as 10 pixel.
So, what this means is that whatever content I include here
will be separated from each other by 10-pixels gap between each one of them.
From Bootstraps knowledge, you see what a cutoff is here.
This defines a cutoff separation between
two pieces of content in my application template.
So, with this, we will close the div here.
Now, inside this div,
I'm going to define the actual content that will go into my menu.component.html file.
Now in here, I'm going to make use of another component that
material design provides to me called as an mat list component.
So, this component allows me to create a list of
items that I include into my template here.
So, this is a angular material list component.
From Bootstrap, you notice that in Bootstrap we had the media object.
So, the mat list is like the media object in some sense from Bootstrap.
Now to this, I am going to apply a class,
an attribute called as fxFlex.
Now, what this means is that this whole thing will be treated as one unit or one piece of
content that they will be laid out by my flex layout here.
So, if you are familiar with CSS flex layout.
So, this is one piece of content that will be laid out by my CSS flex layout.
So, apply fxFlex here,
and then inside here I'm going to define mat-list-item.
So, this is a list item here.
So, from your HTML knowledge,
if the LI tag that you use in HTML is similar to this here.
So, this is an mg list item here.
So obviously, inside this list item,
you're going to be defining the list of things.
Now, angular provides some structural directives that you can apply
to your tags here that allows you to create your content.
Now, I'm going to use one structural directive called ngFor.
We will see how we use it in this template.
Then later on after this exercise,
I will explain briefly to you what the structural directives are and
what the purpose they serve in defining your templates here.
So, inside this empty list item, I'm going to say,
star, note the syntax, star ngFor.
So, this is the structural directive,
the ngFor structural directive in angular.
What this ngFor structural directive allows you to do is
to iterate over an array of items.
Remember that we defined dishes as an array of dish objects in our code.
Now, in my template,
I will have access to that dishes object.
So in here, if I want to iterate over it,
the way I specify it is I'll say,
"Let dish of dishes."
This is how the syntax works for the ngFor structural directive.
So, let dish of dishes.
What this means is that dishes is the array of dish objects.
When we select say let dish of dishes,
this will allow me to access each element of
the array and then it helps me to iterate over the array.
This is like a for loop,
if you are familiar with for loops from programming.
So, this acts like a for loop for you and then it helps you to iterate
over all the elements of the dishes array here.
This dish becomes a JavaScript object that allows me
to access each element of that array there.
Now, from this, we can also now get
access to the properties of each individual object inside my dishes array.
So, then, I can make use of them to define my template here.
Let me lay out the template and then we'll go back and
look at how these two are interrelated here.
Now, inside my empty list item,
I can include an image with the attribute as matListAvatar.
So, this allows me to include an image and then with the source being specified here.
Now interestingly, look at the syntax that I'm using here.
Inside double braces, I'm going to say dish.image.
What this means is that this is a one-way interpolation that we are talking about.
Here, when I specify this,
what this means is that this source will get the value of dish.image that has defined in
my JavaScript object that I have defined in
my type script class there and that is available for me to do the layout here.
So, that the dish.image value will be available to me and also for this image,
I will specify an alternative value as dish.name.
Recall that my dish also had the name property available to
me so that defines an image for my list here.
You will pretty soon realize how this list looks like on
the screen when we complete this template here.
In addition, I'm going to use an h1 with matLine tag.
Again, this is the use of
the list angular material component for defining my template here.
So, I say h1 matLine so this helps me to define a line here and then inside there,
I'm going to use the double braces and say dish.name here.
So, this allows me to get the value of the dish name there.
So, that defines one line and then the in the next line I'm going to say p matLine.
So, I'm going to use the p tag here and then close
off the p tag and then inside the p tag,
I'm going to use a span to define dish.description.
So, if you are familiar with JavaScript objects,
you now see how I am accessing the properties of
my JavaScript object here, dish.description here.
For note, running through this one more time
the ngFor attribute allows me to iterate over an array of objects here.
So, dishes here is an array of dish objects.
So, when I say let dish of dishes,
this dish will give me access to each element of
my dishes array and I iterate over each element of the array
and then I will be creating this content for each one of them.
So, this empty list item,
essentially acts like a for loop from
your traditional computer language and then it iterates over
the list of dishes and then lays out each one of them on my screen.
So, with this change,
let's save the menu component file.
Next, we go to the app.module.ts and we need to import the matList module into this.
So, we say, import MatListModule
from angular/material/list.Once we have imported this there,
then we go down and then update the imports in
the Ng module decorator and add in
the matList module to the list of imports there.
This my app module.ts is now updated and then also,
I'm going to go to the styles.scss file and then add
in the container class here.
What does the container class define here?
The container class is margin 20 pixels
and display flex and save the changes.
Now, let's go and take a look at our webpage.
Going to our web page.
Voila. There you go.
The menu for our restaurant shown in all its splendor on the screen.
You see how this menu has been created.
Look at the JavaScript object array that you have seen.
Look at how each of the properties for the JavaScript object array has been used and
mapped to the four items in my list.
Look at how the corresponding images have been included here
using the matListAvatar here.
So, this creates round images here and then note how the name of
the dish is displayed here and then the description of the dish included here.
Wonderful. Now, we have the menu for our restaurant on
the screen using a menu component in Angular.
This completes this exercise.
In this exercise, we learned how to create a new component.
add it into our Angular application,
how to include that component into the template of
another component so that creates the hierarchy of the components.
Then we saw how we can make use of the angular flex layout and also
the material design components to design
the template for our menu component to display the content here.
Now, if you ask me how do I remember all these things.
Well, to be honest,
you can't remember everything but you need to understand the approach.
That is more important than trying to memorize any of these things.
Now, if you ask me where do I get the information about
the list component from angular material.
We can sort the angular material documentation and there you
will have the details about how a list component should be prepared.
Now, where do we get the details about how we design a component in angular?
We just examined a little bit of that and then in this exercise,
we learned how to create a new component and then apply that in our angular application.
So, this is a good point for you to do a
get comment with the message components part one.
In the next exercise,
we're going to improve upon this a little more using another kind
of angular material component for laying out the content on my screen.