Ionic v3 pass value to another page

Question

I need your help. I want to pass data written by user in a text field to another page. My goal is to use the data passed as variable in the second page to print in console.log.

The problem is that I can see in console.log the right value (what I write in text field) and an "undefined" at the same line of the same page.

In my first page.ts I have

export class LoginPage {

public nomeUtente: string;


constructor(
  public navCtrl: NavController,

) {

}

nomeScelto() {
  let nomeUtente = this.nomeUtente;
  this.navCtrl.push(HomePage, {data: nomeUtente});
    return {
      data :nomeUtente
    }
}

and in the corresponding html

    <ion-content padding>
  <form [formGroup]="loginForm" (submit)="loginUser()" novalidate>

    <ion-item>
      <ion-label stacked>Codice Matrimonio</ion-label>
      <ion-input formControlName="email" type="text" placeholder="Inserisci qui il codice"
        [class.invalid]="!loginForm.controls.email.valid && blur"></ion-input>
    </ion-item>
    <br>
    <br>
    <ion-item>
      <ion-label stacked>Nome</ion-label>
      <ion-input type="text" [(ngModel)]="nomeUtente" placeholder="Inserisci il tuo nome" [ngModelOptions]="{standalone: true}"></ion-input>
    </ion-item>
    <br>
    <br>
    <button ion-button block type="submit" [disabled]="!loginForm.valid">
      Accedi!
    </button>
  </form>
</ion-content>

So, now I have this in my HomePage

    export class HomePage {

  nomeUtente: any;

constructor(
  private camera: Camera,
  public navCtrl: NavController,
  alertCtrl: AlertController,
  public zone: NgZone,
  public navParams: NavParams,

) {
  this.alertCtrl = alertCtrl;

  let nomeUtente = navParams.get('data');

  console.log(nomeUtente);
  }

and in console.log I see

exactlyWhatIWriteInNomeUtente home.ts:33

undefined home.ts:33

Do you have any suggest?

Answer 1

You can do something like below (source):

home.page.ts

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
})
export class HomePage {

  user = {
    name: 'Simon Grimm',
    website: 'www.ionicacademy.com',
    address: {
      zip: 48149,
      city: 'Muenster',
      country: 'DE'
    },
    interests: [
      'Ionic', 'Angular', 'YouTube', 'Sports'
    ]
  };

  constructor(private router: Router) { }

  openDetailsWithQueryParams() {
    let navigationExtras: NavigationExtras = {
      queryParams: {
        special: JSON.stringify(this.user)
      }
    };
    this.router.navigate(['details'], navigationExtras);
  }
}

Here navigationExtras is the data that we are passing to details page.

details.page.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';

@Component({
  selector: 'app-details',
  templateUrl: './details.page.html',
  styleUrls: ['./details.page.scss'],
})
export class DetailsPage implements OnInit {

  data: any;

  constructor(private route: ActivatedRoute, private router: Router) {
    this.route.queryParams.subscribe(params => {
      if (params && params.special) {
        this.data = JSON.parse(params.special);
      }
    });
  }

}

This way you can modify your code only for the data you want to transfer!