Create Login UI Template with Angular 8/9 and Material Design

By Digamber Rawat Last updated on
In this Angular 8/9 tutorial, we’ll learn to build beautiful login and registration UI (user interface) template with Angular Material 8. We’ll take help of Material design components and Angular 8 flex layout CDK to create the login and registration template. We’ll create a simple Angular 8/9 application from scratch and implement a login and registration UI module in it. You can check out below, how we’ll convert a simple login and registration HTML form into a beautiful UI template.

Material Design Login and Register UI Template Demo

Click below to check out the live demo:

Demo

You can also get the Git repo by clicking on the button below:

GitHub Repo

Prerequisite

Firstly, we’ll install and configure an Angular project from scratch. I assume you’ve already installed Node.js and Angular CLI in your system. If not follow this tutorial: Install Node JS on Mac OS

I used below command to install Angular CLI:

npm install @angular/cli -g

Setup Angular Project

Enter command in terminal and hit enter to create a fresh Angular project.

ng new angular-material-login-template

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

Get into the project folder:

cd angular-material-login-template

Generate Components Using Angular CLI

Components are a reusable piece of code in an Angular application. You can create components quickly using a single command. Run the command to create login and registration components in an Angular project.

ng g component components/log-in --module app
ng g component components/register --module app

The --module app tag makes the app.module.ts is the main app module file.

Implementing Angular Material 8

Run the following command to install Angular Material 8 UI library in Angular project:

ng add @angular/material

Next, Angular CLI will ask you to select either of the material design pre-built 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 ]

Select Y to add browser animations and hammer.js service:

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

Create Custom Angular Material Module

It is always a best practice to create a separate module file to import Angular Material components. It makes your code to look more readable, Go to src > app folder and create angular-material.module.ts file and add the following code:

You can add or remove material design component from the Angular Material module as per your design requirements.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import {
   MatButtonModule,
   MatToolbarModule,
   MatIconModule,
   MatBadgeModule,
   MatSidenavModule,
   MatListModule,
   MatGridListModule,
   MatFormFieldModule,
   MatInputModule,
   MatSelectModule,
   MatRadioModule,
   MatDatepickerModule,
   MatNativeDateModule,
   MatChipsModule,
   MatTooltipModule,
   MatTableModule,
   MatPaginatorModule
} from '@angular/material';

@NgModule({
   imports: [
      CommonModule,
      MatButtonModule,
      MatToolbarModule,
      MatIconModule,
      MatSidenavModule,
      MatBadgeModule,
      MatListModule,
      MatGridListModule,
      MatFormFieldModule,
      MatInputModule,
      MatSelectModule,
      MatRadioModule,
      MatDatepickerModule,
      MatNativeDateModule,
      MatChipsModule,
      MatTooltipModule,
      MatTableModule,
      MatPaginatorModule
   ],
   exports: [
      MatButtonModule,
      MatToolbarModule,
      MatIconModule,
      MatSidenavModule,
      MatBadgeModule,
      MatListModule,
      MatGridListModule,
      MatInputModule,
      MatFormFieldModule,
      MatSelectModule,
      MatRadioModule,
      MatDatepickerModule,
      MatChipsModule,
      MatTooltipModule,
      MatTableModule,
      MatPaginatorModule
   ],
   providers: [
      MatDatepickerModule,
   ]
})

export class AngularMaterialModule { }

Next, import it to app.module.ts:

/* Angular material */
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularMaterialModule } from './angular-material.module';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

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

export class AppModule { }

Initialize Routing

In this step, we’ll initialize routing in our material design authentication UI template. Routing allows users to go from one component to another component. To activate routing in Angular app, we’ll define the routing configuration in app-routing.module.ts.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { LogInComponent } from './components/log-in/log-in.component';
import { RegisterComponent } from './components/register/register.component';

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

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

export class AppRoutingModule { }

It already added to app module, in next step we’ll create Angular Material tool bar.

Create Angular Material Navbar

Now, we are creating navbar using Angular Material UI library. First inject <router-outlet></router-outlet> directive in app.component.ts. It displays the routed component on the front-end:

