Home > tutorials > angular > Angular Material 2 tutorial with examples

Angular Material 2 tutorial with examples

Angular Material Design Tutorial

Angular Material 2 help us to build high-quality UI components with angular 2+ & typescript by following Material Design specifications.

Angular Material project is under active development. New features are being added regularly.

What is Angular Material?

In 2014 Google I/O conference Google announced their new design language called Material Design.

Most of the Android apps like Gmail, Youtube, Google Drive etc developed based on this Material Design spec.

Now with this Angular Material project, we can develop Material Design components for web and mobile browsers.

Angular Material Design Tutorial
Angular Material Design Tutorial

Getting Started:

We will create a new project in our local development environment called Angular-Material with Angular CLI command.

ng new Angular-Material

Now navigate to Angular-Material project folder.

cd Angular-Material

Make sure you install NodeJs in your systems. NodeJs is required to develop Angular Apps.

Install Angular Material and Angular CDK modules by using below node command.

npm install --save @angular/material @angular/cdk

After successful installation, you can see them in node_modules folder as shown below. And inside the material folder, we can see different UI components like buttons, bundles, autocomplete etc.

Angular Material And CDK modules
Angular Material And CDK modules

 

Angular Material Components
Angular Material Components

Few Material components depend upon Angular Animations modules. Install Angular Animation module with the below command.

npm install --save @angular/animations

Some Angular Material components like mat-slider, matTooltip,mat-slide-toggle rely on HammerJS for gestures.

npm install --save hammerjs

After successful installation, add the reference of HammerJS in angular-cli.json file

"scripts": [
"../node_modules/hammerjs/hammer.min.js"
]

Include a pre-built theme:

When we install Angular Material few pre-built themes are being installed automatically. Available pre-built themes are

  • indigo-pink
  • deeppurple-amber
  • purple-green
  • pink-bluegrey

Add the theme to global style.css

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

Add Material Icons:

If you want to use Material icons, load the official icon fonts to style.css file.

@import '~https://fonts.googleapis.com/icon?family=Material+Icons';

Then we can mat-icon component tag to display named icons

<mat-icon>favorite</mat-icon> //Displays love symbol

Now we will add Material Module in our project.

Adding Custom Angular Material Module:

Create a new material module by using following angular-cli command

ng generate module material

We will use following material UI components in our project

  • MatButtonModule
  • MatToolbarModule
  • MatIconModule
  • MatCardModule

 

Add them in material.module.ts file
import { NgModule } from '@angular/core';

import {

MatButtonModule,
MatToolbarModule,
MatIconModule,
MatCardModule

} from '@angular/material';

@NgModule({

imports: [

MatButtonModule,
MatToolbarModule,
MatIconModule,
MatCardModule

],

exports: [

MatButtonModule,
MatToolbarModule,
MatIconModule,
MatCardModule

]

})

export class MaterialModule {}

I have added them in exports to use them in other modules.

Now our Material Module is ready we will use it in our default app module. Add the MaterialModule in app.module.ts file

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { MaterialModule } from './material/material.module';
import { BrowserAnimationsModule } 
       from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

],

imports: [

BrowserModule,
FormsModule,
HttpModule,
MaterialModule,
BrowserAnimationsModule 

],

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Make sure you add it after BrowserModule because Material components depend upon BrowserModule. I have added BrowserAnimationModule to support animations.

Angular Material is ready. Now will use available Angular Material components in our template file

I have used <mat-toolbar><mat-card> and mat-button components in this project. Add the following code in app.component.html file.

<div id="material-example">
   
  <h1>ToolBar</h1>
   
  <mat-toolbar color="primary">
     
        <span>Material Design Rocks!</span>
   
  </mat-toolbar>
   
   <br/>
   
   <h1>Buttons</h1>

 <mat-card>

  <button mat-button>Basic</button>
  <button mat-raised-button>Raised</button>
  <button mat-icon-button><mat-icon>favorite</mat-icon></button>
  <button mat-fab>Fab</button>
  <button mat-mini-fab>mFab</button>

</mat-card>

</div>

I added different types of buttons like basic (mat-button) , Raised (mat-raised-button), icon button(mat-icon-button),fab button (mat-fab) and mini-fab button (mat-mini-fab).

Now open the command prompt and type “ng serve” command after successful compilation browse http://localhost:4200 to load the Angular Material Project.

Angular Material Example Demo
Angular Material Example Demo

 

Available UI components in Angular Material:

We can learn how to write Angular code by following best principles with the help of Angular Material UI components

Here is the list of UI components available in Angular Material project.

 

 autocomplete  datepicker  list  ripple  sort-header
 button,button-toggle  dialog  menu  select  tabs
 cards  expansion-panel  paginator  sidenav  textarea
 checkbox  grid-list  progress-bar  slide-toggle  toolbar
 chips  icon  progress-spinner  slider  tooltip
 data-table  input  radio  snackbar/toast  layout

 

Angular Material components Browser support:

Angular Material components will work in most of the modern web browsers like Chrome (Android as well), Mozilla, Safari (IOS as well), and IE11/Edge.

Download Source Code


Please comment below If you have any questions

Do not miss any post from us follow @ facebook or Twitter @angular_js or Google+


Get Latest news and Tutorials of AngularJS and Angular by email.

Arunkumar Gudelli
I am “One among a million” Software engineers of India. I write beautiful markup.I make the Web useful. You can connect me via @twitter or @facebook or Google+ or e-mail.
http://www.arungudelli.com

One thought on “Angular Material 2 tutorial with examples

Have something to say