Angular Material Responsive Grid

Definition of Angular Material Responsive Grid

In Angular material, we have a grid layout that is used to create the two-dimensional list view. Also in the material library, we have a grid list module which is useful to create e the grid layout in angular. In order to use and implement this in our application, we have to make some changes and configurations inside our project, also it should be responsive as well, which means that it should be the same and adjustable automatically when the screen size changes, let’s say we have different type of screen size available for laptop, tablets and mobile screen as well, so it should be responsive for all screen size and should not be disturb or change its behaviors when run on different screen size. This can easily be achieved by using the grid list module of the material library, in the coming section of the tutorial we will have a detailed understanding about implementing with practice examples run on different screen sizes for beginners.

Syntax

To implement this inside our project we are going to make use of ‘grid list’ module of the material module. In this section we will see the syntax for creating it in detail, with the standard syntax given by the material library, lets get started to see below;

<mat-grid-list>
<mat-grid-tile> text </mat-grid-tile>
<mat-grid-tile> text </mat-grid-tile>
<mat-grid-tile> text </mat-grid-tile>
<mat-grid-tile> text </mat-grid-tile>
</mat-grid-list>

Above you can see the basic syntax for certain the responsive grid using the material library, we will have a detailed understanding in the coming section of the tutorial for better understanding, but as of now we are making use of ‘mat-grid-list’ and ‘mat-grid-tile’ to create our responsive grid layout in the material.

How responsive grid work in Angular material?

As we already know that inside the material library we have a grid list module that helps us to create the grid layout for our application, by the use of this we can easily create a two-dimensional view to represent our items on the screen, and if talk about responsive grid layout we just have to make few changes to the existing grid syntax and it will be responsive for all screen size, we can test our solution by using the google developer’s tool which helps us to provide all different type of screen size. Let’s get started with the configuration we need to make in order to see the grid module of the material library follow by the project step for angular material, see below;

1) MatGridListModule: This is a module that is provided by the material library in order to create the grid layout in our application, if we want to use this inside our application then we have to have this package imported inside our application root module or any of the child module in which want to use this. For reference see the below code which will help us to import this package inside the application see below;

e.g. :

import {MatGridListModule} from '@angular/material/grid-list';

2) mat-grid-list: after this, we have this sector which can be used to create the grid layout on the UI here we can specify the columns and row for our layout, it has few properties which are mentioned below for more clarity see below;

a) cols: number of columns in the grid already.

b) rowHeight: set the row height.

3) mat-grid-tile: this selector is used to represent our columns in the grid, it also has few property which is mentioned below ;

a) colspan: columns that grid will take.

b) rowspan: rows that grid will take up.

Lets create the angular material project from scratch for beginners;

1) First we will install the Angular CLI, which will help us to manage our angular project later. Execute the below command;

e.g. :

npm install -g @angular/cli

2) After this we can create the project using the below command, also mentioned the project name there;

e.g. :

ng new your project name

>> ng new my-first-project

3) Now It is time to install the required dependency by executing the below command;

e.g. :

npm install

4) Once the dependency is installed successfully we can now start the server by executing the below command;

e.g. :

ng serve

5) run the project using the below URL: it runs on the default port 4200

e.g. :

http://localhps:4200

7) Last step is to install the material library, once the angular project is created we can add the material library to it. Execute the below command and it will install the material dependency for us,

e.g. :

ng add @angular/material

After successful installation, we can now able to use the grid module from the material library.

Example

Sample example to show the usage of grid to make it responsive.

1) index.html code:

<app-grid-responsive>loading ..</app-grid-responsive>

2) demo.grid.compoent.ts code:

import { Component, OnInit, VERSION, ViewChild } from '@angular/core';
@Component({
selector: 'app-grid-responsive',
templateUrl: './demo.grid.compoent.html',
styleUrls: ['./demo.grid.compoent.css']
})
export class DemoGridComponent implements OnInit {
mybreakpoint: number;
constructor() { }
ngOnInit() {
this.mybreakpoint = (window.innerWidth <= 600) ? 1 : 6;
}
handleSize(event) {
this.mybreakpoint = (event.target.innerWidth <= 600) ? 1 : 6;
}
}

3) demo.grid.compoent.html code:

<mat-toolbar color="primary" layout="fill">
<div> Responsive Grid Demo using Angular Material !! </div>
</mat-toolbar>
<mat-card>
<mat-card-content>
<div fxLayout="row" fxLayoutAlign="center center" fxLayoutGap="6px">
<div></div>
<br/>
<img mat-card-image src="https://lh5.googleusercontent.com/p/AF1QipN_aupGaqTiv5_xbfKTl2qZz0XAJlGMt0WucgkU=w319-h100-k-no" alt="Photos of educba">
</div>
</mat-card-content>
</mat-card>
<mat-grid-list [cols]="mybreakpoint" rowHeight="4:0.5" (window:resize)="handleSize($event)">
<mat-grid-tile>Grid One</mat-grid-tile>
<mat-grid-tile>Grid Two</mat-grid-tile>
<mat-grid-tile>Grid Three</mat-grid-tile>
<mat-grid-tile>Grid Four</mat-grid-tile>
<mat-grid-tile>Grid Five</mat-grid-tile>
<mat-grid-tile>Grid Six</mat-grid-tile>
<mat-grid-tile>Grid Seven</mat-grid-tile>
</mat-grid-list>

4) module.ts code:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { MatToolbarModule, MatCardModule, MatGridListModule } from '@angular/material';
@NgModule({
imports: [ MatGridListModule ],
declarations: [ DemoGridComponent ],
bootstrap: [ DemoGridComponent ],
providers: []
})
export class ApGridpModule { }

Output:

Conclusion

As so far we have seen the steps to configure grid layout in the material library. Follow the above step and make it work, also very few changes are required to make this responsive because it is handled by the material library very well, also easy to use, handle, maintainable by the developers.

Recommended Articles

This is a guide to Angular Material Responsive Grid. Here we discuss the definition, How responsive grid work in Angular material? and examples with code implementation for better understanding. You may also have a look at the following articles to learn more –

1. Angular material color
2. Angular Material Progress Bar
3. Angular material search bar
4. AngularJs ng-include