CODEWITHSUNDEEP
javascripttypescriptionic-frameworkmodal-dialogionic2
Alex
Alex

Reputation: 467

How to pass data to Modal ionic 2

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

Answers (1)

Alexandre Justino
Alexandre Justino

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

Related Questions