login page using angular material

Application Overview

1. Install Angular CLI

If you haven’t installed “@angular/cli” then you can use the following code to install Angular CLI

npm install -g @angular/cli

2. Creating new Angular project

If you have already installed “@angular/cli” package then you can directly create a new angular application/ application with any name eg “login-page”.

ng new login-page

During creating new project, it will ask you for the following details,
Would you like to add Angular routing?
If you want router in your application then Press “Y” and enter.
Which stylesheet format would you like to use?
To select the stylesheet format use arrow keys like less, CSS, sass and press enter.

? Would you like to add Angular routing? Yes
? Which stylesheet format would you like to use? CSS
CREATE login-page/angular.json (3063 bytes)
CREATE login-page/package.json (1074 bytes)
CREATE login-page/README.md (1055 bytes)
CREATE login-page/tsconfig.json (863 bytes)
CREATE login-page/.editorconfig (274 bytes)
CREATE login-page/.gitignore (548 bytes)
CREATE login-page/.browserslistrc (600 bytes)
CREATE login-page/karma.conf.js (1427 bytes)
CREATE login-page/tsconfig.app.json (287 bytes)
CREATE login-page/tsconfig.spec.json (333 bytes)
CREATE login-page/.vscode/extensions.json (130 bytes)
CREATE login-page/.vscode/launch.json (474 bytes)
CREATE login-page/.vscode/tasks.json (938 bytes)
CREATE login-page/src/favicon.ico (948 bytes)
CREATE login-page/src/index.html (295 bytes)
CREATE login-page/src/main.ts (372 bytes)
CREATE login-page/src/polyfills.ts (2338 bytes)
CREATE login-page/src/styles.css (80 bytes)
CREATE login-page/src/test.ts (745 bytes)
CREATE login-page/src/assets/.gitkeep (0 bytes)
CREATE login-page/src/environments/environment.prod.ts (51 bytes)
CREATE login-page/src/environments/environment.ts (658 bytes)
CREATE login-page/src/app/app-routing.module.ts (245 bytes)
CREATE login-page/src/app/app.module.ts (393 bytes)
CREATE login-page/src/app/app.component.html (23364 bytes)
CREATE login-page/src/app/app.component.spec.ts (1085 bytes)
CREATE login-page/src/app/app.component.ts (214 bytes)
CREATE login-page/src/app/app.component.css (0 bytes)
√ Packages installed successfully.

3. Run created angular project

Navigate to the created project directory ( folder ) using the below command.

cd login-page

Now run the angular application using the following command.

ng serve

Hit angular application URL e.g http://localhost:4200/

Application output

4. Integrate Angular Material Design

Now your angular application is ready. next, we will start by integrating the angular material using the following steps.

Install the Angular Material npm package using the following command

npm install –save @angular/material @angular/cdk @angular/animations

Once all packages installed successfully, import BrowserAnimationsModule into your application to enable animations support.

Open the app.module.ts module file and import the following code

import {BrowserAnimationsModule} from ‘@angular/platform-browser/animations’;

@NgModule({
      imports: [
              ...
              BrowserAnimationsModule
              ...
      ],
 })

Now we require a theme to apply all the core and theme styles to the application, So open styles.css file and add the below code to apply all the required theme style.

@import “~@angular/material/prebuilt-themes/indigo-pink.css”;

Once you done with adding the above line of code, you will get an Angular material theme.

Now let’s install hammerJS dependancy using below command

npm install –save hammerjs

After installing, you need to import hammerJS on your app’s entry point.

Navigate to src/main.ts file in your application folder and use the below code to import hammerJS,

import ‘hammerjs’;

5. Integrating Angular Flex layout

Use the following npm command to install angular flex layout

npm install -save @angular/flex-layout

Next import the FlexLayoutModule to the app.module.ts file.

import {BrowserAnimationsModule} from ‘@angular/platform-browser/animations’;

import { FlexLayoutModule } from ‘@angular/flex-layout’;

