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

Last updated on by Digamber
In this Angular 8/9/10 tutorial, we’ll learn to build beautiful login and registration UI (user interface) template with Angular Material 8/9/10.

We will take help of Material design components and Angular flex layout CDK to create the login and registration template.

We’ll create a simple Angular 10 application from scratch and implement a login and registration UI module in it. Let’s see how we are going convert a simple login and registration HTML form into a beautiful UI template.

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

Angular component is a reusable piece of code and can be created 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 Yes for including Angular Material Typography and Animations packages.

# ? Set up global Angular Material typography styles? Yes
# ? Set up browser animations for Angular Material? Yes

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 more readable.

Go to src/app folder and create angular-material.module.ts file and place the following 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 { }
You can add or remove material design component from the Angular Material module as per your design requirements.

Next, import and register AngularMaterialModule, CUSTOM_ELEMENTS_SCHEMA, and BrowserAnimationsModule modules in 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.html. 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/10 Material Design

To create beautiful Login and Registration UI templates, we’ll be taking benefit of Angular material UI components, Angular 8/9/10 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 Flex Layout:

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

Then, import the flex layout module in main 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 in styles.css file to design the login UI page:

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: Roboto, "Helvetica Neue", sans-serif;
  min-height: 100vh;
  background: #e2e2e2;
}

.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

Create registration UI template, for that add the code in register.component.html file.

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

Add the 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 {

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

  constructor() { }

  ngOnInit() {
  }

}

Final App Module

You can compare your final app.module.ts with the 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 { }

Material Design Login and Register UI Template Demo

You can run the command ng serve --open to run the application.

In this Angular 10 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/9/10 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, check Angular Material official documentation to know more about it.

Download Code