Working with Angular Material Grid Layout

Angular material provides a grid system which makes it easy to create a two-dimensional view arranging cells into the grid-based layout. It is useful in creating a structured layout for multiple platforms like web and mobile. This is similar to the bootstrap grid (row and column) where Angular Material grid layout is used to manage cells to make it responsive in a different layout or into multiple devices.

In this post, we will be looking into the way you can use the angular material grid to make your web page look better in any dimension. For using it we have different elements which we can use as per our requirements, let's go through those elements first before using the angular material grid system in our application.

Mat Grid List - It is a selector to use material grid i.e. it is used to include grid into our HTML. We can say that it is the starting point to have a grid layout in angular application. It takes cols (number of columns to be generated), guttersize (size of the grid list's gutter in the form of pixels, ratio or rem) and row height (specifies the height of the grid list).

Mat Grid Tile - It is a selector to use grid tiles into the grid. It takes rowspan (total amount of rows grid tile takes) and colspan (total amount of columns grid tile takes).

Mat Grid Tile Header - This selector is to include the header to show some basic information or element.

Mat Grid Tile Footer - Just like mat grid tile header, this selector is to include the footer to show some basic information or element.

Mastering ASP.NET Security

Let's Take an Example :

Html - In this, we have written an angular material grid list layout where we have used mat grid list ith cols 4, rowHeight with 4:2 and gutterSize with 10px. We also are using mat grid tile selector to show the cells and the values are coming from the Typescript file

<mat-grid-list cols="4" rowHeight="4:2" gutterSize="10px">
  <mat-grid-tile *ngFor="let tile of tiles" [colspan]="tile.cols" 
                 [rowspan]="tile.rows" [style.background]="tile.color">
    {{tile.text}}
  </mat-grid-tile>
</mat-grid-list>

TypeScript - 

export  interface  Tile  {
  color:  string;
  cols:  number;
  rows:  number;
  text:  string;
}
tiles: Tile[]  =  [ {text: 'One', cols:3, rows: 1, color: 'lightblue'},
{text: 'Two', cols:1, rows: 2, color: 'lightgreen'},
{text: 'Three',cols:1, rows: 1, color: 'lightpink'},
{text: 'Four',cols:2, rows: 1, color: 'red'}];

Thus we can see how easy is to use angular material in our application and thus it has a number of elements to customize it as per your requirement. The good thing is that you can easily use Angular Material and Bootstrap together.