How to display login details to next page?

Hi guys. Im still new in ionic. Im really appreciate to any help from you guys.
I have make a login using username/password from local server api. But i couldnt find how to display the user’s details to the next page.
Here is the details.

Capture1

login.html
<ion-content padding>

<ion-label>Username</ion-label>

<ion-input type=“text” [(ngModel)]=“userData.name” value="" ></ion-input>

<ion-label>Password</ion-label>

<ion-input type=“password” [(ngModel)]=“userData.pass” value="" ></ion-input>

<button ion-button (click)=“signInUser()” >Sign In</button>

</ion-content>

login.ts
import { Component } from ‘@angular/core’;
import { NavController, NavParams } from ‘ionic-angular’;
import { Http } from ‘@angular/http’;
import ‘rxjs/add/operator/map’;
import { Observable } from ‘rxjs/Observable’;
import { ProfilePage } from ‘…/profile/profile’;

@Component({
selector: ‘page-login’,
templateUrl: ‘login.html’,
})

export class LoginPage {

userData = {“name”: “”, “pass”: “”};

result: any= ;
result2 : any = ;
data: Observable;

constructor(public http: Http, public navCtrl: NavController, public navParams: NavParams) {

}

signInUser() {

let postData = {
  "Username": this.userData.name,
  "Password": this.userData.pass
}

this.http.post("http://192.168.1.39/eperumahanapi/api/mobilelogin", postData)
.map(res => res.json())
.subscribe((data:any) => {
  this.result = data.LoginInfo;
  this.result2 = data.LoginStatus;

  if(this.result2.Status === "OK")
  {
  
    console.log("Success");
    this.navCtrl.push(ProfilePage);
  }
  else
  {
    console.log("Error");
  }
       
 }, error => {
  console.log(error);
});

}

}

I try and error and i found a solution by using navParams. On login.ts, when pushing to next page, create a variable with value from username. Then at profile page, in the constructor, call the api and add the value from the variable that u have created before using navParams

login.ts
this.navCtrl.push(ProfilePage, {test: this.userData.name});

profile.ts
//inside the constructor
var url = ‘’;
this.data = this.http.get(url + this.navParams.get(‘test’));
this.data.map(res => res.json())
.subscribe(data => {
this.result=data.UserDetail;
});

profile.html
{{result.Name}}

FYI, NavParams will only work for Ionic 3 apps.

Look at using a simple service to save and retrieve this data. You can also couple this with Angular’s RouteGuards for good measure.

1 Like