Create Login & Signup UI Templates in Angular Material 16

In this tutorial, we’ll learn to build beautiful login and registration UI (user interface) template with Angular Material.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 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

Get into the project folder:

cd angular-material-login-template

Remove Angular TypeScript Errors

To get rid from the errors:

Property ‘xxxName’ comes from an index signature, so it must be accessed with [‘xxxName’]

This setting makes sure profound consistency between accessing a field via the “dot” (obj.key) syntax, and “indexed” (obj["key"]) and the way which the property is declared in the type.

Without this flag, TypeScript will allow you to use the dot syntax to access fields which are not defined:

Make sure to set following properties to false in tsconfig.json file:

"compilerOptions": {
 ...
 ...
   "strict": false,
   "noPropertyAccessFromIndexSignature": false,
 ...
 ...
},
  "angularCompilerOptions": {
    "strictTemplates": false
  }

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

Implementing Angular Material

Run the following command to install Angular Material 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 { }

Next, import and register AngularMaterialModule, and CUSTOM_ELEMENTS_SCHEMA modules in app.module.ts:

/* Angular material */
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 { }

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 Angular Material Login UI Template

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.ts file.

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 { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { LogInComponent } from './components/log-in/log-in.component';
import { RegisterComponent } from './components/register/register.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { AngularMaterialModule } from './angular-material.module';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';

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

export class AppModule {}

Test Angular Material Login and Register UI Templates

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

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