Material Dashboard in Angular

Material Dashboard in Angular

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.

How to use angular material in angular

How to use angular material in angular

In this article we are going to discuss how to use angular material in angular 9 application. If you are new to angular then explore our Angular Series. If you miss our previous article of angular Routing then please follow the link.

Let’s Create sample angular 9 application and there we use material design. We have create some controls of materiel theme in this example. To create angular 9 application use the below command.

Create Angular Project

The below command is use if are freshly start the angular and install updated angular CLI version.

npm install -g @angular/cli@

To create a new project add the below command with Routing as YES and style as CSS. ng-material-design here our project name, you can create a project according to your choice.

ng new ng-material-design

Add the material design into angular

Using below command we can add the material design into angular 9 application.

ng add @angular/material
install material design in angular 9

On the above image while we run the command it prompt that which material theme want to install. In our case we use “Indigo/Pink”. You can install any other theme according to your choice just navigate to the themes.

material theme

On the above image you can see after installing the “Indigo/pink” theme the material package also added into package.json, angualr.json and styles.css automatically.

After adding the theme you can find the css in angular.json file like below;

"styles": [
              "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
              "src/styles.css"
            ],

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormsModule } from '@angular/forms';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import {MatSliderModule} from '@angular/material/slider';
import {MatSelectModule} from '@angular/material/select';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatSliderModule,
    FormsModule,
    MatButtonModule,
    MatIconModule,
    MatSelectModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Code Explanation

We need to add the several modules into app.module.ts to access in HTML page. After importing the module we need to add into Imports[].

Remove all the predefined HTML in app.componenet.html file then add the materiel design like below;

<div class="container mt-5">
  <h1>Angular Basic Material Design form</h1>
  <h2>Slider</h2>
  <mat-slider min="1" max="100" step="1" value="1"></mat-slider>
  <h2>TextBox</h2>
   <input matInput placeholder="Simple Input" [(ngModel)]="title" class="form-control">
   <h2>Dropdown</h2>
   <mat-form-field appearance="fill">
    <mat-label>Favorite food</mat-label>
    <mat-select>
      <mat-option *ngFor="let food of foods" [value]="food.value">
        {{food.viewValue}}
      </mat-option>
    </mat-select>
  </mat-form-field>
  <h2>Icon</h2>
  <mat-icon>home</mat-icon>
  <h2>Button</h2>
  <button mat-raised-button>Material button</button>
</div>

import { Component } from '@angular/core';

interface Food {
  value: string;
  viewValue: string;
}
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'ng-material-design';
  foods: Food[] = [
    {value: 'steak-0', viewValue: 'Steak'},
    {value: 'pizza-1', viewValue: 'Pizza'},
    {value: 'tacos-2', viewValue: 'Tacos'}
  ];
}

Code Explanation

app.component.html

  • Here we take a basic example to create a materiel text box. Matinput is responsible for to convert the textbox into material text-box with [(ngModel)] is used to bind the title.
  • Then we create the material slider, Icon, Button etc..
  • We create a dummy drop down to access the value from app.component.ts. In the mat-option we iterate the result and bind the data into dropdown.

app.component.ts

  • Here we declare title value that should append on the text box.
  • Then we added a Interface of Food that hold the fruits information.
  • Finally, we declare a foods list that contain food array.
  • Consuming the foods list the drop-down can bind.

That’s it run the application and see the output like below;

Summary

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

That’s a wrap for this article. I hope that it cleared about How to use angular material 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

Angular 10 with ASP.NET Web API-CRUD Operations
Angular-10-with-ASP.NET-Web-API-CRUD-Operations

Angular CRUD operation using ASP .NET Web API with Entity Framework Code first approach in SQL Server. Beginners guide to 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

Pin It on Pinterest