Ionic modals passing and receiving data

Yesterday we made a modal in Ionic, modals are really cool, but generally, we want to pass or receive data from them.

That will be what we’ll be making today, a modal that passes, modifies, and returns data.

The result for today will look something like this:

Passing data to an Ionic modal permalink

Let’s first start by passing data to our modal. This is as simple as calling the componentProps on our modalController create function.

number: number = 3;

const modal = await this.modalController.create({
  component: DetailPage,
  componentProps: {
    number: this.number,
  },
});

Then in the DetailPage we can retrieve these values by defining them inside our component!

export class DetailPage implements OnInit {
  number: number;

  ngOnInit() {
    console.log(this.number);
  }
}

That is how easy it is to pass data to our modal component.

Ionic modal dismiss receive data permalink

Of course, we also want to be able to receive this data back in our main component (tab1.page.ts).

Before we pass the data back, let’s add a function that can modify the number for us.

In our detail.page.html, we add the following markup:

<ion-item>
  <ion-icon name="remove-circle" (click)="sub()" item-right></ion-icon>
  <ion-input
    type="number"
    min="1"
    class="ion-text-center"
    [value]="number"
    [(ngModel)]="number"
  ></ion-input>
  <ion-icon name="add-circle" (click)="plus()" item-right></ion-icon>
</ion-item>

Now let’s add the plus and sub functions in the detail.page.ts file:

plus() {
  this.number++;
}

sub() {
  this.number--;
}

This will modify our number, but we still need to pass it back to our initial tab1.page. For that, we need to alter the dismiss function.

dismiss() {
  this.modalController.dismiss({
    number: this.number,
  });
}

This will send the number as the variable number.

In our tab1.page.ts we can receive this, but adding an onDidDismiss callback in the presentModal function:

modal.onDidDismiss().then((data) => {
  this.number = data.data.number;
});

This will receive the data and update the number. Then the next time we open the modal, the new number will reflect.

And there you have it, passing and receiving data in Ionic Modals.

You can find today’s code on GitHub.

Thank you for reading, and let’s connect! permalink

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on Facebook or Twitter