Post Operation With Angular Using Dummy API

How to complete the login operation in Angular

 

First, you have to create an application in angular using the " ng new demo" command.  After successfully creating the application you have to create a separate module for your application using the command "ng g module". 

• then create a component using the command " ng g component demo" 
• then create a wrapper class. 
• then create a service using the command " ng g service". 
• then create a brought file using the command "ng g component". 

Now go to the module.ts file and write the code

import {NgModule } from '@angular/core';
import { logincomponent } from './login.component';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule} from '@angular/forms';
import { userservice } from '../service/userservice';
import { HttpClientModule} from '@angular/common/http' ;
import{ RouterModule } from "@angular/router";
import { routes } from '../loginmodule/login.rout';
import { welcomeComponent } from '../welcome/welcome.Component';
import { homecomponent } from '../home/home.component';
import { ReactiveComponent } from '../reactive/reactive.component';
import { ReactiveFormsModule} from '@angular/forms'
@NgModule({
    declarations: [logincomponent, welcomeComponent, homecomponent, ReactiveComponent],
    imports: [BrowserModule, FormsModule, HttpClientModule, ReactiveFormsModule, RouterModule.forRoot(routes)],
    providers: [userservice],
    bootstrap: [homecomponent]
})
export class loginmodule {}

In this module, the user registered all the component services and modules. 

 

Now go to the services and write code 

import {Injectable} from '@angular/core';
import{HttpClient} from '@angular/common/http';
@Injectable()
export class userservice {
    constructor(private http: HttpClient) {}
    loginuser(obj) {
        return this.http.post("   API ", obj);
    }
}

In the service component, the user creates a login object and adds an API where the right API. then goes to the route's component.

 

In the route's component write the code

import{Routes } from "@angular/router";
import { logincomponent } from '../loging/login.component';
import { welcomeComponent } from '../welcome/welcome.Component';
import { ReactiveComponent } from '../reactive/reactive.component';
export const routes: Routes = [{
    path: '',
    component: logincomponent
}, {
    path: 'movies/:email ',
    component: ReactiveComponent
}, {
    path: 'loging',
    component: logincomponent
}, {
    path: 'reactive',
    component: ReactiveComponent
}, {
    path: '**',
    component: logincomponent
}]

In the routes file section user creates the path of the application where the user wants to render your application after logging in or which part it displays first.

 

Now go to the wrapper class and write the code. 

export class Usermodel{
    public email: string;
    public password: number;
}

In the wrapper class user take the username and password in a class that the class object creates in the login.ts component. 

 

Go to the HTML component and write the code 

 

login.html

<form (ngSubmit)="loginUser()">
    <input [(ngModel)]="objUser.email"  type="email"  name="email" placeholder="Your first name" required  ngModel>
       <br>
        <br>
         <input [(ngModel)]="objUser.password"  type="password" class="password"  name="password" placeholder="Your first password" required  ngModel>
       <br>
     <br>
    <input type="submit" name="submit" class="submit"  value="login" >
</form>

In the HTML component the user creates a form and a function in the form. which function is created in the service class. 

 

Go to the ts component and write the code 

