Passing data from one page to other page


#1

I have local json data which I have subscribed to a property ‘jobs’. I am passing this property to other page using NavParams. On the other page I am receiving using get method of navparams. I am not able to assign this data to any property on other page. I want to display this data in html of other page. How do i do that?

This is my home page

import { Component } from ‘@angular/core’;
import { NavController } from ‘ionic-angular’;
import {ColorProvider} from '…/…/providers/color/color’
import { InfoPage } from ‘…/info/info’;
import { identifierModuleUrl } from ‘@angular/compiler’;
@Component({
selector: ‘page-home’,
templateUrl: ‘home.html’
})
export class HomePage {
public jobs: any;
constructor(public navCtrl: NavController,public ColorPr: ColorProvider) {

}

ionViewDidLoad() {

this.ColorPr.getLocalData().subscribe(data => {
      this.jobs = data;
       console.log(this.jobs);
    });

}

itemSelected(name){
this.navCtrl.push(‘InfoPage’,{jobs:name});
}

}

Home html



Names


{{job.name}}

Other Page
@IonicPage()
@Component({
selector: ‘page-info’,
templateUrl: ‘info.html’,
})
export class InfoPage {
public jobinfo: any;

constructor(public navCtrl: NavController, public navParams: NavParams, public alertCtrl: AlertController) {
this.jobinfo = console.log(navParams.get(‘jobs’));
console.log(this.jobinfo);
}
ionViewDidLoad() {
console.log(‘ionViewDidLoad InfoPage’);

}

}

Other page html

info This is info page

{{jobinfo}}

</ion-item>

Provider
import { HttpClient } from ‘@angular/common/http’;
import { Injectable } from ‘@angular/core’;
import {Http} from ‘@angular/http’;
import ‘rxjs/add/operator/map’;

@Injectable()
export class ColorProvider {

constructor(public http: Http) {
console.log(‘Hello ColorProvider Provider’);
}

getLocalData() {
return this.http.get(’…/…/assets/data/adver.json’).map(res => res.json());

}
}