Create Login UI Template with Angular 12 Material Design

This is a comprehensive Angular 12 and Angular Material design tutorial. This tutorial will create a user-centric login and sign up UI (user interface) templates from scratch.

To create beautiful user authentication components, we will rely on Angular 12 Flex layout CDK. The flex mechanism sustains the power and beauty intact altogether.

Create Login UI Template with Angular Material Design

Angular Material offers pre-defined UI components, these components are prosperous from the user experience’s perspective. And yes, it works flawlessly in every device too.

We will make an angular 12 login page design and also create angular material registration or sign up form template from scratch. You can use our free angular login page template as a scaffold for any of your projects.

Let’s get started, its a no brainer.

Install Angular Project

Install Angular CLI:

npm install @angular/cli -g

Run command to create a new Angular project.

ng new angular-material-auth-ui

# ? Would you like to add Angular routing? = Yes
# ? Which stylesheet format would you like to use? = CSS

Move to the project root:

cd angular-material-auth-ui

Generate Components Using Angular CLI

Now, we need login and registration components, So run the following command Angular CLI.

ng g component components/signin --module app
ng g component components/register --module app

Adding Angular Material 10

Now, install Angular Material 10 UI package in Angular application:

ng add @angular/material

Select the angular material design’s readymade theme:

? Choose a prebuilt theme name, or "custom" for a custom theme: Indigo/Pink

❯ Indigo/Pink        [ Preview: https://material.angular.io?theme=indigo-pink ] 
  Deep Purple/Amber  [ Preview: https://material.angular.io?theme=deeppurple-amber ] 
  Pink/Blue Grey     [ Preview: https://material.angular.io?theme=pink-bluegrey ] 
  Purple/Green       [ Preview: https://material.angular.io?theme=purple-green ]

Type Yes in your terminal for installing Hammer JS and browser animations modules altogether.

Set up HammerJS for gesture recognition? (Y/n) = Y
? Set up browser animations for Angular Material? (Y/n) = Y

Create Angular Material Module

Its good to have a specific custom module file. Here you can import n number of Angular material components.

Head over to src/app directory, create angular-material.module.ts and place the below code:

import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { OverlayModule } from '@angular/cdk/overlay';
import { CdkTreeModule } from '@angular/cdk/tree';
import { PortalModule } from '@angular/cdk/portal';
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatButtonModule } from '@angular/material/button';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import { MatCardModule } from '@angular/material/card';
import { MatCheckboxModule } from '@angular/material/checkbox';
import { MatChipsModule } from '@angular/material/chips';
import { MatRippleModule } from '@angular/material/core';
import { MatDividerModule } from '@angular/material/divider';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatListModule } from '@angular/material/list';
import { MatMenuModule } from '@angular/material/menu';
import { MatPaginatorModule } from '@angular/material/paginator';
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import { MatSelectModule } from '@angular/material/select';
import { MatSidenavModule } from '@angular/material/sidenav';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatSortModule } from '@angular/material/sort';
import { MatTableModule } from '@angular/material/table';
import { MatTabsModule } from '@angular/material/tabs';
import { MatToolbarModule } from '@angular/material/toolbar';
import { MatTreeModule } from '@angular/material/tree';
import { MatBadgeModule } from '@angular/material/badge';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatRadioModule } from '@angular/material/radio';
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatTooltipModule } from '@angular/material/tooltip';


const materialModules = [
  CdkTreeModule,
  MatAutocompleteModule,
  MatButtonModule,
  MatCardModule,
  MatCheckboxModule,
  MatChipsModule,
  MatDividerModule,
  MatExpansionModule,
  MatIconModule,
  MatInputModule,
  MatListModule,
  MatMenuModule,
  MatProgressSpinnerModule,
  MatPaginatorModule,
  MatRippleModule,
  MatSelectModule,
  MatSidenavModule,
  MatSnackBarModule,
  MatSortModule,
  MatTableModule,
  MatTabsModule,
  MatToolbarModule,
  MatFormFieldModule,
  MatButtonToggleModule,
  MatTreeModule,
  OverlayModule,
  PortalModule,
  MatBadgeModule,
  MatGridListModule,
  MatRadioModule,
  MatDatepickerModule,
  MatTooltipModule
];

@NgModule({
  imports: [
    CommonModule,
    ...materialModules
  ],
  exports: [
    ...materialModules
  ],
})

export class AngularMaterialModule { }

This process makes your code centralized, more manageable and flexible. This way, it sustains the code quality intact throughout the application’s lifecycle.

Then, import the material module in app.module.ts file:

import { AngularMaterialModule } from './angular-material.module';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  declarations: [...],
  imports: [
    AngularMaterialModule,
  ],
  providers: [...],
  bootstrap: [...],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

export class AppModule { }

Create Routes

Our angular material authentication UI template tutorial is incomplete without adding the angular routes. Place the following code in app-routing.module.ts.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { SigninComponent } from './components/signin/signin.component';
import { RegisterComponent } from './components/register/register.component';

const routes: Routes = [
  { path: '', pathMatch: 'full', redirectTo: 'signin' },
  { path: 'signin', component: SigninComponent },
  { path: 'register', component: RegisterComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})

export class AppRoutingModule { }

Integrate Material Toolbar

With the help of Material toolbar components, you can align headers, titles, or actions within the containers. It becomes effortless to create structure toolbars with mat-toolbar and mat-toolbar-row in angular application.

Add below code in app.component.ts file.

<mat-toolbar color="primary" class="app-header">
  <div><a href="#" target="_blank" class="positronx">Demo</a></div>
  <span class="nav-tool-items">
    <a mat-button routerLink="signin" routerLinkActive="active">Signin</a>
    <a mat-button mat-raised-button routerLink="register" routerLinkActive="active">Signup</a>
  </span>
