how to create login page in angular 9 with Example?

In this Angular 9 article, we’ll study to create attractive login and registration UI template with Angular Material 8. We’ll need the help of Material design components and Angular 8 flex design CDK to build the login and registration template. We’ll build an easy Angular 9 application from scratch and execute a login and registration UI module in it. You can review out below, how we’ll save a simple login and registration HTML form into a nice UI template.

Table of contents

1.  Prerequisite
2. Setup Angular project
3.  Create components using Angular CLI
4. Executing Angular Material 8
5.  Design Custom Angular Material Module
6. Initialize Routing
7. Build Angular Material Navbar
8. Design Registration UI with Material Design

1). Prerequisite

Firstly, we’ll install and configure an Angular project of new. I understand you’ve already installed Node.js and Angular CLI in your system.

I did following command to install Angular CLI:

npm install @angular/cli -g

2). Setup Angular Project

Enter command in terminal and connected enter to build a new 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

3). Create Components Using Angular CLI

Components are a reusable part of code in an Angular application. You can build components immediately applying a single command. Run the command to generate login and registration components in an Angular project.

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

             ng g component components/register --module app

4). Executing Angular Material 8

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

 ng add @angular/material

5). Design Custom Angular Material Module

It is always the most reliable method to build a separate module files to import Angular Material components. It provides your code to look extra appealing, Go to src > app folder and generate angular-material.module.ts file and add the following code:

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

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

6). Initialize Routing

In this step, we’ll initialize routing in our material design authentication UI template. Routing enables users to go from one part to different components. To activate routing in Angular app, we’ll explain 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 { }

7). Create Angular Material Navbar

Now, we are building a navbar applying the Angular Material UI library. First, include <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>