Ionic 3 | Add Modals in Ionic 3 Application using Latest Ionic CLI v4.12.0

In this post we will discuss on How to Add a Modal in Ionic 3 Application with Latest Ionic CLI (v4.12.0) for Adding Modals in Ionic 4 App check this post

As the Ionic team has come up with the latest version Ionic 4 which is web-component based, still some developers working on previous versions of applications which were built on Ionic 3 previous version may face some difficulties as CLI is also updated and Ionic docs are not properly linked they may land mistakenly from v3 to v4 or vis versa.

First of all, go to these links for V3 docs  & V4 docs. You can check my previous post on How to Create Ionic 3 App in Latest v4 CLI? & How to install Native plugins in Ionic 3 Application using the latest CLI?

First, we will create a new Ionic 3 Application. Make sure you have the latest version on Ionic CLI installed by running following command

 

Next, we will create a new ModalPage to show in Ionic Modal. Run the following command to create a new page

the above ionic command will create a page without specs as we don’t need testing right now.

We will add the above newModalPage’s module in the app.module.ts file

Now we will add a Button to open Modal from the Home page

Here we will show data returned by Modal on Dismiss in variable modalDismissData

openModal() will open modal by calling create a method in the home.ts file

We can also pass data in create method to our modal page. The onDidDismiss method will be called when the dismiss() method is called from Modal Page new-modal.ts

In constructor or ionViewDisLoad we can get data passed from the home.ts file using the present() method, for that we use NavParams service.

The dismissModal() method will call dismiss() method of ViewController service in ionic-angular. Also, we have passed data in this method which will be caught by the onDidDismiss method at the home.ts.

Run application

In the above tutorial we got to know, How to open modal in Ionic 3 application and also pass data on Modal open and get back info in dismissing modal to parent component. For Ionic 4 Modal tutorial visit this post.

Leave a Reply

avatar
  Subscribe  
Notify of