title: How to match and validate with the provided API in Ionic?
body: <p>I have created login function accordingly but the login function is not working. <strong>Whenever I enter the sample input (phoneNumber and password) it did not directing me to the HomePage.</strong> Details about API has been provided in the pictures below. Is there anything I am missing out? Please HELP me to solve this out.</p>
  
  <blockquote>
    <p>API details:
    <a href="https://i.stack.imgur.com/CxOgR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CxOgR.png" alt="enter image description here"></a></p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/gSZyR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gSZyR.png" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/RurEx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RurEx.png" alt="enter image description here"></a></p>
  
  <blockquote>
    <p>HTML CODE:</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;ion-header&gt;
    &lt;ion-navbar&gt;
      &lt;ion-title&gt;
        Login
      &lt;/ion-title&gt;
    &lt;/ion-navbar&gt;
  &lt;/ion-header&gt;
  
  &lt;ion-content padding&gt;
    &lt;ion-list&gt;
      &lt;form name="form"(ngSubmit)="login()" novalidate&gt;
        &lt;ion-item&gt;
          &lt;ion-label fixed&gt;Phone Number&lt;/ion-label&gt;
          &lt;ion-input type="number" name="phoneNumber" value="" [(ngModel)]="model.phoneNumber" required&gt;&lt;/ion-input&gt;
        &lt;/ion-item&gt;
  
        &lt;ion-item&gt;
          &lt;ion-label fixed&gt;Password&lt;/ion-label&gt;
          &lt;ion-input type="password" name="password" value="" [(ngModel)]="model.password" required&gt;&lt;/ion-input&gt;
        &lt;/ion-item&gt;
        &lt;ion-item&gt;
          &lt;button ion-button&gt;Enter&lt;/button&gt;
        &lt;/ion-item&gt;
      &lt;/form&gt;
    &lt;/ion-list&gt;
  &lt;/ion-content&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <p>.TS CODE:</p>
  </blockquote>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component } from '@angular/core';
  import { NavController, AlertController, LoadingController, ToastController } from 'ionic-angular';
  import { HomePage } from '../home/home';
  import { apiService } from '../../providers/api-service.service';
  import { AuthService } from '../../providers/auth-service.service';
  
  @Component({
    selector: 'page-login',
    templateUrl: 'login.html'
  })
  
  export class LoginPage {
    model : any = {};
    response: any[] = [];
    constructor(public navCtrl: NavController, public apiService: apiService, public toastCtrl: ToastController, public alertCtrl: AlertController, public loadingCtrl: LoadingController, public AuthService: AuthService){}
  
    loginUser(){
      this.AuthService.login();
    }
    logoutUser(){
      this.AuthService.logout();
    }
    nextPage(data){
      this.navCtrl.push(HomePage,data).catch(err =&gt; {
        let alert = this.alertCtrl.create({
          title: 'Something',
          subTitle: 'something something',
          buttons: ['OK']
        });
        alert.present();
      });
    }
    errorToast(){
      let toast = this.toastCtrl.create({
        message: 'Cannot login',
        duration: 3000
      });
      toast.present();
    }
    logoutout(){
      let loader = this.loadingCtrl.create({
        content: "Loging out.....",
        duration: 1000
      })
      loader.present();
      this.loginUser();
    }
    login(){
      this.apiService.apiCall(this.model.phoneNumber, this.model.password)
      .then(data =&gt; {
        this.logoutout();
        this.nextPage(data);
      })
      .catch(error =&gt; {
        this.errorToast();
      })
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <blockquote>
    <p>PROVIDERS CODE:</p>
  </blockquote>
  
  <p><strong>api-service.service.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {Injectable} from '@angular/core';
  import {Http, Headers, RequestOptions} from '@angular/http';
  import 'rxjs/add/operator/map'
  
  @Injectable()
  export class apiService{
      constructor(private http: Http){}
  
      apiCall(phoneNumber, password){
          let headers = new Headers({
              "X-Auth-PhoneNumber": '',
              "X-Auth-Password": '',
              "SW-Version": '',
              "Device-Id": '',
              "Device-Model": ''
          })
          let options = new RequestOptions({
              headers: headers
          });
  
          return this.http.get('https://api.keyway.com.my/client/mobile/verification'+ phoneNumber + password, options)
          .map(res =&gt; res.json())
          .toPromise();
      }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>auth-service.service.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {Injectable} from '@angular/core';
  @Injectable()
  export class AuthService{
      private isLoggedIn = false;
      constructor(){}
  
      login(): void{
          this.isLoggedIn = true;
      }
      logout(): void{
          this.isLoggedIn = false;
      }
      authenticated():boolean{
          return this.isLoggedIn;
      }
  }</code></pre>
  </div>
  </div>
  </p>