Post
Ask Question

Material Dashboard Using Angular 6

Introduction
 
Recently, Angular has released its latest version, Angular 6.0. In the latest version, they  havefocused more on toolchain, which provides us with a way to quick start our task easily, as well as some synchronized versions, such as Angular/core, Angular/compiler etc.
 
With the release of Angular 6.0, one of the features which I like the most is Material Dashboard, which is kind of a starter component with a list of dynamic card components.
 
You can find the official blog post for the release of Angular 6.0 here. 
 
In this article, we are going to learn how to make use of Material Dashboard starter component into our application to get a Dashboard structure with the following few steps. 
 
Material Dashboard Using Angular 6.0
 
Material Dashboard is completely inspired by Google's Angular Material Design Component. In this dashboard, there are a number of Material Components used, which are listed below.
  • mat-grid-tile 
  • mat-grid-list
  • mat-card
  • mat-menu
  • mat-icon 
And also there are a few other components like mat-title, mat-header, mat-content etc.
 
Let's start by implementing Dashboard using Angular 6.0. If you are new to Angular, do not worry, just follow a few steps and you will be able to create an application in Angular. I hope you have already installed a stable version or the latest version of node.js as well as npm. 
 
Create new Angular 6.0 application by executing npm command.
  1. ng new materialdashboardangular6  
After executing the above command, you can see that the Angular version is now updated to 6.0.0.
 
 
You can see in the above image, those core dependencies like core, compiler, HTTP, form, and others are updated with the latest version, which is now 6.0.0.
 
Other developer dependencies are also updated in the latest version of Angular. 
 
 
For working with Material Dashboard, we need to install a few dependencies for Angular-material by using npm commands which are listed below. 
 
Old approach for using Angular Material

Base dependency is angular/material, just type the below npm command into the console.
  1. npm install @angular-material  
Next move is to install Angular/cdk, which provides tools for developers to create awesome components. We can install cdk by using npm command.
  1. npm install @angular/cdk  
Apart from these two dependencies, we should have Angular/animations installed, because some of the effects in the Angular Material component are dependant on animation. Angular 6.0 comes with Angular/animation so that we do not need to re-install.
 
New Updates In Angular 6.0 
 
In Angular 6.0, there is a tree of components which is used to create a group of components and by using these components, we can get Materialized Dashboard using Angular Material + Material CDK Components.
 
And one of the most important parts is Angular Material Starter Component. By installing Angular/material, we will be able to generate a starter component.
 
For that, we need to install Angular/material by executing the following command. 
  1. ng add @angular/material  
Generating Material Dashboard
 
Previously we have installed @angular/material, for generating Material Dashboard, we can use a single command to generate starter dashboard component.

Syntax 
  1. ng generate @angular/material:material-dashboard --name = <Give_Any_Name>  
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, as I've provided in the below command.
  1. ng generate @angular/material:material-dashboard --name material-dashboard  
And you can see in the console, there are a few files created inside the app directory with provided a component name. The file structure looks like the below screen.
 
 
Now, let's see the content of all the files generated one by one.
 
material-dashboard.component.html 
  1. <div class="grid-container">  
  2.   <h1 class="mat-h1">Dashboard</h1>  
  3.   <mat-grid-list cols="2" rowHeight="350px">  
  4.     <mat-grid-tile *ngFor="let card of cards" [colspan]="card.cols" [rowspan]="card.rows">  
  5.       <mat-card class="dashboard-card">  
  6.         <mat-card-header>  
  7.           <mat-card-title>  
  8.             {{card.title}}  
  9.             <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">  
  10.               <mat-icon>more_vert</mat-icon>  
  11.             </button>  
  12.             <mat-menu #menu="matMenu" xPosition="before">  
  13.               <button mat-menu-item>Expand</button>  
  14.               <button mat-menu-item>Remove</button>  
  15.             </mat-menu>  
  16.           </mat-card-title>  
  17.         </mat-card-header>  
  18.         <mat-card-content class="dashboard-card-content">  
  19.           <div>Card Content Here</div>  
  20.         </mat-card-content>  
  21.       </mat-card>  
  22.     </mat-grid-tile>  
  23.   </mat-grid-list>  
  24. </div>  
