Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to pass data from one page to another for Navigation in Ionic 2

I am Beginner in Ionic 2. I want to pass Json data from one page to another after I click on a list items. The Items in the list comes from json and has particular id's associated with each item. So I want to pass a particular id after a click event on a particular item.

This is the json link:

1. http://factoryunlock.in//products with the help of this link I will shows product in list

enter image description here

2. But now I want to show details of that particular item. So I use this link

http://factoryunlock.in/products/1

I want to change that id (In Link 2 products/1) after the click event on a 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 Details view snapshot

enter image description here

like image 263
Harshal Deshmukh Avatar asked Jul 19 '17 07:07

Harshal Deshmukh


People also ask

How do you pass data from one page to another in Ionic?

To Pass data from Home page to About page we will need to import NavParams class. Since, I am using Ionic CLI to generate pages, class NavParams will already be imported in the about page.

How does navController pass data in Ionic?

To push a new view onto the navigation stack, use the push method. If the page has an <ion-navbar> , a back button will automatically be added to the pushed view. Data can also be passed to a view by passing an object to the push method. The pushed view can then receive the data by accessing it via the NavParams class.

How do you move from one page to another in Ionic 4?

ts file code. export class HomePage { constructor(public navController: NavController) { } goToLoginPage(){ this. navController. navigateForward(LoginVCPage) // Getting error at this line. } }


1 Answers

List view Page

 public Listitem(id) {
    this._navCtrl.push(DetailsPage, {id: id}); 
 }

Provider Controller:

 loadEarthquakesdetails(id) {
        return this._http.get(`http://factoryunlock.in/sundar/public/api/v1/products/${id}`)
            .map(res => res.json());
    }

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;
     id: number;
    constructor(public _navCtrl: NavController, public _earthquakes: EarthquakesProvider, public navParams: NavParams) {

         this.id = navParams.get('id');


    }
    ionViewDidLoad() {
        this.getEarthquakes(this.id);
}
    getEarthquakes(id) {
        this._earthquakes.loadEarthquakesdetails(id).subscribe(res => {
            this.DateList = res.data;
            console.log(res.data);
        });
    }

 }
like image 131
Swapnil Patwa Avatar answered Nov 02 '22 06:11

Swapnil Patwa