Utilizing the exquisite benefits of Angular Material Design in building a web page will be the best thing you should try out to make a lucrative web page or application. If you’re new to this term then this could be the better guide for you to understand & build a complete web page using Angular Material Design.

Is Angular Material Design? 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. Features Of Angular Material Design Supports in-built responsive design.

Provides new common user interface controls such as buttons, checkboxes, and text fields.

Provides enhanced features like cards, toolbar, speed dial, side nav, swipe Before building a login page, follow the below steps to set up the Angular application, Setup & install an angular application

Integrating angular material design

Integrating angular flex layout Setup & Install Angular Application In case if you have already installed “@angular/cli” package then you can directly use the following comment to create a new angular application. ng new my-login-app 1 ng new my - login - app In case, if you haven’t installed “@angular/cli” then you can use the following code to install Angular CLI npm install -g @angular/cli 1 npm install - g @ angular / cli After installation, you can start creating your new angular application & give the name you wish. So in our example, i have named “my-login-app”. ng new my-login-app 1 ng new my - login - app

During your app creation, it will ask you for the following details,

Would you like to add Angular routing?

If you want router in your application then Press “Y” and enter.

Which stylesheet format would you like to use?

To select the stylesheet format use arrow keys like less, CSS, sass and press enter.

Next, navigate to the create app folder using the below command,

cd my-login-app 1 cd my - login - app

Now run the application using the following command,

ng serve 1 ng serve

After running the above command, you will get the live development URL of the application by default http://localhost:4200

Integrate Angular Material Design

Now your angular application will be ready, next, we will start by integrating the angular material using the following steps.

Install the Angular Material npm package using the following command, npm install --save @angular/material @angular/cdk @angular/animations 1 npm install -- save @ angular / material @ angular / cdk @ angular / animations

Once the package got installed, import BrowserAnimationsModule into your application to enable animations support.

Open the app.module.ts module file and import the following code import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; @NgModule({ ... imports: [BrowserAnimationsModule], ... }) export class AppModule { } 1 2 3 4 5 6 7 import { BrowserAnimationsModule } from '@angular/platform-browser/animations' ; @ NgModule ( { . . . imports : [ BrowserAnimationsModule ] , . . . } ) export class AppModule { }

Now we require a theme to apply all the core and theme styles to the application,

So open styles.css file and add the below code to apply all the required theme style. @import "~@angular/material/prebuilt-themes/indigo-pink.css"; 1 @ import "~@angular/material/prebuilt-themes/indigo-pink.css" ;

Once you’re done with adding the above style, you will get an Angular material theme.

Some of the angular material components rely on HammerJS link such as mat-slide-toggle , mat-slider , matTooltip . So In order to get the full feature-set of these components, you must install hammerJS.

you can use the below command to install hammerJS, npm install --save hammerjs 1 npm install -- save hammerjs

After installing, you need to import hammerJS on your app’s entry point.

Navigate to src/main.ts file in your application folder and use the below code to import hammerJS, import 'hammerjs'; 1 import 'hammerjs' ;

Great guys! now you can see that your application will be successfully integrated with Angular Material.

For a quick Angular Material reference, you can see here.

Best To Read: How to make Angular Application SEO Friendly Using Pre Render

Integrating Angular Flex layout

Angular Flex-Layout provides a flexible API layout using Flexbox CSS + mediaQuery. By integrating this, we can get the complete grid & element alignment support from Angular Flex-Layout.

So you can use the following npm command to install angular flex layout npm install -save @angular/flex-layout 1 npm install - save @ angular / flex - layout

Next import the FlexLayoutModule to the app module file.

import {BrowserAnimationsModule} from '@angular/platform-browser/animations'; import { FlexLayoutModule } from ‘@angular/flex-layout’; @NgModule({ ... imports: [ BrowserAnimationsModule, FlexLayoutModule ], ... }) export class AppModule { } 1 2 3 4 5 6 7 8 9 10 11 12 import { BrowserAnimationsModule } from '@angular/platform-browser/animations' ; import { FlexLayoutModule } from ‘ @ angular / flex - layout ’ ; @ NgModule ( { . . . imports : [ BrowserAnimationsModule , FlexLayoutModule ] , . . . } ) export class AppModule { }

Finally, Angular application with the Angular material setup is done and now we’re ready to build the login page. Related: Angular 4 Template Driven Forms : Building and Validating Forms