How to Pass Dynamic Data to Modals in Ionic
In this blog, we are going to discuss how to pass dynamic data to modals and get this data and implemented this data into modals in Ionic.
Please follow the below steps to pass the data to modals. So let’s start.
Step 1:
In the first step, create modals in the pages where it is required and import them on this page. Like this,
import { WriteReviewModalPage } from '../write-review-modal/write-review-modal.page';
Step 2:
After that write the below function in this page for create/showing modal.
Like this,
async openWriteReview() {
const modal = await this.modalController.create({
component: WriteReviewModalPage,
backdropDismiss: true,
cssClass: 'review_modal',
componentProps: {
vendorId: this.vendorId
}
});
return await modal.present();
}
In the above you can see this componentProps : { } .here we can pass the dynamic data variable(like vendorId ) to the model.
Step 3:
In the third step, we can go modal page like WriteReviewModalPage and open .ts file, and import the NavParams object from ‘@ionic/angular’ module.
import { NavParams } from '@ionic/angular';
Step 4:
After that, we can initialize NavParams object into the constructor and get the value using this.navParams.get() function and assign value in one variable and use that variable in the whole page and implemented dynamically like this,
Constructor (
private navParams: NavParams,
) {
this.vendorId = this.navParams.get('vendorId');
console.log('vendor id==>',this.vendorId);
}
Conclusion:
I hope you can understand how to pass dynamic data to modal. Hope you have liked the blog. This is very important for Ionic app development. Please share your review in the comment section. See you on my next blog. Happy reading.
Comments