Material Dashboard Using Angular 6

1_ByAhY7BtpARVPzkgM6yV1Q
The whole code is here: materialdashboardangular6

Introduction

Recently, Angular has released its latest version, Angular 6.0. In the latest version, they have focused more on toolchain, which provides us with a way to quick start our task easier, 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 a new Angular 6.0 application by executing npm command.

ng new materialdashboardangular6

After executing the above command, you can see that the Angular version is now updated to 6.0.0.

manav21
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.
manav22
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.


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.


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 the 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.
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 a starter dashboard component.

Syntax

ng generate @angular/material:material-dashboard --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.

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.

manav23
Now, let’s see the content of all the files generated one by one.
material-dashboard.component.html 

 

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 a tree structure.
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
import { Component } from '@angular/core'; 

@Component({
selector: 'material-dashboard',
templateUrl: './material-dashboard.component.html',
styleUrls: ['./material-dashboard.component.css']
})
export class MaterialDashboardComponent { 

// Number of cards to be generated with column and rows to be covered
cards = [
{ 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 }
];
}

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.

.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 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 :

<!– To Use Dashboard On Application Home page –>

<material-dashboard>

</material-dashboard>

Now, let’s run our Material Dashboard app by running [ng generate -o] command and you can see the output.

manav24

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!!!
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s