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

 

READ NOW >>  RSPEC Stub To Test Real Third Party API’s

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

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

 

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

 

READ NOW >>  The ‘Main Thing’ about Web Development Workflow

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 https://material.angular.io/guide/getting-started

 

 

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

@NgModule({
 ...
 imports: [

BrowserAnimationsModule,

FlexLayoutModule

],
 ...
})
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';

@NgModule({

declarations: [

  LoginComponent

]

})

 

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.

 

login-initial-page

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

 

import {

MatFormFieldModule,

MatInputModule,

MatCardModule,

MatButtonModule

} from '@angular/material';

 

@NgModule({

imports: [

  MatFormFieldModule,

  MatInputModule,

  MatCardModule,

  MatButtonModule

]

})

 

READ NOW >>  Media Query - CSS Selectors – Part 2

 

Angular Material Components Explained:

 

 

MatFormFieldModule

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

 

MatInputModule

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

 

MatButtonModule 

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

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

</mat-card-header>

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

  <mat-form-field>

    <input matInput placeholder="Email">

  </mat-form-field>

  <mat-form-field>

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

  </mat-form-field>

</mat-card-content>

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

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

</mat-card-actions>

</mat-card>

</div>

 

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

 

.login-main{

margin-top: 10%;

}

mat-card{

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