Home  >  Angular  >  Angular Material

Angular Material Grid List Example

By Arvind Rai, April 11, 2021
On this page we will discuss creating Angular material Grid List. To create grid list we need to know following directives.
1. MatGridList
The selector for MatGridList is mat-grid-list. The mat-grid-list is a two-dimensional list view that arranges cells into grid-based layout. Find the properties of mat-grid-list.
cols: Number of columns in grid list.
rowHeight: Sets row height. The row can be set with fixed height in px, em or rem. Row height can also be set in column-width:row-height ratio. The row height can also be specified as fit that automatically sets row height.
gutterSize: Gutter size in px, em, or rem units.

2. MatGridTile
The selector of MatGridTile is mat-grid-tile. The <mat-grid-tile> is child element of <mat-grid-list> element. Find the properties of mat-grid-tile.
colspan: Number of columns that grid tile takes up.
rowspan: Number of rows that grid tile takes up.

3. MatGridTileText
The selector of MatGridTileText is mat-grid-tile-header and mat-grid-tile-footer. The mat-grid-tile-header is used to create grid list header and mat-grid-tile-footer is used for footer.



Technologies Used

Find the technologies being used in our example.
1. Angular 11.0.3
2. Angular Material 11.2.0
3. Node.js 12.5.0
4. NPM 6.9.0

Creating Grid List

To create grid list, we need to import MatGridListModule in our application module.
import { MatGridListModule } from '@angular/material/grid-list'; 
Find the sample code to create grid list.
<mat-grid-list cols="2" rowHeight="100px">
  <mat-grid-tile>A</mat-grid-tile>
  <mat-grid-tile>B</mat-grid-tile>
  <mat-grid-tile>C</mat-grid-tile>
  <mat-grid-tile>D</mat-grid-tile>
</mat-grid-list> 
Find the print screen of output.
Angular Material Grid List Example

Setting cols

The cols is the attribute of <mat-grid-list> element. The cols sets the number of columns in grid. It is mandatory to specify cols in <mat-grid-list>. The number of rows is automatically determined on the basis of number of columns and number of items.
<mat-grid-list cols="4">
  ------
</mat-grid-list> 

Setting rowHeight

The height of row in a grid list is set via rowHeight attribute. The rowHeight is calculated in following ways.
1. Fixed height: The rowHeight can be assigned in px, em, or rem units such as 50px, 10em, 5rem etc. If there is no unit specified, the default is px unit.
<mat-grid-list cols="2" rowHeight="5em">
------
</mat-grid-list> 
2. Ratio: The rowHeight can be assigned as column-width:row-height such as 4:2. Find the example.
<mat-grid-list cols="2" rowHeight="4:2">
------
</mat-grid-list> 
If rowHeight is not specified, it defaults to 1:1 ratio of column-width:row-height.
3. Fit: When we assign rowHeight as fit, then available height is divided into number of rows automatically.
<mat-grid-list cols="2" rowHeight="fit">
------
</mat-grid-list> 

Setting gutterSize

Gutter size is the gap between columns. The gutterSize is an attribute in mat-grid-list element. The gutterSize can be set in px, em, or rem units. By default gutter size is 1px.
<mat-grid-list cols="4" rowHeight="50px" gutterSize="15px">
------
</mat-grid-list> 

Setting rowspan and colspan

We can set rowspan and colspan properties to <mat-grid-tile>. The value for colspan must be less or equal to cols in <mat-grid-list>. The value for rowspan can be any number.
<mat-grid-list cols="4" rowHeight="50px">
  <mat-grid-tile colspan="3" rowspan="2">ABC</mat-grid-tile>
  ------  
</mat-grid-list> 
If rowspan and colspan are not set, they both default to 1.

Grid List of Cards

Find the example of <mat-grid-list> with <mat-card>.
<mat-grid-list cols="2" rowHeight="50px">
  <mat-grid-tile *ngFor="let card of cards">
    <mat-card class="my-card">
      <mat-card-title>{{card.title}}</mat-card-title>
      <mat-card-content>
         {{card.content}}
      </mat-card-content>
    </mat-card> 
  </mat-grid-tile>
</mat-grid-list> 



Complete Example

app.component.html
<h3>Using rowHeight</h3>
<mat-grid-list cols="2" rowHeight="50px">
  <mat-grid-tile>A</mat-grid-tile>
  <mat-grid-tile>B</mat-grid-tile>
  <mat-grid-tile>C</mat-grid-tile>
  <mat-grid-tile>D</mat-grid-tile>
</mat-grid-list>

<h3>Using gutterSize</h3>
<mat-grid-list cols="2" rowHeight="50px" gutterSize="15px">
  <mat-grid-tile>A</mat-grid-tile>
  <mat-grid-tile>B</mat-grid-tile>
  <mat-grid-tile>C</mat-grid-tile>
  <mat-grid-tile>D</mat-grid-tile>
</mat-grid-list>

<h3>Using rowspan and colspan</h3>
<mat-grid-list cols="4" rowHeight="50px">
  <mat-grid-tile colspan="2" rowspan="2">A</mat-grid-tile>
  <mat-grid-tile rowspan="2">B</mat-grid-tile>
  <mat-grid-tile rowspan="2">C</mat-grid-tile>
  <mat-grid-tile colspan="4">D</mat-grid-tile>
</mat-grid-list>

<h3>Grid List of Cards</h3>
<mat-grid-list cols="2" rowHeight="50px">
  <mat-grid-tile *ngFor="let card of cards">
    <mat-card class="my-card">
      <mat-card-title>{{card.title}}</mat-card-title>
      <mat-card-content>
         {{card.content}}
      </mat-card-content>
    </mat-card> 
  </mat-grid-tile>
</mat-grid-list> 
app.component.ts
import {Component} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html'
})
export class AppComponent {
  cards = [
    {title: 'Title 1', content: 'Content 1'},
    {title: 'Title 2', content: 'Content 2'},
    {title: 'Title 3', content: 'Content 3'},
    {title: 'Title 4', content: 'Content 4'}
  ];
} 
styles.css
mat-grid-tile {
    background: lavender;
}
.my-card {
    background: lavender;
    width: 100%;
} 
app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    MatGridListModule,
    MatCardModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { } 

Run Application

To run the application, find the steps.
1. Install Angular CLI using link.
2. Install Angular Material using link.
3. Download source code using download link given below on this page.
4. Use downloaded src in your Angular CLI application.
5. Run ng serve using command prompt.
6. Access the URL http://localhost:4200
Find the print screen of the output.
Angular Material Grid List Example

Reference

Grid list

Download Source Code

POSTED BY
ARVIND RAI
ARVIND RAI











©2021 concretepage.com | Privacy Policy | Contact Us