Pass data from a form to a tab in Ionic


#1

I can’t figure out how can i pass data from a login page form to a tab in Ionic. This is my code that holds the data and should push it to the tabs, but it doesn’t work.

Login Page

export class LoginPage {
  private login : FormGroup;

  constructor(public navCtrl: NavController, private formBuilder: FormBuilder) {
    this.login = this.formBuilder.group({
      username: ['', Validators.required],
      password: ['', Validators.required],
    });
  }
  goToVoti(){
    this.navCtrl.push(TabsControllerPage, {
    username: this.login.value.username,
    password: this.login.value.password});
  }
}

Do i have to pass the data to the TabsController first and then to the desired page(s)? If yes, how?


#2

Since i have to pass login data i decided to store them locally, so i used IonicStorage: https://ionicframework.com/docs/storage/

This is what i did:

  1. I stored the data from the login form:
setData(){
this.storage.set('username', this.login.value.username)
this.storage.set('password', this.login.value.password)
console.log('Data set')
}

And then i called this function inside goToVoti()
2) I retrieved the data in the other page when page loads:

ionViewDidLoad() {
console.log("Data loaded");
this.storage.get('username').then((val: string) => {
    console.log(val)
    this.email = val
  });
this.storage.get('password').then((val: string) => {
    this.password = val
    console.log(val)
  });
}

#3

Should be done with a service or a state manager framework mobx or ngrx