<!-- Toolbar -->
<mat-toolbar color="primary" class="app-header">
  <div><a href="https://www.positronx.io" target="_blank" class="positronx">PositronX.io</a></div>
  <span class="nav-tool-items">
    <a mat-button routerLink="login" routerLinkActive="active">Log in</a>
    <a mat-button mat-raised-button routerLink="register" routerLinkActive="active">Register</a>
  </span>
</mat-toolbar>

<router-outlet></router-outlet>

Create Login UI Template with Angular 8/9 Material Design

To create beautiful Login and Registration UI templates, we’ll be taking benefit of Angular material UI components, Angular 8/9 flex layout CDK, Reactive Forms and FormsModule.

Introduction Angular Flex Layout

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.
Reference: Angular Flex Layout

Run command to install Angular 8/9 Flex Layout:

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

Then, import the flex layout module in app module.

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

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

Enable Angular Forms

Go to app.module.ts and add the following code.

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

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

Now, create login form using Angular material HTML directives. Go to src/app/components/log-in.component.html and add the following code:

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

  <mat-card class="box">
    <mat-card-header>
      <mat-card-title>Log 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">Log in</button>
    </form>
  </mat-card>

</div>

Style UI Template

Add the following code to style the login UI page:

html,body{height:100%;margin:0;padding:0;}
body{background-image:url(https://lh4.googleusercontent.com/-XplyTa1Za-I/VMSgIyAYkHI/AAAAAAAADxM/oL-rD6VP4ts/w1184-h666/Android-Lollipop-wallpapers-Google-Now-Wallpaper-2.png);background-position:center;background-size:cover;background-repeat:no-repeat;min-height:100vh;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);}
.login-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;}
.login-wrapper .example-form{min-width:100%;max-width:300px;width:100%;}
.login-wrapper .example-full-width,.login-wrapper .btn-block{width:100%;}
.login-wrapper mat-card-header{text-align:center;width:100%;display:block;font-weight:700;}
.login-wrapper mat-card-header mat-card-title{font-size:30px;margin:0;}
.login-wrapper .mat-card{padding:40px 70px 50px;}
.login-wrapper .mat-stroked-button{border:1px solid currentColor;line-height:54px;background:#FFF7FA;}
.login-wrapper .mat-form-field-appearance-legacy .mat-form-field-infix{padding:0.8375em 0;}

Create Registration UI with Material Design

We’ll create registration UI template, go to src/app/components/register-in.component.html and add the following HTML Angular form code:

<div class="login-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 a role...</mat-label>
          <mat-select [(value)]="selected">
            <mat-option [value]="roles" *ngFor="let roles of Roles">{{roles}}
            </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>

Then, go to app > register.component.ts, add the following code:

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

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

export class RegisterComponent implements OnInit {

  Roles: any = ['Admin', 'Author', 'Reader'];

  constructor() { }

  ngOnInit() {
  }

}

Final App Module

You can compare your app.module.ts with following code:

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

/* Routing */
import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';

/* Angular Material */
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularMaterialModule } from './angular-material.module';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

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

/* Angular Flex Layout */
import { FlexLayoutModule } from "@angular/flex-layout";

/* Components */
import { LogInComponent } from './components/log-in/log-in.component';
import { RegisterComponent } from './components/register/register.component';


@NgModule({
  declarations: [
    AppComponent,
    LogInComponent,
    RegisterComponent,
    RegisterComponent,
    LogInComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    AngularMaterialModule,
    ReactiveFormsModule,
    FormsModule,
    FlexLayoutModule
  ],
  providers: [],
  bootstrap: [AppComponent],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})

export class AppModule { }

Conclusion

In this Angular 8/9 and Angular Material tutorial, we have created a primary login and registration UI template. We used material design UI components to build beautiful Angular 8 login UI template. As far as the Material design framework is concerned, it offers better UI/UX experience to users and faster development options to developers. To know more about Angular Material design, you can click here.

Digamber Rawat
Digamber Rawat

Full stack developer with a passion for UI/UX design. I create beautiful and useful digital products to solve people’s problem and make their life easy.