How to pass a variable to another page using IONIC?

Question

Hello, I’m making an application using the IONIC framework and I’m having trouble passing parameters to another page.

I have the listing of items ( that are data that are coming from the database ) and in each item I have a "details" button that takes me to a page with detailed information. In this case, I would like if I clicked on the item1 to go to a page with details ONLY of item 1, that is, a page that details the clicked item. That part of taking the clicked item to a new page that I’m not getting.

below are the codes: Schedule.html Schedule.ts os-details.html (here is the page I want to print the details of the clicked item) the-details.ts

//schedule.ts


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

import {NavController} from 'ionic-angular';
import { Storage } from "@ionic/storage";

//import { ConferenceData } from '../../providers/conference-data';
import { UserData } from '../../providers/user-data';
import { OsDataProvider} from '../../providers/os-data/os-data';

import {OsDetalhesPage} from "../os-detalhes/os-detalhes";
//import {OsDetalhesPage} from "../os-detalhes/os-detalhes";




@Component({
  selector: 'page-schedule',
  templateUrl: 'schedule.html'
})
export class SchedulePage {
  username: string;
  nome_cliente: string;
    public lista_os = new Array<any>();
  //result: any; 
  //users: any[];
  //fullName = [];
  //options: any;
  //local: any;
  //public location: any;
 // public fullDetails: any[];
  public osDetails: any;
  public userDetails: any;
  data: any;
  //userPostData = {"email":"","name":"","user_id":""};
 // login: UserOptions = { username: '', password: '' };
  //userID = { codtecnico: '' };
 // responseData: any;
  //submitted = false;
  // @ViewChild(InfiniteScroll) infiniteScroll: InfiniteScroll;
  
  rootPage: any = SchedulePage;

  constructor(
    //public alertCtrl: AlertController, 
    public nav: NavController, 
    public userData: UserData,
    public OSData: OsDataProvider,
    public navCtrl: NavController,
    //public loginData: UserData,
   // public authService: AuthService,
   public storage: Storage,
   // public platform: Platform,
   // public geolocation: Geolocation
    //private geoposition: Geoposition,
    //private diagnostic: Diagnostic,
    //public toastCtrl: ToastController
  ) {
    this.storage.get('userData').then((data:any) => {
      const dados = JSON.parse(data);
      //this.lista_os = dados;
     //console.log(this.lista_os);
      if (dados) {
        this.userDetails = dados.userid[0].userData;
        this.lista_os = dados.userid[1].OSData;
        console.log(this.lista_os = dados.userid[1].OSData);
        //console.log(this.osDetails = dados.userid[1].OSData[0]);
        //this.userID.codtecnico = dados.userData.user_id;
      }
    });     
    
   
    
  }

  ionViewDidEnter() {
    this.getUsername();
    this.getNomeCliente();
  }

  
    getUsername()  {
      this.userData.getUsername().then((name) => {
        this.username = name;
        //console.log('Name',name);
      });
    };

    getNomeCliente(){
      this.OSData.getNomeCliente().then((name) => {
        this.nome_cliente = name;
      });
    
    };


    abrirDetalhes(){
        this.navCtrl.push(OsDetalhesPage);
    };

  
 }
  
    

//---------------------------------------------------------------//

 
//os-detalhes.ts

import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

/**
 * Generated class for the OsDetalhesPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */

@Component({
  selector: 'page-os-detalhes',
  templateUrl: 'os-detalhes.html',
})
export class OsDetalhesPage {

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

  ionViewDidLoad() {
    console.log('ionViewDidLoad OsDetalhesPage');
  }



}

<!-- Schedule.html -->

<ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>OS</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  <div padding >




    <ion-card  *ngFor="let e of lista_os">



      <ion-card-content>

          <b> Id: </b> {{e.id_os}}<br>
          <b> Nome Cliente: </b>{{e.nome_cliente}} <br>
          <b> Data: </b>{{e.data_agenda}} <br>


      </ion-card-content>
      <button ion-button block (click)="abrirDetalhes()">Detalhes</button>
      
    </ion-card>



  </div>
</ion-content>




<!-- os-detalhes.html           -----------------------------             -->

<!--
  Generated template for the OsDetalhesPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Ordem de Serviço Detalhada</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>

  <ion-card-content>

    <b> Id: </b> {{id_os}}<br>
    <b> Nome Cliente: </b>{{nome_cliente}} <br>
    <b> Data Agendada: </b>{{data_agenda}} <br>
    <b> Período do Dia: </b> <br>
    <b> Prioridade: </b><br>



  </ion-card-content>


</ion-content>

Answer 1

Pass the variables like this:

this.navCtrl.push('Pagina', {
    data: variavel,
    data2: valorQualquer,
    ...
});

And then, on your Page that will open, you take the variables like this:

variavel = navParams.get('data');
valorQUalquer = navParams.get('valorQualquer');

Answer 2

In your html call abrirDetalhes() put the value as parameter abrirDetalhes(1) (this value 1 will be dynamic), already in your TS puts it in the function parameter abrirDetalhes(id){