Angular Material From Beginning - Part One

In this article, we will learn the basics of Angular Material and how to add Material to an Angular project.

Introduction

 
Angular Material is a group of reusable and high-quality UI components built using Angular and TypeScript. By using Angular Material, we can make a web application more attractive and responsive. Angular Material was created by Google with a goal that is to develop a design that allows for a unified user experience across all platforms including mobile and desktop. In this article we will discuss the steps which are needed to set up an Angular project including Angular Material Library.
 
Prerequisites
  • We should have a basic knowledge of Angular
  • Visual Studio Code should be installed
  • Node and NPM installed
  • Angular CLI
Note
Make sure that you have Node.js installed. If not, then install the latest version of Node.js by Downloading Node.js from Node.js website.
 
Angular Material
 
First of all, let's check Node, NPM versions in our system. To check the versions, open command prompt and type -
  • node -v
  • npm -v
After this, let's install Angular CLI. To install Angular CLI, use the following command.

npm install -g @angular/cli

Step 1

Create a new Angular project. Open cmd or Node.js command prompt and use the following command to create a new Angular project.
 
ng new AngularMatDemo
 
Angular Material

Step 2 

Install Angular Material - Install angular material, Angular cdk and Angular animations by using the following commands.
  1. npm install @angular/material   
  2. npm install @angular/cdk  
  3. npm install @angular/animations  

Step 3

Install Hammer.js - Some Angular Material components need support for gestures which is implemented by using the HammerJS. Install Hammer.js by using the following command,
  1. npm install hammerjs  

Step 3

Install Hammer.js - Some Angular Material components need support for gestures which is implemented by using the HammerJS.
 
Step 4
 
Include a theme - Theme is required to apply all of the styles. Angular provides some inbuilt themes. Add the following line in styles.css to apply theme sp;Hammer.js by using following command
  1. @import "~@angular/material/prebuilt-themes/indigo-pink.css";  

Step 5

Add Material Icons - To add icons we need to add material icons library. Add the following line in index.html
  1. <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">  
Step 6
 
Configure Packages - After all the packages are installed configure these in the app.module.ts file,
  1. import { BrowserModule } from '@angular/platform-browser';    
  2. import { NgModule } from '@angular/core';    
  3. import { AppRoutingModule } from './app-routing.module';    
  4. import { AppComponent } from './app.component';    
  5. import { DemoModalsComponent } from './demo-modals/demo-modals.component';    
  6. import { BrowserAnimationsModule } from "@angular/platform-browser/animations";    
  7. import 'hammerjs';    
  8. import {MatAutocompleteModule,MatBadgeModule,MatBottomSheetModule,MatButtonModule,MatButtonToggleModule,    
  9.   MatCardModule,MatCheckboxModule,MatChipsModule,MatDatepickerModule,MatDialogModule, MatDividerModule,    
  10.   MatExpansionModule,MatGridListModule,MatIconModule,MatInputModule,MatListModule,MatMenuModule,    
  11.   MatNativeDateModule,MatPaginatorModule,MatProgressBarModule,MatProgressSpinnerModule,MatRadioModule,    
  12.   MatRippleModule,MatSelectModule,MatSidenavModule,MatSliderModule, MatSlideToggleModule,MatSnackBarModule,    
  13.   MatSortModule,MatStepperModule,MatTableModule,MatTabsModule,MatToolbarModule,MatTooltipModule,MatTreeModule,    
  14. } from '@angular/material';    
  15. import 'hammerjs';    
  16. @NgModule({    
  17.   declarations: [    
  18.     AppComponent,    
  19.     DemoModalsComponent    
  20.   ],    
  21.   imports: [    
  22.     BrowserModule,    
  23.     AppRoutingModule,BrowserAnimationsModule,MatAutocompleteModule,MatBadgeModule,MatBottomSheetModule,MatButtonModule,MatButtonToggleModule,    
  24.     MatCardModule,MatCheckboxModule,MatChipsModule,MatDatepickerModule,MatDialogModule, MatDividerModule,    
  25.     MatExpansionModule,MatGridListModule,MatIconModule,MatInputModule,MatListModule,MatMenuModule,    
  26.     MatNativeDateModule,MatPaginatorModule,MatProgressBarModule,MatProgressSpinnerModule,MatRadioModule,    
  27.     MatRippleModule,MatSelectModule,MatSidenavModule,MatSliderModule, MatSlideToggleModule,MatSnackBarModule,    
  28.     MatSortModule,MatStepperModule,MatTableModule,MatTabsModule,MatToolbarModule,MatTooltipModule,MatTreeModule    
  29.   ],    
  30.   entryComponents: [    
  31.     DemoModalsComponent    
  32. ],    
  33.   providers: [],    
  34.   bootstrap: [AppComponent]    
  35. })    
  36. export class AppModule { }    

Step 7

Create a component by using the following command,
 
ng g c DemoModals
 
In this component, we create a design using MatCard. MatCard is a container component that adds the styles of a Material design card. It has the following sections,
  • mat-card-title
  • mat-card-subtitle
  • mat-card-content
  • mat-card-actions
  • mat-card-footer
Now, open demo-modals.component.html and add the following lines,
  1. <mat-card>    
  2.     <mat-card-title class="header">Welcome to Angular Material Demo Application</mat-card-title>    
  3. </mat-card>    
  4. <mat-card>    
  5.     <mat-card-title class="header">Card Title</mat-card-title>    
  6.     <mat-card-subtitle class="header">Card Sub Title</mat-card-subtitle>    
  7.     <mat-card-content>Card Body</mat-card-content>    
  8.     <mat-card-actions> <button mat-raised-button color="primary">Primary</button>    
  9.         <button mat-raised-button color="accent">Accent</button>    
  10.     </mat-card-actions>    
  11.     <mat-card-footer>    
  12.         Card Footer    
  13.     </mat-card-footer>    
  14. </mat-card>     
In this component, we have added a card and two buttons.
 
Step 8
 
Now, open app.component.html and add the following line. 
  1. <app-demo-modals></app-demo-modals>  
Step 9
 
Open styles.css and add the following line. 
  1. .header  
  2. {  
  3.     text-align: center  
  4. }  
Step 10
 
Now, run the project and check the result.
 
Angular Material
 

Summary

 
In this article, we learned about Angular Material and the set up process of Angular Material library in an Angular project.