In this article we will learn how to create & use material dashboard in angular. Please follow our previous article How to use angular material in angular. If you are new to angular then please explore our Angular Series where we discussed step by step process of angular from beginner to advance level.

  • We create a sample angular 9 application and there use in-built angular dashboard functionality.
  • Here we can see how to add angular material dashboard dynamically with card. We can do change the dashboard card columns and rows dynamically.

Add Material Design in Angular

To create the angular application use the below command. ng-material-dashboard is the project name.

ng new ng-material-dashboard

To add the material design in angular just follow the below command. Also you can find the details about our previous article How to use angular material in angular.

ng add @angular/material

After type the command in terminal window and hit enter then a prompt will ask to choose which material template want to install into the application like this. Let’s install first one “Indigo/Pink” you can chhose any other theme just navigate to the link.

material theme

Generating a Material Dashboard

To generate a material dashboard use the below command. This command should create a starter dashboard component.

Synatax

ng generate @angular/material:material-dashboard --name = <Name of Dashboard>

material-dashboard is a starter component, which generates a group of the materialized components in the form of the dashboard by just providing a name. To create the dashboard run the below command

ng generate @angular/material:material-dashboard --name material-dashboard

And as you can see in the console, there are a few files created inside the app directory with a component name provided. The file structure looks like the below screen.

material-dashboard

After installing this you can see the material-dashboard ts, html and css file automatically created.

Materiel Dashboard component

app.module.ts

You can see here when the material-dashboard component is created it automatically add the required module inside app.module.ts

materiel-app-module

material-dashboard.component.ts

In the below typescript we create a Cards list that return how many columns and rows. You can change the column and row to set dynamically.

import { Component } from '@angular/core';
import { map } from 'rxjs/operators';
import { Breakpoints, BreakpointObserver } from '@angular/cdk/layout';
@Component({
  selector: 'app-material-dashboard',
  templateUrl: './material-dashboard.component.html',
  styleUrls: ['./material-dashboard.component.css']
})
export class MaterialDashboardComponent {
  /** Based on the screen size, switch from standard to one column per row */
  cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe(
    map(({ matches }) => {
      if (matches) {
        return [
          { title: 'Card 1', cols: 1, rows: 1 },
          { title: 'Card 2', cols: 1, rows: 1 },
          { title: 'Card 3', cols: 1, rows: 1 },
          { title: 'Card 4', cols: 1, rows: 1 }
        ];
      }
      return [
        { title: 'Card 1', cols: 2, rows: 1 },
        { title: 'Card 2', cols: 1, rows: 1 },
        { title: 'Card 3', cols: 1, rows: 2 },
        { title: 'Card 4', cols: 1, rows: 1 }
      ];
    })
  );
  constructor(private breakpointObserver: BreakpointObserver) {}
}

material-dashboard.component.html

The below snippet is a basic building block which was generated by the component generator. Dynamically bind the cards from material-dashboard.component.ts and using *ngFor iterate the result through material components.

<div class="grid-container">
  <h1 class="mat-h1">Dashboard</h1>
  <mat-grid-list cols="2" rowHeight="350px">
    <mat-grid-tile *ngFor="let card of cards | async" [colspan]="card.cols" [rowspan]="card.rows">
      <mat-card class="dashboard-card">
        <mat-card-header>
          <mat-card-title>
            {{card.title}}
            <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
              <mat-icon>more_vert</mat-icon>
            </button>
            <mat-menu #menu="matMenu" xPosition="before">
              <button mat-menu-item>Expand</button>
              <button mat-menu-item>Remove</button>
            </mat-menu>
          </mat-card-title>
        </mat-card-header>
        <mat-card-content class="dashboard-card-content">
          <div>Card Content Here</div>
        </mat-card-content>
      </mat-card>
    </mat-grid-tile>
  </mat-grid-list>
</div>

material-dashboard.component.css

This style sheet file contains different classes to provide different positioning and directions throughout the page.

.grid-container {
  margin: 20px;
}
.dashboard-card {
  position: absolute;
  top: 15px;
  left: 15px;
  right: 15px;
  bottom: 15px;
}
.more-button {
  position: absolute;
  top: 5px;
  right: 10px;
}
.dashboard-card-content {
  text-align: center;
}

These files are automatically generated for creating a Material Dashboard.

Now, the last step is to execute our dashboard app. For that, just go to the app.component.html file and remove all of the content and just add the material-dashboard tag like below;

<app-material-dashboard> </app-material-dashboard>

All the changes has been made, let’s run the application and see the output like below;

Material starter Dashboard template

You can do place the dynamic content/image into the card accordingly in material-dashboard.component.ts. Let’s say we add a image field in card like below;

return [
        { title: 'Card 1', cols: 2, rows: 1, imagepath: '/assets/img1.png' },
        { title: 'Card 2', cols: 1, rows: 1, imagepath: '/assets/img2.png' },
        { title: 'Card 3', cols: 1, rows: 2, imagepath: '/assets/img3.png' },
        { title: 'Card 4', cols: 1, rows: 1 , imagepath: '/assets/img4.png' }
      ];

And in the material-dashboard.component.html add like this.

Image add
Image add

After run the application you can see the image are displayed on the card. According to your dashboard design you can do the stuff.

Image bind on Card

Summary

So far this article we discuss how to use material dashboard in angular. If have any suggestion about this article please give your feedback.

That’s a wrap for this article. I hope that it cleared about Material Dashboard in Angular. Please write to us if have any.

Have you enjoyed this post and found it useful? If so, please consider supporting me:

Buy me a coffeeBuy me a coffee

Export data into PDF in ASP.NET MVC
Export-Data-into-PDF-SERVICE

In this example we use Dapper ORM to fetch the data from database and using the data we export into Read more

How to read external JSON file in Jquery AJAX
Javascript-Jquery-Ajax

This article explain how to read external json file. There are many ways to store JSON data in our application. Read more

How to create custom pipes in Angular
How to create custom pipes in Angular

A pipe takes in data as input and transforms it to a desired output. Simply you can say Pipes are Read more

How to use angular material in angular
How to use angular material in angular

UI component infrastructure and Material Design components for mobile and desktop Angular web applications.

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Pin It on Pinterest

Share This