Time to continue with our next exercise where we will examine components once again.
We will modify the template for
the menu component that we have already included into our Angular application
by using a new kind of material component to layout our menu in a different way.
Along the way, we will also look at the use of the ngIf structural directive.
Going to the template file of our menu component,
I'm going to make some changes to this template file.
First, I'm going to add in another div here
with fxFlex and then close off that div there.
So, notice that now inside my outer div,
I have two divs here.
So, one with the div and the second one with the empty list.
So, these are two pieces of content that need to be laid out onto the screen.
But note that I have specified the fxLayout to be colored.
So, which means that, these two pieces of
content will be laid out one on top of each other,
stacked one on top of each other.
So, in the first div,
I'm going to include a little bit of content here.
So, I will put another div inside here.
Later on, I will be adding more into this div.
But for the moment, I will only have an h3 with the menu item there,
and then add a horizontal line element to this menu.
So, this will give the title for
this particular page right on top in my application when it is rendered.
So, that is one modification.
Now for the second part,
instead of using the mat-list-item,
I'm going to now take the help of a mat-grid-list.
Mat-grid-list allows me to layout the content as
a grid of items rather than a list of items.
We saw how the menu was laid out with the list of items in the previous exercise.
Now, I would like to lay out the same menu in a different way a
bit more attractive layout for the menu.
So, instead of using the mat-list,
I am going to now change this from mat-list to a mat-grid-list.
So, before I do that,
I will also enclose this inside another div to which I will apply the fxFlex here,
so that the mat-grid-list is in its own there.
So, that will give me more flexibility for adding items
to this particular unit if I need later on.
The grid list now takes a parameter called as
columns which specifies how many columns should this grid contain.
Right now I will specify the columns as two because I only have four items in my menu.
So, two columns are sufficient enough.
So, at least I have two rows of the grid there.
Also, this takes another parameter called
as rowHeight or an attribute called as rowHeight,
which I will specify to be 200 pixel here.
So, that would complete the mat-grid-list that I have inside the div there.
Now, once I make the change, then inside this,
I will go in and use,
instead of the mat-list-item,
this is now going to be a mat-grid-tile here.
So, the grid tile.
Basically, tiles of the grid.
This grid tile, as you realize,
I'm going to be iterating over the list of dishes.
So, I'm still using my ngFor directive with it.
This mat-grid-tile will now enclose
the content that is going to be laid out in each tile of my grid here.
Now, inside the tile,
I'm going to use the image as it exists.
But I'm going to use the image,
not with the matListAvatar because that cannot be applied here, and instead,
I will specify the height for the image as 200 pixels.
So, this matches the row height so that my image will stretch
the entire height of my tile there.
So, image height, 200 pixel,
and the source and the alt will remain as such.
Then, the next part,
instead of the h1,
I'm going to change this one
to be
enclosed inside mat-grid-tile-footer.
So, whatever content is inside here will appear inside the mat-grid-tile-footer here.
Now, inside there I can specify whatever content I want.
So, for the grid tile,
given the complete description is a bit too much.
So, I'm going to remove this description,
and instead, only use the h1 there.
Now, in addition, I'm going to take the help of an angular pipe here.
The pipe that I'm going to apply to this, as you can see,
the pipe is the vertical bar on your keyboard.
Then, I will use the uppercase pipe.
So, what does this pipe do?
This pipe, the uppercase pipe will transform the dish name from
whatever it is into an entire word with uppercase letters.
So, whatever the dish name would be rendered as
completely uppercase letters when it is rendered onto the template there.
So, that's the use of an angular pipe here.
So, we're going to use more angular pipes as we go along.
This is our first encounter with one of the built-in angular pipes in this course.
So, with this, we have now modified our layout
to show this div here and then this grid list here.
Let's save the changes.
Going now to app.module.ts file,
we need to import the MatGridListModule in there.
So, going to the top there, we'll say,
"Import MatGridListModule from angular/material/grid/list."
Once we have added this,
then we will go down to the imports in the decorator,
and then include the MatGridListModule into the inputs.
Let's, again, save the changes.
Let's go and take a quick look at our webpage and what it looks like on the screen.
Going to our webpage,
you can now see that your menu is now laid out in a different way.
Although, it is not really that great looking at the moment.
I am no designer,
so that's the best that I could get from it.
Now, if I had 20 items in my menu,
then I could lay out multiple items on each row and multiple columns,
and then I could compress the space that each item occupies,
or I can increase the size of the image so that it
occupies the entire thing until it'll look a lot more attractive on the screen.
Now, let's take a look at this same thing when it is viewed in a smaller devices' screen.
So, this is where I'm going to take the help of
the developer options in my Chrome browser.
So, I will start off the development tools here.
When I have the development tools here,
you can see this button here saying, "Toggle device toolbar."
So, let me toggle back.
Then you can see the same page being rendered on different screen sizes.
So here, you see the page being rendered in a Galaxy S5,
and then the same thing
you can see it being rendered in landscape mode.
So, you can see that this allows me to view the same page
on different screen sizes using the built-in developer tools in Android.
So, let's take a look at what it looks like on an iPhone.
The menu looks much more attractive here.
This is what I would like to achieve on the screen.
If my images were much larger in size even on the higher resolution screens,
the menu would look like this.
In landscape mode, this is what it's going to look like.
Now, take a note of this developer tools in Chrome.
We're going to be using the developer tools later on when we use Angular in
more detail because we can examine things like what Angular
can print for us on the console.
Then we can even examine how the different parts of our application are being fetched.
We can look at the network performance of our application, and so on.
So, that is where these developer tools addition is very,
very useful for us.
Switching back to the normal way,
this is what our webpage looks like on a standard desktop browser.
We're not done yet.
Let's go back to the menu components.
Typescript file and then this dishes that I have
defined here instead of keeping this inside my class,
I'm going to move this dishes into a constant that I
will define right up there and we'll name it as const dishes,
and this would be of the type dish an array,
and then I will cut this whole set of dishes from here and then move it up there.
This is in preparation for a future exercise where we're going
to not include this kind of data in our application,
but instead we will be moving this into a service.
So, what I have done is cut that dishes information and
then put it into a constant here with the name dishes in all capitals here,
and then now my dishes is left as an orphan here.
So, this I'm going to make it equal to dishes here.
Now, you got to wonder how come I have removed the type for the dishes.
TypeScript is intelligent enough to realize that when you do this,
it will automatically assign the type to dishes to match what you have in dishes.
So, even if you don't type it in TypeScript will do that,
but if you want to be completely clear you
can do this too and that will work just as fine.
Okay, if you prefer this will leave it as such.
Now, in addition, I'm going to introduce one more variable here called selectedDish.
This variable I'm going to use in this exercise and one of the later exercises also.
So, I'm going to make this equal to the first dish in my array.
Now, this selectedDish will be useful for the next part of this exercise.
So, let's save the changes and then move back to our template.
In the template, what I'm going to do is right below the menu,
I'm going to use a card element from angular material to
display this selectedDish right below the menu there.
Now, although this is not the best way of doing it,
but this I am doing in preparation for the next exercise just to
illustrate to you how a material card element can be used for our application.
So, I'm going to use a div with an fx flex here,
and then to this div I'm going to add in
a ngIf with the selectedDish.
So, note that I am applying an ngIf to this div here to
specify that if the selectedDish is currently null,
then I won't add this div to the dom.
If it is not,
then this div will be added to the dom,
and will display the card element with the content in the If.
So, I'm going to use a card element for displaying the details of the selectedDish.
So, to do that,
I use a mat-card here from the material designs card here.
The mat-card itself has
an mat-card header part
and also together with the mat-card-header,
it'll have an mat-card-content.
Let me close off that mat-card-content.
So, in the header, what do I want to show in the header?
In the header, I want to use
an mat-card-title to show
the details of the name of the selectedDish here.
So, I would go in and say h3 and close off the h3 and inside here I'm going to
use the interpolation and then say
selectedDish name and pipe uppercase.
So, note how I have included the name of the selectedDish using the mat-card-title.
Now, in addition, I'm going to use a method,
one called image which takes an attribute called mat-card-image and
the source would be as you expected,
this should be selectedDish.image and
then the alternative I am going
to give as selectedDish.name.
So, this would be the image that will be included into my card here.
So, in the content,
I'm going to include selectedDish description,
and then along with the content here,
I can also add in some buttons to the bottom of the card.
So, I will use mat-card-actions here and inside
there I can include a button.
So, you see that this is the use of a button
in my application, two buttons.
Notice the use of this mat-button here.
So, this will turn this button into a material design like button here,
and so, these two buttons will appear at the bottom of my card here.
So, with this, I have added in the details of the selectedDish.
There is reason for me to do this.
I'm showing you how you can display the details in a card,
well, this is in preparation for your first assignment.
So, you can see how we can use a material design card in our template here.
Going to @module.ts, we need to import the card and the button module.
So, going up to the top we'll say import MatCardModule from
angular material card and
import MatButtonModule from angular material button.
Now that we have added these two to the top,
let's go to the decorator,
and in the imports let's add in the MatCardModule and the MatPatternModule.
So, let's save the changes and then take a quick look at our web page.
Taking a look at our angular application in the browser,
you now see that we have the menu being displayed
here and then at the bottom we now have a card element.
So, you can see the card element here with the title there and the image there.
Of course, the image looks horrendous because it's
the actual image size that I have given you is so
small and it has been expanded to fill the entire screen.
Look at the bottom here. So, this
contains the description of the image and then two buttons here,
right down below here.
So, this is how the mat-button styles the buttons in an angular template,
so you have like and the share button.
Of course, they are not doing anything,
but note the material design like behavior's there.
So, when you click on the button,
you can see the ripples going through.
So, that's the reason why I decided to use
the angular material module for designing the templates in this course.
So, taking a look at it on a smaller device,
it looks much more attractive on a smaller device.
So, you can see that the rendering is much better on a smaller device,
you can see that on the screen you can see
the card right there showing the details and the two buttons there,
the like and the share button,
and the details of the dish.
So, that completes this exercise.
So, in this exercise,
we have examined the use of the grid list and
the card material design components to design the template for our menu component.
This may be a good time for you to do a good comment with the message,
Angular components part two.