How to pass data to Modal ionic 2

mYd1 · March 9, 2017, 1:08pm

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?
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: '1',
        items: [
          {title: '1', consumption:'32 W', checked:'true'},
          {title: '1', consumption:'0 W', checked:'false'}
        ]
      },
      {
        title: '2',
        items: [
          {title: '2',consumption:'0 W', checked:'false'},
          {title: '2',consumption:'60 W', checked:'true'},
        ]
      }
    ];
      this.device = this.devices[this.params.get('devNum')];
  }

  openModal(deviceNum) {
    let modal = this.modalCtrl.create(ModalPage, {deviceNum: deviceNum});
    modal.present();
    //console.log(this.device);
    //  console.log(this.devices);
  }

};

**// Modal**

import { Component } from '@angular/core';
import { ModalController, Platform, NavParams, ViewController,NavController } from 'ionic-angular';
import { DevicesListPage } from '../devicelist/devicelist';
@Component({
  selector: 'page-modal',
  templateUrl: 'modal.html'
})
export class ModalPage {

  constructor(public platform: Platform, params: NavParams,public viewCtrl: ViewController) {
      console.log(params.get('deviceNum'));
  }

  dismiss(data) {
    this.viewCtrl.dismiss(data);
  }
}

reedrichards · March 9, 2017, 1:14pm

In your modal, try to move

console.log(params.get('deviceNum'));

in

ionViewWillEnter() {
  console.log(params.get('deviceNum'));
}

mYd1 · March 9, 2017, 1:21pm

no it still undefined img strugle so long with this
is maybe this part wrong ?
this.device = this.devices[this.params.get('devNum')];

reedrichards · March 9, 2017, 1:26pm

could you double check that deviceNum has really a value in method openModal(deviceNum)?

if yes, do you see a difference? that’s working for me:

 let modal: Modal = this.modalController.create(MyModal, {
        myValue: something
    });

    modal.onDidDismiss(() => {
        // Nothing
    });

    modal.present();

and in the modal:

ionViewWillEnter() {
  let myValue = this.navParams.get('myValue');
}

where navParam is

 constructor() {
    private navParams: NavParams
 }

mYd1 · March 9, 2017, 1:37pm

yeah this was a little step forward i get “something” in my console.log … but why i cant pass my data?

this.device = this.devices[this.params.get('devNum')];

reedrichards · March 9, 2017, 1:43pm

Could you update your code I don’t understand anymore what are you trying to pass?

In your current example

this.device = this.devices[this.params.get('devNum')];

is part of your page and to your modal you pass deviceNum not the this.device…so I lost or don’t understand the goal you try to achieve sorry

mYd1 · March 9, 2017, 1:53pm

i would like to pass the “devices” data to my Modal so if i (click)=“openModal()” Modal should be opened with the the belonged content:

import { Component } from '@angular/core';

import { ModalController, ViewController, Platform, NavParams, 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(devNum) {
    let modal = this.modalCtrl.create(ModalPage, {devNum: {}});
    modal.onDidDismiss(() => {

    });

    modal.present();
  }

};

//Modal

import { Component } from '@angular/core';
import {Platform, NavParams, ViewController } from 'ionic-angular';
import { DevicesListPage } from '../devicelist/devicelist';

@Component({
  selector: 'page-modal',
  templateUrl: 'modal.html'
})
export class ModalPage {

  constructor(
    public platform: Platform,
    private  navParams: NavParams,
    public  viewCtrl: ViewController

  ) {

    console.log(navParams.get('devNum'));

  }

  ionViewWillEnter() {
    let devNum = this.navParams.get('devNum');
  }
  dismiss(data) {
    this.viewCtrl.dismiss(data);
  }
}

reedrichards · March 9, 2017, 2:06pm

Do you want to pass to the modal

All “devices” (Küche und Wohnzimmer)
Just one “device” (Küche z.B.)
An item (KüchenAid oder Thermomix z.B.)

?

AaronSterling · March 9, 2017, 2:11pm

Why not just have (click)=openModal(dev) and pass the information in dev? It’s hard to understand what you’re doing right now, or even what you want to pass (as @reedrichards just asked).

mYd1 · March 9, 2017, 2:13pm

I would like to pass the whole data for KüchenAid , Thermomix and so on

the info button open the Modal for each device.

[Album] Imgur: The magic of the Internet

reedrichards · March 9, 2017, 2:15pm

Then modify like following:

