Angular Material 13 Flexible Responsive Grid List Tutorial

Angular Material 13 Responsive Grid example. Angular Material is a great go-to library for developing responsive and user-friendly layouts. It offers tons of UI components that can drastically increase User interface development speed.

Today, we are going to learn specifically about the grid list in Angular. However, Angular Material has loads of helpful UI components. Still, the mat grid list is the UI component that allows you to build the responsive grid system in Angular in seconds.

The mat-grid list is a two-dimensional list view that positions cells into the grid-based layout. This guide will teach us how to create a simple responsive grid layout in Angular using a material grid list component.

On top of that, we will also understand how to create the dynamic grid list layout in Angular from the absolute beginning.

How to Create Responsive Grid in Angular 13 using Material Mat Grid

  • Step 1: Build Angular Application
  • Step 2: Set Up Material Library
  • Step 3: Register Mat Grid List Module
  • Step 4: Simple Grid List/li>
  • Step 5: Dynamic Grid List
  • Step 6: Start Development Server

Build Angular Application

Install the latest Angular CLI tool for starting the angular development.

npm install -g @angular/cli

Create a new angular application using the given command.

ng new ng-material-demo

Step inside the project directory.

cd ng-material-demo

Disable Strict TypeStrict

The latest version of Angular comes with strict mode, therefore, you need to update the compilerOptions and angularCompilerOptions in tsconfig.json file for disabling the strict mode:

{
   “strict”: false, 
   "noImplicitReturns": false 
   "strictTemplates": false
}

Set Up Material Library

Angular Material library is easy to add in angular, it is just one command away to be installed.

ng add @angular/material

Here are the options manifests on top of your terminal screen, select the options as suggested.

  1. Choose a prebuilt theme name or “custom” for a custom theme:

    You can choose from prebuilt material design themes or set up an extensible custom theme.

  2. Set up global Angular Material typography styles:

    Whether to apply the global typography styles to your application.

  3. Set up browser animations for Angular Material:

    Importing the BrowserAnimationsModule into your application enables Angular’s animation system. Declining this will disable most of Angular Material’s animations.

Open the src/styles.scss file, add the material CSS inside this styling file.

@import "~@angular/material/prebuilt-themes/indigo-pink.css";

Register Mat Grid List Module

However, we need only MatGridListModule that needs to be imported from from ‘@angular/material/grid-list’ package. But, we imported all the modules of the material framework.

Because you might need other material UI modules in the future, the great thing about registering this way is that you can manage material very quickly.

In your angular project, head over to src/ folder, create the new material.module.ts file then import all the material UI components modules in this file.

import { NgModule } from '@angular/core';
import { A11yModule } from '@angular/cdk/a11y';
import { CdkAccordionModule } from '@angular/cdk/accordion';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { DragDropModule } from '@angular/cdk/drag-drop';
import { PortalModule } from '@angular/cdk/portal';
import { ScrollingModule } from '@angular/cdk/scrolling';
import { CdkStepperModule } from '@angular/cdk/stepper';
import { CdkTableModule } from '@angular/cdk/table';
import { CdkTreeModule } from '@angular/cdk/tree';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatBadgeModule } from '@angular/material/badge';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatStepperModule } from '@angular/material/stepper';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatDialogModule } from '@angular/material/dialog';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatNativeDateModule, MatRippleModule } from '@angular/material/core';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatRadioModule } from '@angular/material/radio';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSliderModule } from '@angular/material/slider';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatTreeModule } from '@angular/material/tree';
import { OverlayModule } from '@angular/cdk/overlay';

@NgModule({
  exports: [
    A11yModule,
    CdkAccordionModule,
    ClipboardModule,
    CdkStepperModule,
    CdkTableModule,
    CdkTreeModule,
    DragDropModule,
    MatAutocompleteModule,
    MatBadgeModule,
    MatBottomSheetModule,
    MatButtonModule,
    MatButtonToggleModule,
    MatCardModule,
    MatCheckboxModule,
    MatChipsModule,
    MatStepperModule,
    MatDatepickerModule,
    MatDialogModule,
    MatDividerModule,
    MatExpansionModule,
    MatGridListModule,
    MatIconModule,
    MatInputModule,
    MatListModule,
    MatMenuModule,
    MatNativeDateModule,
    MatPaginatorModule,
    MatProgressBarModule,
    MatProgressSpinnerModule,
    MatRadioModule,
    MatRippleModule,
    MatSelectModule,
    MatSidenavModule,
    MatSliderModule,
    MatSlideToggleModule,
    MatSnackBarModule,
    MatSortModule,
    MatTableModule,
    MatTabsModule,
    MatToolbarModule,
    MatTooltipModule,
    MatTreeModule,
    OverlayModule,
    PortalModule,
    ScrollingModule,
  ],
})

export class MaterialModule {}

Open the app/app.module.ts file, in this file you now need to import the MaterialModule, and also import CUSTOM_ELEMENTS_SCHEMA, FormsModule, ReactiveFormsModule and MaterialModule modules.

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { MaterialModule } from '../material.module';

@NgModule({
  declarations: [AppComponent],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    FormsModule,
    ReactiveFormsModule,
    MaterialModule,
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})

export class AppModule {}

Simple Grid List

A mat-grid-list must specify a cols attribute that specifies the number of columns in the grid. The number of rows is automatically selected based on the number of columns and the number of items.

Next, set the row height to the mat-grid-list using rowHeight property. Ideally, row height for the list is calculated in three ways: Fixed height, ratio, and Fit. If row height is not set, then the default ratio of width and height will be 1:!.

Update the app.component.html file.

<h2>Angular Material Responsive Grid Example</h2>

<mat-grid-list cols="2" rowHeight="2:1">
  <mat-grid-tile>1</mat-grid-tile>
  <mat-grid-tile>2</mat-grid-tile>
  <mat-grid-tile>3</mat-grid-tile>
  <mat-grid-tile>4</mat-grid-tile>
</mat-grid-list>

Dynamic Grid List

We can also create the dynamic grid list and set the colspan, rowspan and style.background props to the mat-grid-tile directive.

Update the app.component.html file.

<h2>Angular Material Dyanmic Responsive Grid Example</h2>

<mat-grid-list cols="4" rowHeight="100px">
  <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>

Update the app.component.ts file.

import { Component, OnInit } 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.scss'],
})

export class AppComponent {
  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: '#DDBDF1' },
  ];
}

Start Development Server

Start the angular development server by typing and executing the provided command.

ng serve --open

Your app will open on this url by default on the browser.

http://localhost:4200

Angular Material 13 Flexible Responsive Grid List Tutorial

Conclusion

In this profound post, we understood in great details about the responsive material grid component. We learned by example and successfully created a simple grid layout and a dynamic grid layout in Angular using the mat-grid-list property.