@NgModule({
      imports: [
        ...
        BrowserAnimationsModule,
        FlexLayoutModule
        ...
      ],
 })

Finally, Angular application with the Angular material setup is done and now we’re ready to build the login page.

6. Create an Angular Login Component

Make sure, you’re navigated project directory. if yes, then create a login component using the following command

ng generate component login

After creating a login component, it will be automatically included in the ap.module.ts file. In case if it’s not getting added then you can use the below code to add the component.

import { LoginComponent } from './login/login.component';
              @NgModule({
                  declarations: [
                        ....
                        LoginComponent
                  ]
              })

Now, enable the routing for login page. Use the below code in app-routing.module.ts

const routes: Routes = [

{path: ‘login’, component: LoginComponent},

{path: ”, redirectTo: ‘login’, pathMatch: ‘full’}

];

After enabling the routing in app-routing.module.ts file, you will get the initial login page as output.

Note: Please, make sure you have deleted all of source code from app.component.html file only leaving a line of code e.g

For designing the login page you must include the angular material ” Inbuilt module” in app.module.ts file as below.

import {MatFormFieldModule} from ‘@angular/material/form-field’;

import {MatInputModule} from ‘@angular/material/input’;

import {MatCardModule} from ‘@angular/material/card’;

import {MatButtonModule} from ‘@angular/material/button’;

@NgModule({
     imports: [
        ...
        MatFormFieldModule,
        MatInputModule,
        MatCardModule,
        MatButtonModule
     ]
 })

Now build the login page using mat-card, mat-form-field and button as following in login.component.html

<div fxLayout="row" fxLayoutAlign="center center" class="login-main">
    <mat-card >
    <mat-card-header>
      <mat-card-title>Login Page</mat-card-title>
    </mat-card-header>
    <mat-card-content fxLayout="column">
      <mat-form-field>
        <input matInput placeholder="Email">
      </mat-form-field>
      <mat-form-field>
        <input type="password" matInput placeholder="password">
      </mat-form-field>
    </mat-card-content>
    <mat-card-actions align="end">
      <button mat-raised-button color="primary">Login</button>
    </mat-card-actions>
    </mat-card>
</div>

Also, add the below lines of code in the login.component.css file to make sure the alignment of your login page.

.login-main{
    margin-top: 10%;
    }
    mat-card{
    min-width: 40%;
}

If your angular server is not up and run then run angular server using ng serve command and you will see the below output.

7. Displaying snack-bar notifications while login

Import below line of code in app.module.ts file

import {MatSnackBarModule} from ‘@angular/material/snack-bar’;

@NgModule({
     imports: [
        ...
        MatSnackBarModule
     ]
 })

Note: Also import below line of code in app.module.ts file, before binding values.

import { FormsModule } from ‘@angular/forms’;

@NgModule({
     imports: [
        ...
         FormsModule
     ]
 })

Let’s bind email, password values from login.component.html to login.component.ts also create a function on button click.

just add below lines of code in input fields using login.component.html file

       <mat-form-field>
        <input matInput placeholder="Email" [(ngModel)]="email">
      </mat-form-field>
      <mat-form-field>
        <input type="password" matInput placeholder="password" [(ngModel)]="password">
      </mat-form-field> 
       <button mat-raised-button color="primary" (click)="login()">Login</button>

also add below lines of code in login.component.ts file

constructor( private snackBar: MatSnackBar ) { }

  ngOnInit(): void {
  }

  public email?: string;
  public password?: string;


  login(){
      if(this.email == 'zameer.ali@gmail.com' && this.password == 'zameer'){
        this.snackBar.open('Login successfully !', '', {
          duration: 2000
        });
        // this.appComponent.checkLoginCondition(false);
      }else{
        this.snackBar.open('Invalid email or password !', '', {
          duration: 2000
        });
       }
  }

Finally, we’re done with designing a login page using angular material design.

Result:

Thanks

TEST