Ionic 2 Passing parameters from a modal with provider

Ionic Framework ionic-v3
1

Hey,

I’ve just started my journey with Ionic 2, and have been trying to learn passing paramters through modals. A few couple of posts and the docs cover the basics, but I’m trying to do something with a provider that I’ve been struggling with for 5 hours or so, and feeling stupid.

I’m trying to open a model from ‘Home’, which presents ‘Second’. On ‘Second’ there is a list, which the user selects an item from. ‘Second’ closes, and the selected item is shown on ‘Home’.
Alongside this, I’d like the parameter (description) from this selected item to be passes to a third modal, ‘Three’. Where ‘Three’ is opened also from ‘Home’, but shows the {{test.description}} from the selected list of ‘Second’. Here’s the attempt in code (removed all of the obvious stuff).

Home.html

    ...
        <p *ngIf="test == 0" (click)=goToList>
          Select an option<!-- {{test.id}} -->
        </p>
        <p *ngIf="data != 0">
        {{test.id}}</p>
    ...

Home.ts

    import { Data } from '../../providers/data';
    ...
      constructor(public modalCtrl:ModalController, public navParams:NavParams, public data:Data) {
      ...
    goToList(){

        let modal = this.modalCtrl.create(SecondPage,Data);
        modal.onDidDismiss((data: any[]) => {
          this.data=data;
        });
        modal.present();
      }

Second.html

      <ion-item *ngFor="let test of tests" (click)="testSelect()">
      {{test.id}}
      </ion-item>

Second.ts

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

data.ts

        data: any;
          constructor() {
            this.data = [{
                "id": "one",
                "desc": "this is a description "
                  }
            ];
          }
        loadData(){
          return Promise.resolve(this.data)
        }

Third.ts

    ?

Third.html

    <p>{{test.description}}</p>

Thanks so much in advance for any help.

2

you should pass the selected entry to the dismiss action… otherwise the onDismiss-callback will not get any data.

Second.html

      <ion-item *ngFor="let test of tests" (click)="testSelect(test)">
      {{test.id}}
      </ion-item>
```
Second.ts
```
      testSelect(test){
        this.viewCtrl.dismiss(test);
      }
```
1 Like
3

Thank so much, managed to get it:

For anyone future readers:

Home.html

<p *ngIf="test == 0" (click)="goTo()">
  Select an option<!-- {{style.id}} -->
</p>
<ion-item *ngIf="test != 0" (click)="goTo()">
{{test.id}}
</ion-item>

Home.ts

export class HomePage {
  test: any = 0;
  constructor(public modalCtrl:ModalController, public navParams:NavParams, public data:Data) {
    this.test;
  }
  goTo(){
    let modal = this.modalCtrl.create(SecondPage,Data);
    modal.onDidDismiss((test) => {
      this.test=test;
      console.log(test)
    });
    modal.present();
      }

    }
1 Like