This blog describes using Angular Material's Grid List to show an array of data. We use Angular Material directives/elements/attributes for rendering the content.
| Angular Material’s Grid List provides a different perspective to the regular list control. Each item in the grid list are laid out as tiles. It provides additional space and an elaborate view. More than anything, it is fun to play with the layout compared to regular list. For the blog I’m using dinosaur data represented with a grid list. Special thanks Firebase sample dataset that provide readymade JSON objects. (Not using firebase for this sample. Just used the sample dataset). Refer to references section at the end for a link to the dataset. Getting StartedUse md-grid-list and md-grid-tile directive to create a Grid List. Consider following code for md-grid-list.
<md-grid-list md-cols="4"
md-row-height="200px">…</md-grid-list> |
|
<md-grid-tile ng-repeat="item in dinosaurs" >
... </md-grid-tile>
Within md-grid-tile, use elements/directives md-grid-tile-header and md-grid-tile-footer elements to add header and footer to each tile. Blog's sample is using a footer. Consider the following code. It shows two elements on the footer for a dinosaur, name and the order.
<md-grid-tile-footer >
<strong>{{item.name}}</strong>
<div>{{item.order}}</div>
</md-grid-tile-footer>
Responsive Attributes
A four column grid looks good on a desktop screen. How about a
mobile or tablet screen? The tiles might squeeze and the content might not be legible.
Use Angular Material attributes that take advantage of CSS3 Flexbox break points for
rendering according to the screen size. Consider following sample.
<md-grid-list
md-cols-gt-sm="4" md-cols-sm="2" md-cols="1"
md-row-height="200px"> Use md-cols-sm with a value 2. It shows grid list with two columns on a small screen. The CSS Flexbox (used underneath by Angular Material) considers screen width between 600px and 960px as a small screen.
Use md-cols-gt-sm with a value 4. It shows grid list with four
columns on a screen greater than large. That is medium, large and extra large
screens. Anything with screen width greater than 960px is considered greater
than small.
That leaves an extra small screen (screen width less than 600px). Use md-cols default value to 1. It shows a grid list with one column on an extra small screen.
Make specific tiles larger
Based on a specific criteria, one or more
tiles could be made larger than others. Consider following sample. It makes the first tile span over two rows. $index represents index of an item in the loop with ng-repeat. If it’s 0, set rowspan value to 2. Otherwise stick to default value 1.
tiles could be made larger than others. Consider following sample. It makes the first tile span over two rows. $index represents index of an item in the loop with ng-repeat. If it’s 0, set rowspan value to 2. Otherwise stick to default value 1.
<md-grid-tile md-rowspan-gt-xs="{{($index===0)?2:1}}" ng-class="item.background" ng-click="null" ng-repeat="item in dinosaurs">
It is a simplistic example. But consider using the rowspan based on tile's content length. For tiles with larger content or images, increase the rowspan.
Also, notice -gt-xs break point has been used on md-rowspan. As detailed out already, on an extra small screen, grid list shows a single column. With nothing next to it in a row, we can set it to default height on an extra small screen.
Complete Sample
References:
Angular Material website (https://material.angularjs.org) for
- Grid List details.
- Responsive break points.
Firebase dinosaurs sample dataset- https://dinosaur-facts.firebaseio.com/dinosaurs
