How To Build Login Page Using Angular Material Design Clearly Explained


Utilizing the  exquisite benefits of Angular Material Design in building a web page will be 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.


What Is Angular Material Design?

Angular Material Design comprises range of reusable UI components that helps to build scalable, lucrative and functional web pages and applications which can easily adopt with modern web design.


It contains various UI components, such as:

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


Features Of Angular Material Design:


  • Supports in-built responsive designing.
  • Provides new common user interface controls such as buttons, check boxes, and text fields.
  • Provides enhanced features like cards, toolbar, speed dial, side nav, swipe


Before building a login page, follow the below steps to setup the Angular application,


  1. Setup & install angular application
  2. Integrating angular material design
  3. 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


By chance if you haven’t installed @angular/cli” then you can use the following code to install Angular CLI


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 like “my-login-app”.


ng new my-login-app


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


  1. Would you like to add Angular routing?

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


      2. Which stylesheet format would you like to use?

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


create app


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


cd my-login-app


Now run the application using following command,


ng serve


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



Angular initial page


Integrate Angular Material Design


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


Install the Angular Material npm package using following command,


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';

 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";


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


Some of the angular material component 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


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';


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


Next import the FlexLayoutModule to app module file.


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

import { FlexLayoutModule } from@angular/flex-layout’;

 imports: [



export class AppModule { }


Finally, Angular application with 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


Create Angular Login Form


First navigate to app folder and create a login component using following command, 


cd <project path>/src/app

ng generate component login


Or you can also use this,


ng g c login


Angular login form



After creating a login component, it will be automatically included in the app module file. In case if it’s not getting added then you can use the below code to add the component.


import { LoginComponent } from './login/login.component';


declarations: [





Next, enable the login path using router module and you use the below code in app-routing.module.ts


const routes: Routes = [


  path: '',

  component: LoginComponent




After enabling the router file, you will get the initial login page as follow.



Next, for designing the login page you must include the angular material ” Inbuilt module” in app module file as follows,


import {





} from '@angular/material';



imports: [









Angular Material Components Explained:




<mat-form-field> is a component used to  apply common Text field styles such as the underline, floating label



This is directive that allows native <input> and <textarea> elements to work with <mat-form-field>



This module used to apply the common button style.


Now build the login page using mat-card, mat-form-field  and button as following (login.component.html)


<div fxLayout="row" fxLayoutAlign="center center" class="login-main">

<mat-card >


  <mat-card-title>Login Page</mat-card-title>


<mat-card-content fxLayout="column">


    <input matInput placeholder="Email">



    <input type="password" matInput placeholder="password">



<mat-card-actions align="end">

  <button mat-raised-button color="primary">Login</button>





Also add the below style in login.component.css file to make sure the alignment of your login page.



margin-top: 10%;



min-width: 40%;



Finally we’re done with designing login page using angular material design.


angular login-page

Now start creating lucrative web pages using angular material design and let us know your thoughts in comment section. We had like to hear from you!


Contact form 7 Mailchimp extension by Renzo Johnson - Web Developer