Ionic 3 - Get data from modal


#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);
  }
}

#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
}

#7

what is that viewCtrl in your modal.ts