Angular Material From Beginning

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.

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

Step 2

Install Angular Material - Install angular material, Angular cdk and Angular animations by using the following commands.

npm install @angular/material
npm install @angular/cdk
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,

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

@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

<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,

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { DemoModalsComponent } from './demo-modals/demo-modals.component';
import { BrowserAnimationsModule } from "@angular/platform-browser/animations";
import 'hammerjs';
import {MatAutocompleteModule,MatBadgeModule,MatBottomSheetModule,MatButtonModule,MatButtonToggleModule,
MatCardModule,MatCheckboxModule,MatChipsModule,MatDatepickerModule,MatDialogModule, MatDividerModule,
MatExpansionModule,MatGridListModule,MatIconModule,MatInputModule,MatListModule,MatMenuModule,
MatNativeDateModule,MatPaginatorModule,MatProgressBarModule,MatProgressSpinnerModule,MatRadioModule,
MatRippleModule,MatSelectModule,MatSidenavModule,MatSliderModule, MatSlideToggleModule,MatSnackBarModule,
MatSortModule,MatStepperModule,MatTableModule,MatTabsModule,MatToolbarModule,MatTooltipModule,MatTreeModule,
} from '@angular/material';
import 'hammerjs';
@NgModule({
declarations: [
AppComponent,
DemoModalsComponent
],
imports: [
BrowserModule,
AppRoutingModule,BrowserAnimationsModule,MatAutocompleteModule,MatBadgeModule,MatBottomSheetModule,MatButtonModule,MatButtonToggleModule,
MatCardModule,MatCheckboxModule,MatChipsModule,MatDatepickerModule,MatDialogModule, MatDividerModule,
MatExpansionModule,MatGridListModule,MatIconModule,MatInputModule,MatListModule,MatMenuModule,
MatNativeDateModule,MatPaginatorModule,MatProgressBarModule,MatProgressSpinnerModule,MatRadioModule,
MatRippleModule,MatSelectModule,MatSidenavModule,MatSliderModule, MatSlideToggleModule,MatSnackBarModule,
MatSortModule,MatStepperModule,MatTableModule,MatTabsModule,MatToolbarModule,MatTooltipModule,MatTreeModule
],
entryComponents: [
DemoModalsComponent
],
providers: [],
bootstrap: [AppComponent]
})
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,

<mat-card>
<mat-card-title class="header">Welcome to Angular Material Demo Application</mat-card-title>
</mat-card>
<mat-card>
<mat-card-title class="header">Card Title</mat-card-title>
<mat-card-subtitle class="header">Card Sub Title</mat-card-subtitle>
<mat-card-content>Card Body</mat-card-content>
<mat-card-actions> <button mat-raised-button color="primary">Primary</button>
<button mat-raised-button color="accent">Accent</button>
</mat-card-actions>
<mat-card-footer>
Card Footer
</mat-card-footer>
</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.

<app-demo-modals></app-demo-modals>

Step 9

Open styles.css and add the following line.

.header
{
text-align: center
}

Step 10

Now, run the project and check the result.

Summary

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