Simple Login UI with Angular and Material Design

shrimali senevirathna
6 min readJan 3, 2021

Hi my friends. This article is going to be an introduction to the usages of angular material. What is this angular material?. It is a UI component library for Angular JS developers. Angular is a JavaScript framework. If you want to know more about frameworks please read my article on Frameworks from Here. Continuing the post , we are going to build a very simple Login User interface.

Prerequisites

  • Node JS must be installed on your PC. If not Open your browser and navigate to: https://nodejs.org/en/ than Download the current version of Node JS.
  • Choose your favorite IDE
  • Check whether you have downloaded the Angular CLI from the command below.(The specific command Line interface for Angular)
ng --version

This command returns the details of version of Angular CLI if it is installed.

If it is not installed install the Angular CLI from the below command

npm install @angular/cli -g

(for more info: npm is the node package manager for the Node JavaScript platform)

Okay , now we will make our simple app.

We have to setup our project. To setup our project , run this command.

ng new [*project Name]

(* Enter your project name here without braces)

While downloading the packages , it will prompt some questions to answer and set the answer like I have mentioned below.

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

(*Angular Routing is a web app that loads a single HTML page and dynamically updates that page as the user interacts with the web app. When a user requests a specific URL, the routing engine captures that URL and renders the view based on the defined routing rules.)

Next , go to the project folder.

cd [project name]

Then we have to generate *components using the Angular CLI.

(*Angular component is a reusable piece of code and can be created using a single command)

Since we are creating Login and a Registration we have to consider them as two components. So create our two components, run the below commands.

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

Now it is the best part coming. Next we are going to install the material UI and implement the Angular Material UI.

ng add @angular/material

Next it will point you to select either of the material design pre-built theme.. You can select either one , but I have used the Indigo/Pink Theme.

Then select Yes to the for including Angular Material Typography and Animations packages.

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

Then create a custom angular material module file.

Go to src/app folder and create a .ts file and place the below code.

Next we will import and register the AngularMaterialModule in app.module.ts

.......
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 { }.....
import { AngularMaterialModule } from './angular-material.module';
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@NgModule({
declarations: [...],
imports: [
BrowserAnimationsModule,
AngularMaterialModule,
],
,
schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule { }

Then we initialize routing in our design. This routes allows users to navigate from one component another. So include the below code statements in your app-routing.module.ts.

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

Then we will 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 ],
...
});

Next we have to enable Angular forms.For that enter the following code in the app.module.ts

import { FormsModule, ReactiveFormsModule } from '@angular/forms';
...
@NgModule({
...
imports: [ FormsModule, ReactiveFormsModule ],
...
});

Now we will create the login form in the log-in.component.html.

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

Then you can add your style sheet according to your preference. Here is the style.css file I used.

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

Then create the UI of the registration page in the register.component.html.

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

Then add the code in the 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() {
}
}

Okay.. now we are finished editing our codes. Let’s run our code.

ng serve — open

Okay finally you can see this UI. By default it will run on the localhost::4200 port.

Hope this helped you in some way to get some idea bout material UI design in Angular. To get the full code go directly to GitHub Repository : AngularMaterialLogin. Enjoy your coding.

--

--