Simple Login UI with Angular and Material Design

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 app
ng 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.