Pass data while routing to other page

Ionic Framework ionic-v3
1

Hello , i am really unable how to select an item of data and pass them to another page when rooting, thanks
here my code html

<ion-header>
  <ion-navbar color="tertiary">
    <ion-title>Suivre-réclamations</ion-title>
  </ion-navbar>
</ion-header>


<ion-content padding class="background">
  <ion-list>
    <ion-item *ngFor="let item of items">
  <button ion-item (click)="onLoadReclamation()">
      <b>Type réclamation :</b> &nbsp; &nbsp; {{item.type_rec}} <br />
  </button>
    </ion-item>
  </ion-list>

</ion-content>

here my code Typescript

import { Component } from '@angular/core';
import { NavController , ToastController, App, ActionSheetController} from 'ionic-angular';
import { ReclamationPage} from '../reclamation/reclamation';
import { SingleReclamationPage } from '../single-reclamation/single-reclamation';
import { Http, Headers, RequestOptions }  from '@angular/http';
import { PostProvider } from '../../providers/post-provider';
import { Storage } from '@ionic/storage';
import 'rxjs/add/operator/map';



@Component({
  selector: 'page-suivre-reclamation',
  templateUrl: 'suivre-reclamation.html',
})

export class SuivreReclamationPage {
 
  items: any;
  public dt: any;

  cin: string ="";
  rec_id: string ="";
  type_rec: string ="";
  description: string ="";
  adresse: string="";
  laptitude: any;
  longitude: any;
  etat_rec: string ="";
  datetime: string=""
  gouvernorat: string ="";
  commune: string="";
  cin_admin: string=""
  postal: string="";
  fichiers: string="";
  myphoto:any;

  constructor(public navCtrl: NavController, private postPvdr: PostProvider, public http: Http,
    public storage: Storage , public toastCtrl: ToastController, appCtrl: App,
    public actionSheetCtrl: ActionSheetController ){

    }


    //evenement d'entrée
    ionViewWillEnter()
    {
      console.log('ionViewWillEnter SettingsPage');
      this.storage.get('session_storage').then((result) => {
        this.dt = result;
        this.cin = this.dt[0].cin;
        console.log(this.cin + 'here');
        this.load(this.cin);
      });
    }


    load(cin: string)
    {
      let body = {
        cin:  cin ,
        aksi: 'suivre_reclamation'
      }
      console.log(body);

      this.postPvdr.postData(body) .subscribe(data => {
           this.items= data.items;
        console.log(data.items);
      });
    }


  onLoadReclamation()
    {
    this.navCtrl.push(SingleReclamationPage);
    }

  }

here the screen capture

Capture
Capture.PNG833×668 36.6 KB

any suggestions about how to do this?

2 
<button ion-item (click)="onLoadReclamation(item)">

onLoadReclamation(item)
{
    this.navCtrl.push(SingleReclamationPage, {item: item});
}
1 Like
3

will i be able to load item in SIngleReclamationPage?

4

that does not work for me …

5

Hi, @Fares95

Yes, you’ll be able to load the item in SingleReclamationPage by using method navParams.get() in the constructor of that page.

contructor(){
      let item=this.navParams.get("item");
}
1 Like
6

Thank you so much that worked