Reputation: 467
Hello guys Im trying to pass data from my device View to my Modal(device detail View) and bind it to my Modal so if i do (click)=openModal()
the modal should open with the param which i clicked on. but unfortunately it still empty anybody an idea how i can handle it?
// Data source & Modal handler
import { Component } from '@angular/core';
import { ModalController, Platform, NavParams, ViewController,NavController } from 'ionic-angular';
import { ModalPage } from '../modal/modal';
@Component({
selector: 'page-deviceslist',
templateUrl: 'devicelist.html'
})
export class DevicesListPage {
devices;
device;
constructor(
public modalCtrl: ModalController,
public nav: NavController,
public params: NavParams,
) {
this.devices = [
{
title: 'Küche',
items: [
{title: 'KüchenAid', consumption:'32 W', checked:'true'},
{title: 'Thermomix', consumption:'0 W', checked:'false'}
]
},
{
title: 'Wohnzimmer',
items: [
{title: 'Fernseher',consumption:'0 W', checked:'false'},
{title: 'Stehlampe',consumption:'60 W', checked:'true'},
]
}
];
this.device = this.devices[this.params.get('devNum')];
}
openModal(deviceNum) {
let modal = this.modalCtrl.create(ModalPage, deviceNum);
modal.present();
console.log(this.device);
console.log(this.devices);
}
};
//and my modal.ts
import { Component } from '@angular/core';
import { ModalController, Platform, NavParams, ViewController } from 'ionic-angular';
@Component({
selector: 'page-modal',
templateUrl: 'modal.html'
})
export class ModalPage {
constructor(
public platform: Platform,
public params: NavParams,
public viewCtrl: ViewController
) {
}
dismiss(data) {
this.viewCtrl.dismiss(data);
}
}
Upvotes: 11
Views: 23642
Reputation: 1726
The process to pass data with the Modal Controller in Ionic v3 is different from passing data with the Nav Controller. The main difference is that you pass data with a key and value.
You should do this:
let modal = this.modalCtrl.create(ModalPage, {deviceNum: deviceNum});
and on your modal constructor:
constructor(public platform: Platform, params: NavParams,public viewCtrl: ViewController) {
console.log(params.get('deviceNum'));
}
Upvotes: 52