Ionic 3 - Get data from modal

Ionic Framework ionic-v3
1

Hello, I’m working on a simple Ionic project. It opens a modal window populating a list with radio buttons, passed from a parent page. I would like, in the parent page, to know how to get the new values of the same data (i.e. the user changes the checks), but I don’t know how to do. Here’s the code.
The problem is that the console.log (see the arrow) returns the same data I passed, ignoring the user changes.

home.ts - opening the modal window

    // Preparing data for the modal
    let data = {};
    data = [ { ...} , {....} ];

    let myModal = this.modalCtrl.create(ThemeModalPage, data);

    myModal.onDidDismiss(data => {
      console.log (data);  // <------- returning the SAME data I sent ...
    });

themes-list.html - template file

<ion-content>
    <ion-list radio-group>
        <ion-item *ngFor="let item of data">
            <ion-label>{{item.name}}</ion-label>
            <ion-radio checked={{item.visible}}></ion-radio>
        </ion-item>
    </ion-list>
</ion-content>

themes-list.ts - modal code

export class ThemeModalPage {
  data;

  constructor(public navParams: NavParams, public viewCtrl: ViewController) {
    // obtain data
    this.data = this.navParams.data;
  }

  closeModal() {
    this.viewCtrl.dismiss(this.data);
  }
}
1 Like
2

The ‘checked’ I don’t think is being updated.

<ion-radio checked={{item.visible}}></ion-radio>

Should be something like…

<ion-radio [(ngModel)]="sausage"></ion-radio>

(Actually not that as that’s for ion-checkbox but heading in the right direction)
What shape is the data?

Check out the link beneath

3

data is in this format:

data = [
   { name: "label1", visible: false, object: Object },
   { name: "label2", visible: true, object: Object},
   { ...}
];

can I return this structure, with the new values of the “visible” variable changed by user?

4

Without updating the original model?

5

<ion-radio checked={{item.visible}} (click)=“radioChecked(‘item.name’)”>

Then in your ts file you define a function radioChecked() that handles click on the radio.

6

Now, I’ve solved the problem (thanks to your suggestion, I investigated and I put ngModel into radio-group:

<ion-content>
    <ion-list radio-group [(ngModel)]="data.itemSelected">
        <ion-item *ngFor="let item of data">
            <ion-label>{{item.name}}</ion-label>
            <ion-radio checked={{item.visible}}></ion-radio>
        </ion-item>
    </ion-list>
</ion-content>

Then, in the modal.ts:

closeModal() {
    this.viewCtrl.dismiss(this.data["itemSelected"]); // ItemSelected is in the ngModel
}

And in the home.ts (the page opening the modal):

myModal.onDidDismiss(data => {
   //data is equal to the radio button value
}
3 Likes
7

what is that viewCtrl in your modal.ts

8

viewCtrl definition in same .ts file:

import { NavParams, ViewController } from 'ionic-angular';

[...]

constructor(public navParams: NavParams, public viewCtrl: ViewController) {

[...]

hope this solves your question. Although it’s IONIC 3 only.