Designing Shopping Page Using Angular Material Grid and Card

In our previous demo session 0009–25- Debugging Angular App in Visual Studio Code (VSCode) we have discussed about angular app debugging in visual studio code. Now our app is bit stable, so we can focus on its designing part to make it look better. In this video session Designing Shopping Page Using Angular Material Grid And Card | 0009–26 we will focus on look and feel of our shopping page by using angular material grid & card.

Let’s go back to our code base, mainly to products.component.html file. Here we can use angular grid and cards so that all our products appear in same view. Also we can mention number of columns to be used and row height as per our designing requirement. All these changes are explained in detail while practically coding in our demo session, screenshot below:

After applying all required changes we can see products page of our web application, how it looks.

In future as we get more maturity in coding, we will add up more features in this products page like add to cart options etc. With this much code base we are good to move our code into cloud. Next in our upcoming sessions, we will also learn about cloud platform Heroku, its structure, design and significance. Let’s check-in our code as we updated it for products page saying ‘updated products page’, as shown below:

In our next demo session Handling Server Side HTTP Error | 0009–27 we will learn how to handle server side errors properly.