In the Angular material, we do have a grid layout system similar to the bootstrap grid that is used to create the two-dimensional list view. in the Angular material library, we have a grid list module which is useful to create the grid layout in angular.
Table of Contents
What is Angular Material Grid?
Angular Material Grid is a component that is used to structure the layout in a distributed way for multiple platforms are like Web, Mobile, Desktop, and other platforms are as well.
Most developers may use bootstrap or any other front-end libraries already, the same way the angular material grid is used to manage cells into grid layout to make it more responsive elements into multiple devices.
Angular Material Grid is a two-dimensional list view that contains a grid-based layout, so let’s start with the actual use of a material grid.
Types of the material grid elements
- mat-grid-list
- mat-grid-tile
- mat-grid-tile-header
- mat-grid-tile-footer
1. mat-grid-list
Syntax :
<mat-grid-list> </mat-grid-list>
Properties :
- cols : Specifies the number of columns to be generated.
- rowHeight : It specifies the height of the grid list.
- gutterSize :
- gutter size in px, em, or rem units
- Defines the size of the grid list’s gutter in a form of pixels, and always the default value will be 1px.
- we can also specify the ratio or rem(root em) value with it.
Example : mat-grid-list Example for 2 Columns
app.module.ts :
Add the below import statement into your module file.
import { MatGridListModule } from '@angular/material/grid-list';
@NgModule({
imports: [
//other modules
MatGridListModule,
//other modules
]
})
export class AppModule {}
app.component.html
<mat-grid-list cols="2" rowHeight="2:1" [style.background]="'skyblue'">
<mat-grid-tile> Grid first </mat-grid-tile>
<mat-grid-tile> Grid second </mat-grid-tile>
<mat-grid-tile> Grid third </mat-grid-tile>
<mat-grid-tile> Grid fourth </mat-grid-tile>
</mat-grid-list>
Output :
And you will get output something like this.
As you can see that it will create a grid with the list of 2 columns with almost 100px height because we do not provide any specific value, thus it will take default height automatically.
We can use a few important properties as described above with a material grid so that we can have a more manageable grid for our single-page application.
To implement those properties, we can try the below example for more and a better understanding. Open the HTML file and try the given code snippet.
Example : Dynamic mat-grid-list Example with 4 Columns
app.component.html
<mat-grid-list cols="4" rowHeight="100px" gutterSize="5px">
<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>
And to specify the basic settings to the grid and for the tile specifically, we need to provide appropriate properties to render the grid element as per our different functional requirements.
app.module.ts
import { Component } from '@angular/core';
export interface Tile {
color: string;
cols: number;
rows: number;
text: string;
}
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
tiles: Tile[] = [
{text: 'One', cols: 1, rows: 1, color: 'lightblue'},
{text: 'Two', cols: 1, rows: 1, color: 'lightgreen'},
{text: 'Three', cols: 1, rows: 1, color: 'lightblue'},
{text: 'Four', cols: 1, rows: 1, color: 'lightgreen'},
];
}
Output :
And you will get output something like this.
2. mat-grid-tile
To use grid tiles into the grid we can use the mat-grid-tile selector as described below.
Syntax :
<mat-grid-tile> </mat-grid-tile>
Properties :
- Rowspan
The total number of rows at the time of the grid takes
- Colspan
The total number of columns at the time of the grid takes
Example : mat-grid-tile Colspan & Rowspan Example
3. mat-grid-tile-header
Syntax :
<mat-grid-tile-header> </mat-grid-tile-header>
Example : mat-grid-tile Header Example with 4 Columns
app.component.html
<mat-grid-list cols="4" rowHeight="200px" gutterSize="5px"> <mat-grid-tile *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows" [style.background]="tile.color"> <mat-grid-tile-header> <h4>Angular Material</h4> </mat-grid-tile-header> </mat-grid-tile> </mat-grid-list>
Output :
And you will get output something like this.
4. mat-grid-tile-footer
Syntax :
<mat-grid-tile-footer> </mat-grid-tile-footer>
Example : mat-grid-tile Footer Example with 4 Columns
app.component.html
<mat-grid-list cols="4" rowHeight="200px" gutterSize="5px"> <mat-grid-tile *ngFor="let tile of tiles" [colspan]="tile.cols" [rowspan]="tile.rows" [style.background]="tile.color"> <mat-grid-tile-footer> <h4>Angular Material</h4> </mat-grid-tile-footer> </mat-grid-tile> </mat-grid-list>
Output :
And you will get output something like this.
I hope you like this amazing article.
Also Read:
- Angular Material Card Example
- Angular Material List Example
- Angular Material Button.
- Angular Material Date Range Picker
- Angular Material AutoComplete Dropdown Example
- Angular Material Select Change Event Example
- typescript string to number