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

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
{
return this.http.get(this.url2);
}
Template code:
class="limiter">
class="container-login100" style="background-image: url('images/bg-01.jpg');">
class="wrap-login100">
class="login100-form validate-form" [formGroup]="loginForm" (ngSubmit)="UserLogin()">
class="login100-form-logo">
class="zmdi zmdi-landscape">
class="login100-form-title p-b-34 p-t-27">
Log in
class="wrap-input100 validate-input" data-validate = "Enter username">
class="input100" type="text" formControlName="userid" placeholder="Username" [(ngModel)]="userid">
class="focus-input100" data-placeholder="?">
"submitted && f.userid.errors" class="invalid-feedback">
"f.userid.errors.required">Username is required

2 Replies

Know the answer? Post it — somebody with the same question will find it here.

Sivakumar Koneti7y ago
Give web api base url in service.ts file and call the service into component.ts file perfectly with subscribe method

Read this link step by step once you can get an idea

https://www.devglan.com/angular/angular-6-example
Piyush Pansuriya7y ago
Hi, put your console log into data, as below:
UserLogin() {
this.loginservice.login().subscribe(
    data => (this.users = data,console.log('completed'), console.log(this.users)),
    error => ( this.errorMessage = error, window.alert(error.message))
    );
}

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

Loginh4>