Thursday, September 15, 2016

Working with Grid List in Angular Material


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 Started 

 Use md-grid-list and md-grid-tile directive to create a Grid List. Consider following code for md-grid-list.

  • Use md-cols attribute for configuring number of columns on the grid list. 
  • Use md-row-height attribute to set height of each row (and hence the tile). 
<md-grid-list md-cols="4" md-row-height="200px">…</md-grid-list>

Each tile on the grid list is represented by md-grid-tile directive. Use ng-repeat to iterate through array of dinosaur data. 
<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.

<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