Learn how grid layouts are used for galleries and showing similar items.
- [Instructor] Next we want to add a grid-list…to our Homepage which is going to show a listing…of all the carrots for the specific category…we're looking at.…In this case we're looking at Deals,…we want to see those carrots right here,…so we know what to buy.…Returning to our Editor, if I look at the typescript code…behind our Homepage component,…you can see we're already loading a list of carrots,…right here and setting them as carrots.…Now we want to spell those out using a grid-list.…So on line 3, I'm going to expand this tab,…and I'm going to go ahead and add the grid-list.…
And the nice thing about a grid-list is you can…specify the number of items to show on columns…and it will enforce that.…So I can say I want to have 4 columns,…say "4" columns, and then I'm going to go ahead…and add a grid-tile, which represents the item…inside the grid, and I'm going to loop:…ngFor="let carrot of carrots",…now I've got some CSS of my own in here,…some custom classes, so I'm going to put…a: "carrots-container", which is the item…
- What is Material Design?
- Planning your app
- Adding the required modules to your project
- Installing and configuring Material Design
- Adding a sidenav
- Separating content using the tab control
- Working with grid layouts
- Adding buttons and icons
- Selecting colors and building a color scheme