Angular Material From Beginning - Part One

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.