Creating UIs with Angular Material Design Components

Category: angular, angular material, angular-hub, AngularJS, JavaScript, material design, UI Design

In this tutorial, I’ll introduce you to Material Design in Angular, then we’ll look at how to create a simple Angular application with a UI built from various Angular Material components.

The widespread adoption of component-based frameworks such as Angular, React and Vue.js has seen a growing number of pre-built UI component collections become available. Using such collections can help developers to quickly create professional-looking applications.

What’s Material Design?

Material Design (codenamed Quantum Paper) is a visual language that can be used to create digital experiences. It’s a set of principles and guidelines across platforms and devices for interactivity, motion and components that simplify the design workflow for teams designing their product.

The Material components allow you to create professional UIs with powerful modularity, theming and customization features.

Introduction to Angular Material

Angular Material is the implementation of Material Design principles and guidelines for Angular. It contains various UI components, such as:

form controls (input, select, checkbox, date picker and sliders etc.),
navigation patterns (menus, sidenav and toolbar)
layout components (grids, cards, tabs and lists )
buttons
indicators (progress bars and spinners)
popups and modals
data tables with headers and pagination etc.

Requirements

Before you can continue with this tutorial, you need to make sure you have a development machine with Node (6.9.0+) and NPM (3+) installed.

You also need to have the Angular CLI installed. If that’s not the case, simply run the following command in your terminal or command prompt:

npm install -g @angular/cli

Create the Project with the Angular CLI

Let’s now create the Angular project using the Angular CLI. Simply run the following command:

ng new angularmaterialdemo

You can then serve your application by running:

cd angularmaterialdemo
ng serve

The application will be running at http://localhost:4200.

Since we’re going to demonstrate different Angular Material components, we need to create a few Angular components and routing configurations for a simple demo application, so go ahead and use the CLI to generate the components:

ng g component login
ng g component CustomerList
ng g component CustomerCreate

Next, open src/app/app.module.ts and add the router configuration:

/*...*/

import { RouterModule, Routes } from  '@angular/router';

/*...*/

const  appRoutes:  Routes  = [
{ path:  'customer-list', component:  CustomerListComponent },
{ path:  'customer-create', component:  CustomerCreateComponent },
{
path:  'login',
component:  LoginComponent
},
{ path:  '',

redirectTo:  '/login',

pathMatch:  'full'

},
];

Getting Started with Angular Material

Now that we have a basic application, let’s get started by installing Angular Material and its different dependencies to enable the different features such as gestures and animations.

Installing Angular Material and Angular CDK

Let’s start by installing Angular Material and Angular CDK from npm.

Head back to your terminal and run the following command:

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

Adding HammerJS for Gestures Support

Components such as mat-slide-toggle, mat-slider and matTooltip require the HammerJS library for gestures support, so you need to install it for getting the full features of these components. Simply run the following command in your terminal:

npm install --save hammerjs

Next, open src/main.js (the entry point of your application) and import hammerjs

import 'hammerjs';

Adding a Theme

Angular Material has a bunch of pre-built themes. To use a theme, you simply need to import it in styles.css:

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

You can find more information about theming in this guide.

Adding Angular Material Icons

Angular Material comes with a mat-icon component for icons, so you need to load the icon font before you can use it.

Add the following tag to your index.html file:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Using Animations with Angular Material Components

The last thing is enabling animations. Some components rely on the Angular animations module for advanced transitions, so you need to install the @angular/animations module and include the BrowserAnimationsModule in your application module configuration.

First, head back to your terminal and run the following command:

npm install --save @angular/animations

Next, open src/app/app.module.ts and add the following code:

/* ... */
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';

@NgModule({
/*...*/
imports: [
BrowserModule,
BrowserAnimationsModule,
],
})
export  class  AppModule { }

Importing Angular Material Components

Before you can use any Angular Material component, you’ll have to import its module. Each component has its own module so you can include only the components you’re going to use.

Another approach is to create a separate module and import all the Angular Material components you need to use and then simply include this module in your application module.

So go ahead and create a src/app/material.module.ts file, and then add the following content:

import { NgModule } from  '@angular/core';
import {MatNativeDateModule,MatSnackBarModule,MatIconModule,MatDialogModule, MatButtonModule, MatTableModule, MatPaginatorModule , MatSortModule,MatTabsModule, MatCheckboxModule, MatToolbarModule, MatCard, MatCardModule, MatFormField, MatFormFieldModule, MatProgressSpinnerModule, MatInputModule } from  '@angular/material';
import {MatDatepickerModule} from  '@angular/material/datepicker';
import {MatRadioModule} from  '@angular/material/radio';
import {MatSelectModule} from  '@angular/material/select';
import {MatSliderModule} from  '@angular/material/slider';
import {MatDividerModule} from  '@angular/material/divider';

@NgModule({
imports: [MatTabsModule,MatDividerModule,MatSliderModule,MatSelectModule,MatRadioModule,MatNativeDateModule,MatDatepickerModule,MatSnackBarModule,MatIconModule,MatDialogModule,MatProgressSpinnerModule,MatButtonModule,MatSortModule,MatTableModule,MatTabsModule, MatCheckboxModule, MatToolbarModule, MatCardModule, MatFormFieldModule, MatProgressSpinnerModule, MatInputModule, MatPaginatorModule],
exports: [MatTabsModule,MatDividerModule,MatSliderModule,MatSelectModule,MatRadioModule,MatNativeDateModule,MatDatepickerModule,MatSnackBarModule,MatIconModule,MatDialogModule,MatProgressSpinnerModule,MatButtonModule,MatSortModule, MatCheckboxModule, MatToolbarModule, MatCardModule,MatTableModule,MatTabsModule, MatFormFieldModule, MatProgressSpinnerModule, MatInputModule, MatPaginatorModule],

})

export  class  MyMaterialModule { }

Next, include this module in src/app/app.module.ts:

import { MyMaterialModule } from  './material.module';

/*...*/

@NgModule({

/*...*/

imports: [

/*...*/
MyMaterialModule,
],
/*...*/
})

export  class  AppModule { }

That’s it: you can now use the imported Angular Material components in your Angular application.

Continue reading %Creating UIs with Angular Material Design Components%

You must be logged in to post a comment.

blog