How to pass data to another page from Input Form in IONIC 5 - ionic-framework

Question

I have an input form with 3 text input. The only thing i want it is to send this 3 datas to another page that i called "Identity". I'd like to know how can do to send this 3 datas to another page using ionic 5. I want to create a signing step by step style. someone can help please?
REGISTER.PAGE.HTML
<ion-content fullscreen="true" class="background-contact">
<div class="fixed">
<div class="div-3">
<div align="center">
<b>IDENTIFICATION</b>
</div>
<ion-label position="stacked" class="title">E-mail</ion-label>
<div align="center" class="input-class">
<ion-input autofocus="true" ngModel name="email" type="email" placeholder="informez votre email"></ion-input>
</div>
<div class="line">
<ion-label position="stacked" class="title">Mot de passe</ion-label>
<div align="center" class="input-class">
<ion-input ngModel name="password" type="password" placeholder="informez votre mot de passe"></ion-input>
</div>
</div>
<!-- <div class="line">
<ion-label position="stacked" class="title">Téléphone</ion-label>
<div align="center" class="input-class">
<ion-input autofocus="true" ngModel name="phone" type="text" placeholder="Tapez votre numéro de tel" (keypress)="numberOnlyValidation($event)"></ion-input>
</div>
</div> -->
<div class="line">
<ion-label position="stacked" class="title">Pays</ion-label>
<div align="center" >
<ion-select cancelText="Fermer" okText="Confirmer" ngModel name="cod_country">
<ion-select-option value="">Dans quel pays êtes-vous?</ion-select-option>
<ion-select-option value="{{item?.id}}" *ngFor="let item of country">{{item?.name}}</ion-select-option>
</ion-select>
</div>
</div>
<div class="line">
<div align="center" class="input-class">
<ion-button (click)="goToAboutPage()" expand="block" color="primary"><ion-spinner *ngIf="loading"></ion-spinner> CONFIRMER <ion-icon name="checkmark-done"></ion-icon></ion-button>
</div>
</div>
</div>
</div>
</ion-content>
RESGISTER.PAGE.TS
import { Component, OnInit } from '#angular/core';
import { AlertController, NavController, ToastController } from '#ionic/angular';
import { AuthService } from 'src/app/services/auth.service';
import { NgForm } from '#angular/forms';
import { AlertService } from 'src/app/services/alert.service';
import {IdentityPage} from 'src/app/identity/identity.page';
import { Router } from '#angular/router';
#Component({
selector: 'app-register',
templateUrl: './register.page.html',
styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {
loading: boolean;// loading chamando
country: any;
password:any;
private cod_country;
constructor(
private authService: AuthService,
private navCtrl: NavController,
private alertService: AlertService,
public alertController: AlertController,
private toast: ToastController,
private router: Router,
) {
this.getCountry();
}
ngOnInit() {
}
//Get all country list
getCountry(){
this.authService.getCountry().subscribe(country=>{
this.country = country;
})
}
// navigate to about page
goToAboutPage(data) {
this.router.navigate(['/identity'],{
queryParams:data
})
}
}

Answer 1

There are Multiple Ways to pass data from 1 page to other page.
Method 1:
Use Angular Router with params
Page 1:
goToNewPage(){
this.router.navigate(['/identity'],{
queryParams: JSON.Stringify(data)
})
}
Page 2:
import {ActivatedRoute} from '#angular/router';
constructor(private activatedRoute: ActivatedRoute){
this.activatedRoute.queryParams.subscribe(params => {
console.log(params)
});
}
Method 2:
Create a GlobalDataProviderService.
Run Command:
ionic generate service globaldata
inside Globaldata class:
public static userObject:any;
Import this class on your both pages and initialize your variable.
Page 1:
goToNewPage(){
GlobaldataService.userObject = YourData;
this.router.navigate(['/identity'])
}
Page 2:
import this class:
inside Constructor or lifeCycle Hook.
yourVaribale = GlobaldataService.usrObject;
Method 3 for Real time Update:
Check my Other Answer: Real Time Data Update

Answer 2

Page 1 html code
<ion-row>
<ion-col size="12">
<ion-item>
<ion-label position="stacked">E-Mail</ion-label>
<ion-input type="email" [(ngModel)]="email"></ion-input>
</ion-item>
<ion-item>
<ion-label position="stacked">Password</ion-label>
<ion-input type="password" [(ngModel)]="password"></ion-input>
</ion-item>
<ion-item>
<ion-label>Country</ion-label>
<ion-select placeholder="Select Country" [(ngModel)]="country">
<ion-select-option value="India">India</ion-select-option>
<ion-select-option value="Usa">Usa</ion-select-option>
</ion-select>
</ion-item>
</ion-col>
<ion-col size="12" class="ion-text-center">
<ion-button (click)="goToAboutPage()" expand="block" shape="round">
Click me
</ion-button>
</ion-col>
</ion-row>
Page 1 ts code
public country: string;
public email: string;
public password: string;
constructor(public nav: NavController) {}
goToAboutPage() {
let params: any = {
country: this.country,
email: this.email,
password: this.password
}
this.nav.navigateForward('/identity', { state: params }); // params to pass object/array
}
Page 2
constructor(public router: Router){
if (router.getCurrentNavigation().extras.state) {
const params = this.router.getCurrentNavigation().extras.state;
console.log(params.email)
console.log(params.password)
console.log(params.country)
}
}