How to send login data to 2 pages without navctrl or using navparams?


#1

this is my signin page.ts

import { Component } from ‘@angular/core’;
import { IonicPage, NavController, NavParams, AlertController, Events } from ‘ionic-angular’;
import { LoginService } from ‘./signinservice’;
import { FormBuilder, FormGroup, Validators, AbstractControl } from ‘@angular/forms’;
import { HomePage } from ‘…/home/home’;
import { DetailmobilPage } from ‘…/detailmobil/detailmobil’;
import { RentalPage } from ‘…/rental/rental’;

/**

export class DataUser
{
username: string;
password: string;
nama_user: string;
alamat: string;
no_telp: string;
email: string;
}

@IonicPage()
@Component({
selector: ‘page-signin’,
templateUrl: ‘signin.html’,
providers: [LoginService]
})

export class SigninPage
{
authForm: FormGroup;

dataUser: DataUser = { username: ‘’, password: ‘’, nama_user: ‘’, alamat: ‘’, no_telp: ‘’, email:’’}
items:any;

username: AbstractControl;
password: AbstractControl;
nama_user: AbstractControl;
alamat: AbstractControl;
no_telp: AbstractControl;
email: AbstractControl;

public type=“password”;
public showPass = false;

constructor(public navCtrl: NavController, public navParams: NavParams,
public service: LoginService, public alertCtrl: AlertController, public formBuilder: FormBuilder, public events: Events)
{
this.navCtrl = navCtrl;
this.authForm = formBuilder.group({
username: [’’, Validators.compose([Validators.required, Validators.pattern(’[a-zA-Z]*’), Validators.minLength(8), Validators.maxLength(30)])],
password: [’’, Validators.compose([Validators.required, Validators.minLength(8)])]
});
}

onSubmit(value: any): void
{
if(this.authForm.valid)
{
window.localStorage.setItem(‘username’, value.username);
window.localStorage.setItem(‘password’, value.password);
}
}

showPassword()
{
this.showPass = !this.showPass;
if (this.showPass)
{
this.type = “text”;
}
else
{
this.type = “password”;
}
}

doSignIn()
{
this.service.getFunctions(this.dataUser).subscribe(datas => {
if(datas.result)
{
this.navCtrl.setRoot(HomePage, {
username: datas.dados.username, password: datas.dados.password, nama_user: datas.dados.nama_user, alamat: datas.dados.alamat, no_telp: datas.dados.no_telp, email: datas.dados.email
})
this.events.subscribe(‘loadDataLoginUser’,() => {
});
let alert = this.alertCtrl.create({
title:‘Selamat Datang!’,
message:‘Anda Berhasil Login’,
buttons:[‘OKE’],
cssClass: ‘alert-gagal-login’
});
alert.present();
}
else
{
let alert = this.alertCtrl.create({
title:‘Informasi’,
message:‘Maaf, username atau password anda salah’,
buttons:[‘OKE’],
cssClass: ‘alert-gagal-login’
});
alert.present();
}
});
}

ionViewDidLoad() {
console.log(‘ionViewDidLoad SigninPage’);
}
}

home.ts

import { Component } from ‘@angular/core’;
import { NavController, NavParams } from ‘ionic-angular’;
import { RentalPage } from ‘…/rental/rental’;
import { KomentarPage } from ‘…/komentar/komentar’;
import { TourPage } from ‘…/tour/tour’;
import { DetailmobilPage } from ‘…/detailmobil/detailmobil’;
import { DetailtourPage } from ‘…/detailtour/detailtour’;

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

export class HomePage
{
public nama_user : any;
public alamat : any;
public no_telp : any;
public email : any;

constructor(public navParams: NavParams, public navCtrl: NavController)
{		
}

ionViewWillEnter(): void
{
	this.nama_user = this.navParams.get('nama_user');
	this.alamat = this.navParams.get('alamat');
	this.no_telp = this.navParams.get('no_telp');
	this.email = this.navParams.get('email');  	
}

tabRental: any = RentalPage;
tabTour: any = TourPage;	
tabKomentar: any = KomentarPage;

}

detailmobil.ts

import { Component, Injectable } from ‘@angular/core’;
import { IonicPage, NavController, NavParams, ToastController, AlertController, Events } from ‘ionic-angular’;
import { RentalPage } from ‘…/rental/rental’;
import { HomePage } from ‘…/home/home’;
import { Http, Headers, RequestOptions, Response } from ‘@angular/http’;
import { HttpClient, HttpHeaders } from ‘@angular/common/http’;
import { AppRate } from ‘@ionic-native/app-rate’;
import { SigninPage } from ‘…/signin/signin’;
import { Observable } from ‘rxjs/Observable’;
import ‘rxjs/add/operator/map’;
import { LoginuserdataProvider } from ‘…/…/providers/loginuserdata/loginuserdata’;

/**

@IonicPage()
@Component({
selector: ‘page-detailmobil’,
templateUrl: ‘detailmobil.html’,
providers:[LoginuserdataProvider]
})
export class DetailmobilPage
{
public preview : any;
public nama_mobil : any;
public username : any;
public thn_produksi : any;
public bahan_bakar : any;
public tempat_duduk : any;
public warna : any;
public harga : any;
public nama_user : any;
public alamat : Observable;
public no_telp : Observable;
public email : Observable;
public foto_upload_pembayaran : any;
public tgl_sewa : any;
public tgl_kembali : any;
public id_mobil : any = null;
private baseURI : string = “http://192.168.1.8/dtransquery/view.php”;

constructor(public navCtrl: NavController, public navParams: NavParams, private appRate: AppRate,
public http: Http, public toastCtrl: ToastController,
public alertCtrl: AlertController, public service: LoginuserdataProvider, public events: Events)
{
this.events.publish(‘loadDataLoginUser’);
}

ionViewWillEnter() : void
{
if(this.navParams.get(“record”))
{
this.selectEntry(this.navParams.get(“record”));
}
else
{}
this.nama_user = this.navParams.get(‘nama_user’);
this.alamat = this.navParams.get(‘alamat’);
this.no_telp = this.navParams.get(‘no_telp’);
this.email = this.navParams.get(‘email’);
}

selectEntry(item : any) : void
{
this.preview = item.preview;
this.nama_mobil = item.nama_mobil;
this.thn_produksi = item.thn_produksi;
this.bahan_bakar = item.bahan_bakar;
this.tempat_duduk = item.tempat_duduk;
this.warna = item.warna;
this.harga = item.harga;
this.id_mobil = item.id_mobil;
}

ionViewDidLoad() {
console.log(‘ionViewDidLoad DetailmobilPage’);
}

presentToast()
{
let toast = this.toastCtrl.create({
message:‘Sorry, something is wrong.’,
duration: 3000,
position:‘top’
});
toast.present();
}

doSewa()
{
var headers = new Headers();
headers.append(‘Content-Type’, ‘application/x-www-form-urlencoded’ );
let options = new RequestOptions({ headers: headers });

let postParams ='&preview='+ this.preview + '&nama_mobil=' + this.nama_mobil + '&thn_produksi=' + this.thn_produksi + '&bahan_bakar=' + this.bahan_bakar + '&tempat_duduk=' + this.tempat_duduk + '&warna=' + this.warna + '&harga=' + this.harga + '&nama_user=' + this.nama_user + '&alamat=' + this.alamat + '&no_telp=' + this.no_telp + '&email=' + this.email + '&foto_upload_pembayaran=' + this.foto_upload_pembayaran + '&tgl_sewa=' + this.tgl_sewa + '&tgl_kembali=' + this.tgl_kembali;

this.http.post("http://192.168.1.8/dtransquery/konfirmasisewa.php?view=insert", JSON.stringify(postParams), options)
  .subscribe(data => {
    console.log(data['_body']);
    let alert = this.alertCtrl.create({
      title:'Information',
      subTitle:'Selamat, Sewa Mobil Anda Berhasil.',
      buttons:['OKE']
    });
    alert.present();
    this.navCtrl.setRoot(HomePage);
  }, error => {
    console.log(error);// Error getting the data
    this.presentToast();
  });

}

doKembali()
{
this.navCtrl.push(RentalPage);
}
}

I want to send login data to 2 pages (home.ts and detailmobil.ts ), Anyone can resolve this ? Thank you.


#2

You can use a service to store that data or you can use localstorage but i would recommend you to use service


#3

See: https://angular.io/guide/component-interaction#parent-and-children-communicate-via-a-service


#4

hi there, how can i use service to store data so i can use it in other pages