</mat-toolbar>

<router-outlet></router-outlet>

Angular Material Login Form Template

We need to have flex layout CDK installed in angular application, it helps in providing HTML UI layout for Angular applications; using Flexbox and a Responsive API.

Angular Flex Layout provides a sophisticated layout API using Flexbox CSS + mediaQuery. This module provides Angular developers with component layout features using a custom Layout API, mediaQuery observables, and injected DOM flexbox-2016 CSS stylings.

Install Angular Flex Layout package:

npm i -s @angular/flex-layout @angular/cdk

Next, you will need to register the flex layout in-app module file.

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

@NgModule({
    ...
    imports: [ FlexLayoutModule ],
    ...
});

Register Angular Forms Services

Add below code in app.module.ts file.

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...

@NgModule({
    ...
    imports: [ FormsModule, ReactiveFormsModule ],
    ...
});

To create a beautiful login form with Angular material HTML directives. Add following code in components/signin.component.html file, it helps in crafting a beautiful login form tempalte with Angular material package:

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

    <mat-card class="box">
      <mat-card-header>
        <mat-card-title>Sign In</mat-card-title>
      </mat-card-header>
  
      <form class="example-form">
        <mat-card-content>
          <mat-form-field class="example-full-width">
            <input matInput placeholder="Username">
          </mat-form-field>
  
          <mat-form-field class="example-full-width">
            <input matInput placeholder="Password">
          </mat-form-field>
        </mat-card-content>
        <button mat-stroked-button color="accent" class="btn-block">Sign-in</button>
      </form>
    </mat-card>
  
  </div>

Angular Material Registration Form Template

Now, we are almost there. We just need to create Registration Form Template using Angular Material package. So, add the following code in components/register.component.html file:

<div class="main-wrapper" fxLayout="row" fxLayoutAlign="center center">
    <mat-card class="box">
      <mat-card-header>
        <mat-card-title>Register</mat-card-title>
      </mat-card-header>
  
      <form class="example-form">
  
        <mat-card-content>
          <mat-form-field class="example-full-width">
            <input matInput placeholder="Username">
          </mat-form-field>
  
          <mat-form-field class="example-full-width">
            <input matInput placeholder="Email">
          </mat-form-field>
  
          <mat-form-field class="example-full-width">
            <input matInput placeholder="Password">
          </mat-form-field>
  
          <mat-form-field class="example-full-width">
            <mat-label>Choose designation</mat-label>
            <mat-select>
              <mat-option [value]="user" *ngFor="let user of User">{{user}}
              </mat-option>
            </mat-select>
          </mat-form-field>
  
        </mat-card-content>
  
        <button mat-stroked-button color="accent" class="btn-block">Register</button>
  
      </form>
    </mat-card>
  </div>

Add below code in app/register.component.ts file:

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-register',
  templateUrl: './register.component.html',
  styleUrls: ['./register.component.css']
})

export class RegisterComponent implements OnInit {

  User: any = ['Super Admin', 'Author', 'Reader'];

  constructor() { }

  ngOnInit() {
  }

}

Final App Module

Here is the final app module file in which we have imported and registered all the third-party packages and service. That, propels our ideal forward to create a no brainer UI auth components.

html,
body {
	height: 100%;
	margin: 0;
	padding: 0;
}

body {
	min-height: 100vh;
	background-color: #e5e5e5;
	font-family: 'Roboto', sans-serif;
}

.app-header {
	justify-content: space-between;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 2;
	box-shadow: 0 3px 5px -1px rgba(0, 0, 0, .2), 0 6px 10px 0 rgba(0, 0, 0, .14), 0 1px 18px 0 rgba(0, 0, 0, .12);
}

.main-wrapper {
	height: 100%;
}

.positronx {
	text-decoration: none;
	color: #ffffff;
}

.box {
	position: relative;
	top: 0;
	opacity: 1;
	float: left;
	padding: 60px 50px 40px 50px;
	width: 100%;
	background: #fff;
	border-radius: 10px;
	transform: scale(1);
	-webkit-transform: scale(1);
	-ms-transform: scale(1);
	z-index: 5;
	max-width: 330px;
}

.box.back {
	transform: scale(.95);
	-webkit-transform: scale(.95);
	-ms-transform: scale(.95);
	top: -20px;
	opacity: .8;
	z-index: -1;
}

.box:before {
	content: "";
	width: 100%;
	height: 30px;
	border-radius: 10px;
	position: absolute;
	top: -10px;
	background: rgba(255, 255, 255, .6);
	left: 0;
	transform: scale(.95);
	-webkit-transform: scale(.95);
	-ms-transform: scale(.95);
	z-index: -1;
}

.main-wrapper .example-form {
	min-width: 100%;
	max-width: 300px;
	width: 100%;
}

.main-wrapper .example-full-width,
.main-wrapper .btn-block {
	width: 100%;
}

.main-wrapper mat-card-header {
	text-align: center;
	width: 100%;
	display: block;
	font-weight: 700;
}

.main-wrapper mat-card-header mat-card-title {
	font-size: 30px;
	margin: 0;
}

.main-wrapper .mat-card {
	padding: 45px 70px 55px;
}

.main-wrapper .mat-stroked-button {
	border: 1px solid currentColor;
	line-height: 54px;
	background: #FFF7FA;
}

.main-wrapper .mat-form-field-appearance-legacy .mat-form-field-infix {
	padding: 0.8375em 0;
}

Summary

Eventually, we have completed the Angular 11 Material Design tutorial, In this tutorial we learned how to build Login and Registration UI templates from scratch in Angular.

Download the final project code from GitHub.