// Remove parameter
openModal() {
   // Pass device
   let modal = this.modalCtrl.create(ModalPage, {device: this.device});

And in the modal:

ionViewWillEnter() {
  // Get the device
   let theDevice = this.navParams.get('device');
}

mYd1 · March 9, 2017, 2:25pm

Awesome support thank u and at least how i can bind the necessary data to my info button so if i click on the thermomix i just geht the thermo mix data and then pass it to
my modal template:
<button ion-button color="primary" clear icon-only class="sc-button-star" (click)="openModal()">

<ion-title>
    <!--{{ device.title }}-->
    </ion-title>

[Album] Imgur: The magic of the Internet

reedrichards · March 9, 2017, 2:30pm

You mean how to declare the variable in your modal?

 export class ModalPage {
   
     theDevice: any;

    ionViewWillEnter() {
         //Remove the let and change with it to point to your class variable with this.
         this.theDevice = this.navParams.get('device');
     }
 }

In the modal html

 Where you want {{theDevice.title}}

mYd1 · March 9, 2017, 2:50pm

still doesnt work sorry im confused
and should i bind data to my button? cause i expected only the thermomix values
btw big thanks u already helped me so much

  theDevice: any;
  ionViewWillEnter() {
    this.theDevice.title = this.navParams.get('device');  
    console.log(this.theDevice);
  }

this is the result :

and if i insert {{theDevice.title}} i got an error

EXCEPTION: Error in ./ModalPage class ModalPage - inline template:2:15 caused by: Cannot read property ‘title’ of undefined

reedrichards · March 9, 2017, 3:04pm

You just said that you want the device not the item…anyway if you want then the item

change ts:

  // add param 
 openModal(item: any) {
     // Pass item
    let modal = this.modalCtrl.create(ModalPage, {item: item});

change your calling html (I don’t see your html anymore in that post so I can’t really exactly display what to type but something like):

(click)=openModal(dev);

and your modal:

 export class ModalPage {

 theItem: any;

ionViewWillEnter() {
     //Remove the let and change with it to point to your class variable with this.
     this.theItem = this.navParams.get('item');
 }
 }

mYd1 · March 9, 2017, 3:12pm

U are awesome big shout out and tank u for the best support i ever had!
have a nice day u saved my day!

reedrichards · March 9, 2017, 3:14pm

It worked at the end? Hope so!

If no, let me knows.
And if yep, you’re welcome

mYd1 · March 9, 2017, 3:16pm

not quite i got the right console log but cant display it in the modal ^^

{{ theItem.title }} does not work -.-

<    ion-header>
      <ion-toolbar>
        <ion-title>
    {{ theItem.title }}
        </ion-title>
        <ion-buttons start>
          <button ion-button color="primary" clear icon-only (click)="dismiss()">
            <!--<span ion-text color="primary" showWhen="ios"></span>-->
            <ion-icon name="close"></ion-icon>
          </button>
        </ion-buttons>
      </ion-toolbar>
    </ion-header>
    <ion-content>
     
    </ion-content>

reedrichards · March 9, 2017, 3:49pm

Strange…are you debugging running “ionic serve”? Could you try to stop the process and start it again?

If still doesn’t work, how does your ts file (of the modal) looks like now?

mYd1 · March 9, 2017, 3:58pm

get the error Error in ./ModalPage class ModalPage - caused by: Cannot read property ‘title’ of undefined

modal.ts

import { Component } from '@angular/core';
import {Platform, NavParams, ViewController } from 'ionic-angular';
import { DevicesListPage } from '../devicelist/devicelist';

@Component({
  selector: 'page-modal',
  templateUrl: 'modal.html'
})
export class ModalPage {
  
  constructor(
    public platform: Platform,
    private  navParams: NavParams,
    public  viewCtrl: ViewController
    
  ) {  }
  
  theItem: any;
  ionViewWillEnter() {
    this.theItem = this.navParams.get('item');
    console.log(this.theItem);
  }
  
  dismiss(data) {
    this.viewCtrl.dismiss(data);
  }
}

console.log(this.theItem);

modal.html

<ion-header>
  <ion-toolbar>
<ion-title>
</ion-title>
<ion-buttons start>
  <button ion-button color="primary" clear icon-only (click)="dismiss()">
    <!--<span ion-text color="primary" showWhen="ios"></span>-->
    <ion-icon name="close"></ion-icon>
  </button>
</ion-buttons>
  </ion-toolbar>
</ion-header>
<ion-content>
{{theItem.title}}
</ion-content>

Topic		Replies	Views
Passing params to Modal - how to bind when sent? ionic-v3	12	4656	May 1, 2017
Get data in modal Ionic Framework	0	509	October 16, 2019
Pass parameters to a Modal in Ionic 4 Ionic Framework	2	15314	July 19, 2021
Ionic 2 Passing parameters from a modal with provider ionic-v3	2	3426	January 5, 2017
Getting data from Modal Controller Ionic Angular	4	3491	April 3, 2020

How to pass data to Modal ionic 2

Related topics