How to pass data from 1 page to another using navigation in Ionic?


#1

I am Beginner in Ionic 2. I want to pass Json data from one page to another after click on list items.

Item in List comes from json, it have particular id associated with it. So, I want to pass particular id after click on particular item.

This is json links:

http://factoryunlock.in/sundar/public/api/v1/products
with the help of this link i will shows product in list[![enter image description here][1]][1]

2.But now i want to show details of that particular item. So i used this link

http://factoryunlock.in/sundar/public/api/v1/products/1

i want to change that id (In Link 2 “products/1”) after click on particular item

This is my Listview code(Second.ts).

  import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams } from 'ionic-angular';
    import { EarthquakesProvider } from '../../providers/earthquakes/earthquakes';
    import { DetailsPage } from '../details/details';
    import { ChartsPage } from '../charts/charts';
    
    
    @IonicPage()
    @Component({
      selector: 'page-second',
      templateUrl: 'second.html',
      providers: [EarthquakesProvider]
    })
    export class SecondPage {
    
        public DateList: Array<Object>;
    
        constructor(public _navCtrl: NavController,
            public _earthquakes: EarthquakesProvider) {
    
           this.getEarthquakes();
    
        }
        public Listitem(l) {
            this._navCtrl.push(DetailsPage
                );
    
        }
    
        public openModal() {
            this._navCtrl.push(ChartsPage);
    
        }
        getEarthquakes() {
            this._earthquakes.loadEarthquakess().subscribe(res => {
                this.DateList = res.data;
                
            });
        }
    
     }

This is my Provider Controller:

import { Injectable } from '@angular/core';
    import { Http } from '@angular/http';
    import 'rxjs/add/operator/map';
    
    @Injectable()
    export class EarthquakesProvider {
    
        constructor(public _http: Http) {
            console.log('Hello Earthquakes Provider');
        }
    
       
        loadEarthquakess() {
            return this._http.get('http://factoryunlock.in/sundar/public/api/v1/products')
                .map(res => res.json());
        }
    
        loadEarthquakesdetails() {
            return this._http.get('http://factoryunlock.in/sundar/public/api/v1/products/1')
                .map(res => res.json());
        }

This is my details.ts code

 import { Component } from '@angular/core';
    import { IonicPage, NavController, NavParams } from 'ionic-angular';
    import { EarthquakesProvider } from '../../providers/earthquakes/earthquakes';
    
    
    @IonicPage()
    @Component({
      selector: 'page-details',
      templateUrl: 'details.html',
      providers: [EarthquakesProvider]
    })
    export class DetailsPage {
    
        public DateList: Array<Object>;
    
        item: any;
        constructor(public _navCtrl: NavController, public _earthquakes: EarthquakesProvider) {
    
            
            this.getEarthquakes();
    
        }
        
        getEarthquakes() {
            this._earthquakes.loadEarthquakesdetails().subscribe(res => {
                this.DateList = res.data;
                console.log(res.data);
            });
        }
    
     }

This is my List View Snapshot

This is my Details view snapshot


#2

NavParams are probably the easiest way to achieve your goal.

PS: if you aren’t 100% certain why you are putting a providers property on a component, you don’t want to do so.