import { Component } from '@angular/core';
import { Usermodel } from '../model/Usermodel';
import { userservice } from '../service/userservice';
import{Router } from '@angular/router';
@Component({
    selector: ' login',
    templateUrl: './login.component.html',
    styleUrls: ['./login.component.css']
})
export class logincomponent {
    title = "chaman";
    localsdata = "";
    sessionsdata = " ";
    objUser: Usermodel = new Usermodel();
    constructor(private userservice: userservice, private route: Router) {
        this.localsdata = localStorage.getItem('localskey');
        this.sessionsdata = sessionStorage.getItem('sessionkey');
    }
    loginUser(objUser) {
            this.userservice.loginuser(this.objUser).subscribe(x => {
                if (x != undefined && x != null && x != '') {
                    //this.route.navigate(['./reactive'],{ queryParams: {name:'Chaman Gautam'} });
                    //   this.route.navigate(['./welcome',{ name:'chaman'}]);
                    this.route.navigate(['./reactive']);
                } else {
                    alert('fail');
                }
            })

In this code user has created an object of wrapper class and registered a service and routes into the constructor. Then create an object and then create a query in this object, and then set the path using navigate. and add an alert box into the object that if you have entered the correct email or password then login successfully otherwise alert shows that your user id and password are incorrect.  

 

Now go to the .css class to make your form attractive. 

 

Now go to the .css file and write code.

 

login.css

.form-control{
    text-align: center;
    width: 200px;
    height: 40px;
    color: black;
    border-color: black;
    background-color: cornsilk;
    border-radius: 1px;
    border-style: 0.5px;
}
.btn-btn-primary{
    text-align: center;
    border-radius: 6px;
    background-color: #1976d2;
    width: 80px;
    height:30px;
    border-style: hidden;
    color: white;
}
input.ng-invalid.ng-touched{
    border-color: red;
}
.text{
    text-align: center;
    font-size: x-large;
}
.container{
    text-align: center;
}

Now create another component using the command " ng g component reactive", where the user renders after logging in successfully. 

 

Now go to the HTML page and write code.

 

reactive.html

<h1 class="text">Welcome to {{title}}</h1>
<div class="container">
    <div class="row">
        <div class="form-bg">
            <form [formGroup]='signupForm' (ngSubmit)='PostData(signupForm)'>
                <div class="form-group">
                    <input type="text" class="form-control" formControlName='fname' placeholder="Your first name" >
                    </div>
                    <br>
                        <div class="form-group" >
                            <input type="text" class="form-control" formControlName="lname" placeholder="enter lastname" >
                         </div>
                         <br>
                         <div class="form-group">
                             <input type="age" class="form-control" formControlName="age" placeholder="Enter Your age" >
                         </div>
                        <br>
                       <div class="form-group">
                           <input type="mobile" class="form-control" formControlName="mobile" placeholder="Enter your mobile">
                       </div>
                    <br>
                  <div class="form-group">
                      <input type="address" class="form-control" formControlName="address" placeholder="Enter your address">
                  </div>
                <br>
               <be>
              <div>
                <input type="submit" class="btn-primary" value="PostData" [disabled]='!signupForm.valid'>
             </div>
          </form>
       </div>
   </div>
</div>

Now go to the .css file to make more your page more attractive.

 

reactive.css

.form - control {
        text - align: center;
        width: 200 px;
        height: 40 px;
        color: black;
        border - color: black;
        background - color: cornsilk;
        border - radius: 1 px;
        border - style: 0.5 px;
    }.btn - primary {
        text - align: center;
        border - radius: 6 px;
        background - color: #1976d2;
    width: 80px;
    height:30px;
    border-style: hidden;
    color: white;
}
input.ng-invalid.ng-touched{
    border-color: red;
}
.text{
    text-align: center;
    font-size: x-large;
}
.container{
    text-align: center;
}

Now go to the reactive. component and write the code

 

reactive.ts

import {
    Component,
    OnInit
} from '@angular/core';
import {
    FormControl,
    FormGroup,
    FormBuilder,
    NgForm,
    Validator,
    Validators
} from '@angular/forms'
@Component({
    selector: 'app-reactive',
    templateUrl: './reactive.component.html',
    styleUrls: ['./reactive.component.css']
})
export class ReactiveComponent {
    title = 'reactive form ';
    signup form: FormGroup;
    FirstName: string = "";
    LastName: string = "";
    age: string = "";
    address: string = "";
    Mobile: String = "";
    constructor(private frmbuilder: FormBuilder) {
        this.signupForm = frmbuilder.group({
            /*fname:new FormControl(),
               lname:new FormControl(),
              email:new FormControl(),
              password:new FormControl()*/
            fname: ['', [Validators.required, Validators.minLength(1)]],
            lname: ['', [Validators.required, Validators.minLength(1)]],
            age: ['', [Validators.required, Validators.minLength(2)]],
            mobile: ['', [Validators.required, Validators.minLength(10)]],
            address: ['', [Validators.required, Validators.maxLength(100)]]
        });
    }
    PostData(signupForm: any) {
        this.FirstName = signupForm.controls.fname.value;
        this.LastName = signupForm.controls.lname.value;
        this.age = signupForm.controls.age.value;
        this.Mobile = signupForm.controls.mobile.value;
        this.address = signupForm.controls.address.value;
        console.log(this.FirstName);
        console.log(this.LastName);
        console.log(this.age);
        console.log(this.address);
        console.log(this.Mobile);
        console.log(signupForm.controls);
    }
}

Now go to the main.ts file and register your module 

 

main.ts

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
import { loginmodule } from './app/loging/login.module';
import { homemodule } from './app/home/home.module';
if (environment.production) {
  enableProdMode();
}
platformBrowserDynamic().bootstrapModule(loginmodule)
  .catch(err => console.error(err));

Now go to the index.html page for registering  your selected name which you display first

 

index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Login</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
  <home></home>
</body>
</html>

Now compile this project using the command " ng serve" when the project compiles successfully, then you have to go to the browser and hit in the browser " localhost:4200" after a few seconds you can see the output like this. 

 

OUTPUT

 

 

Now fill in the valid id and password.

 

After filling g the valid id and password

 

 

Now click on the login button. After clicking the login button the output will be shown like this.

 

 

Now you can see that we have successfully login with a valid username and password.

 

I hope you enjoy this article. To learn more about angular follow me on C#Corner Chaman Gautam; to learn about more technology follow C#Corner.