Basically, an HTML file contains the group of material components. All of the components are the same as older versions of the material component, and distributed in tree structure.
  1. <mat-grid-list> // Main grid container  
  2.   
  3.   // divides structure in small chunks  
  4.   <mat-grid-tile *ngFor="let card of cards" [colspan]="card.cols" [rowspan]="card.rows">  
  5.   
  6.     // Every chunks acts as card component  
  7.     <mat-card class="dashboard-card">  
  8.        
  9.       // Card Header  
  10.       <mat-card-header>  
  11.         <mat-card-title>  
  12.           
  13.           <mat-menu #menu="matMenu" xPosition="before">  
  14.               
  15.           </mat-menu>  
  16.           
  17.         </mat-card-title>  
  18.       </mat-card-header>  
  19.         
  20.       // Content of Card  
  21.       <mat-card-content class="dashboard-card-content">  
  22.         <div>Card Content Here</div>  
  23.       </mat-card-content>  
  24.   
  25.     </mat-card>  
  26.   
  27.   </mat-grid-tile>  
  28.   
  29. </mat-grid-list>  
The above snippet is a basic building block which was generated by the component generator, which repeats the number time-based on items of the array using *ng-if statement.

material-dashboard.component.ts 
  1. import { Component } from '@angular/core';  
  2.   
  3. @Component({  
  4.   selector: 'material-dashboard',  
  5.   templateUrl: './material-dashboard.component.html',  
  6.   styleUrls: ['./material-dashboard.component.css']  
  7. })  
  8. export class MaterialDashboardComponent {  
  9.   
  10.   // Number of cards to be generated with column and rows to be covered  
  11.   cards = [  
  12.     { title: 'Card 1', cols: 2, rows: 1 },  
  13.     { title: 'Card 2', cols: 1, rows: 1 },  
  14.     { title: 'Card 3', cols: 1, rows: 2 },  
  15.     { title: 'Card 4', cols: 1, rows: 1 }  
  16.   ];  
  17. }  
TypeScript file contains an array of cards to be generated while creating the dashboard. For that we can specify how many  rows and columns will be occupied to generate card component.

material-dashboard.component.css

Stylesheet file contains different classes to provide different positioning and direction throughout the page. 
  1. .grid-container {  
  2.   margin: 20px;  
  3. }  
  4.   
  5. .dashboard-card {  
  6.   position: absolute;  
  7.   top: 15px;  
  8.   left: 15px;  
  9.   right: 15px;  
  10.   bottom: 15px;  
  11. }  
  12.   
  13. .more-button {  
  14.   position: absolute;  
  15.   top: 5px;  
  16.   right: 10px;  
  17. }  
  18.   
  19. .dashboard-card-content {  
  20.   text-align: center;  
  21. }  
These files are automatically generated for creating Material Dashboard. Now, the last step is to execute our dashboard app.
 
For that, just go to app.component.html file. Remove all of the content and just add markup tag as in the following snippet : 
  1. <!-- To Use Dashboard On Application Home page -->  
  2.   
  3. <material-dashboard>  
  4.     
  5. </material-dashboard>  
Now, let's run our Material Dashboard app by running [ng generate -o] command and you can see the output.
 
Conclusion
 
In this article, we have covered a few things which are listed below. 
  • Overview of Material Dashboard and its component
  • Package.json file version updates 
  • New updates in Angular 6.0
  • Material Dashboard generating process
  • Introduction of all generated files using Material Generator
Thus, the generated dashboard is just a normal structure. We can enhance it by customizing as per our different requirements.
 
Follow my other articles on Angular Material.
I hope you have learned something from this article, Thanks for reading!!!


Similar Articles