Introduction: I am trying to build a login page in Angular2 using webapi. My end goal is to redirect the user to a new component on successful login.
Issue: My issue is that I am not getting correct result on my first web api hit. I check my web API using postman and it is working fine so the issue is somewhere in the angular code. I research to find out the issue and come uo on conclusion to delay my subscription but not able to delay in my scenario.
Please find the below code:
Login.component.ts:
import { Component , OnInit } from '@angular/core';
import { LoginService } from './Login.Service';
@Component(
{
selector: 'Login',
templateUrl: './Login.component.html',
}
)
export class LoginComponent implements OnInit {
userName: string ;
paswword: string;
result: string = 'False';
constructor(private loginService: LoginService) { }
ngOnInit() {
}
private myFunc(): void {
this.loginService.isLogin("myServiceURL", "userName", this.userName, "pwd", this.paswword)
.subscribe(response => this.result = response.toString());
if (this.result == "True") {
console.log(this.result);
console.log(1);
}
else {
console.log(this.result);
console.log(0);
}
}
}
Login.component.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<input type="text" class="form-control" [(ngModel)]="userName"/>
<input type="password" class="form-control" [(ngModel)]="paswword"/>
<button (click)="myFunc()"></button>
</body>
</html>
Login.service.ts:
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http'
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
@Injectable()
export class LoginService {
respose: string;
constructor(private _http: Http) {
}
isLogin(url: string, key1: string, value1: string, key2: string, value2: string): Observable<string> {
return this._http.get(url + "?" + key1 + "=" + value1 + "&" + key2 + "=" + value2)
.map((res: Response) => res.json());
}
}
app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms'
import { HttpModule } from '@angular/http'
import { LoginComponent } from './LoginComponent/Login.component'
import { AppComponent } from './app.component';
import { LoginService } from './LoginComponent/Login.Service'
@NgModule({
imports: [BrowserModule, FormsModule, HttpModule ],
declarations: [AppComponent, LoginComponent ],
bootstrap: [LoginComponent],
providers: [LoginService]
})
export class AppModule { }
LoginWebAPI
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Http;
namespace MOMWebAPI.Controllers
{
public class LoginController : ApiController
{
[HttpGet]
public string IsLogin(string userName, string pwd)
{
string isLogin = "False";
UserMaster objUserMaster = new UserMaster();
MOMEntities momEntity = new MOMEntities();
objUserMaster = momEntity.UserMasters.FirstOrDefault(x => x.UserName == userName && x.Password == pwd);
if (objUserMaster != null)
{
isLogin = "True";
}
return isLogin;
}
}
}
Result
Are you getting any pre-flight error in network monitor, i think you are facing "CORS" issue, if possible can you please share network monitor in developer-tool.