Http API call is not returning data firs time only, Angular.

Question

Hello All

 

I created login form in angular on login button click it call web api login method issue is when i click first time it call api properly and status is ok but does not return any data but if i click login button again it work fine and return data. it does not work only on first click letter it start working for another clicks same button.

 

ts code:

import { Component, OnInit } from '@angular/core';
import { Router, ActivatedRoute } from '@angular/router';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { IUser } from './user';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import { LoginService } from './login.service'
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./main.css','./material-design-iconic-font.css','./material-design-iconic-font.min.css']
})
export class LoginComponent implements OnInit {
loginForm: FormGroup;
userid: string;
password: string;
loginmsg:string;
errorMessage: string;
public users: Object;
constructor(private route: ActivatedRoute,
private router: Router, private loginservice: LoginService, private formBuilder: FormBuilder)
{}
ngOnInit() {
this.loginForm = this.formBuilder.group({
userid: ['', Validators.required],
password: ['', Validators.required]
});
}
UserLogin() {
//this.loginservice.userLogin().subscribe(data => this.users = data,
this.loginservice.login().subscribe(data => this.users = data,
error => {
this.errorMessage = error;
window.alert(error.message);
} );
console.log('completed');
console.log(this.users);
}
}

Service Code:

login(): Observable<Object[]>
{
return this.http.get<Object[]>(this.url2);
}
Template code:
<div class="limiter">
<div class="container-login100" style="background-image: url('images/bg-01.jpg');">
<div class="wrap-login100">
<form class="login100-form validate-form" [formGroup]="loginForm" (ngSubmit)="UserLogin()">
<span class="login100-form-logo">
<i class="zmdi zmdi-landscape"></i>
</span>

<span class="login100-form-title p-b-34 p-t-27">
Log in
</span>

<div class="wrap-input100 validate-input" data-validate = "Enter username">
<input class="input100" type="text" formControlName="userid" placeholder="Username" [(ngModel)]="userid">
<span class="focus-input100" data-placeholder="?"></span>
<div *ngIf="submitted && f.userid.errors" class="invalid-feedback">
<div *ngIf="f.userid.errors.required">Username is required</div>
</div>
</div>

<div class="wrap-input100 validate-input" data-validate="Enter password">
<input class="input100" type="password" formControlName="password" placeholder="Password" [(ngModel)]="password">
<span class="focus-input100" data-placeholder="?"></span>
</div>

<div class="contact100-form-checkbox">
<input class="input-checkbox100" id="ckb1" type="checkbox" name="remember-me">
<label class="label-checkbox100" for="ckb1">
Remember me
</label>
</div>

<div class="container-login100-form-btn">
<button class="login100-form-btn">
<h4> Loginh4>
button>
</div>

<div class="text-center p-t-90">
{{errorMessage}}
</div>

<div class="text-center p-t-90">
<a class="txt1" href="#">
Forgot Password?
</a>
</div>
</form>
</div>
</div>
</div>

Result:

First click console log:

completed

undefined

after second click if click aganin then start showing data:

completed

Object (array of object)