In this tutorial, I’ll show you guys on how to create a modal inside your Ionic project. Modal is a dialog that overlay on top of an existing page. It is used to extend the action within the page and dismiss when the task is completed.
Modal can annoy the user when not implemented correctly. Here are some good reading to get started on modal.
This tutorial was divided into 2 sections:
The first section is a basic for open and closing a modal. For the second section, we will show you how to pass the data between modal and parent page.
This tutorial was made with Angular + Ionic CLI v4 and above.
This tutorial use new blank Ionic project as a starter with parent page called
home
and the modal page calledsecond
.
1. Opening and closing a modal
In order to create a modal, we need to generate a new page and name it as second
. We also make it easily differentiable from other pages by placing it inside a directory called modals
.
Run the following command inside terminal
Then, we need to declare our newly created modal page inside the home.module.ts
in order to use it. Also, don’t forget to include second
as an entryComponents
. We found this great article about entryComponents
for you guys to check it out.
Add the following changes inside
home.module.ts
.
Inside home.page.ts
, we are going to create a new function to open the modal called openModal
.
Add the following changes inside
home.page.ts
.
Inside home.page.html
, create a new button to call function openModal
as a click event.
Add the following changes inside
home.page.html
.
Right now, we need to work on dismissing the modal. Go to second.page.ts
and add a function called closeModal
to dismiss a modal.
Add the following changes inside
second.page.ts
.
Lastly, we are going to create a button for a user to dismiss the modal.
Add the following changes inside
second.page.html
.
And that’s it for opening and closing a modal.
2.Passing data between page and modal
For the second part of this tutorial, we are going to pass the data between parent page and modal back and forth.
First, we are going to create two new public variable called lunch
and dinner
.
The data from lunch
is going to be passed onto the modal.
dinner
is going to accept the value passed from the modal.
Add these two variable inside
home.page.ts
.
Inside the method create
, we are going to pass a key value of componentProps
with the lunch
value that we are going to pass into the modal.
Then, we need to fetch the value of dinner
that we get from modal at ionWillDismiss
.
Add the following method inside
home.page.ts
.
Inside home.page.html
, we are going to open the modal and display the data that are being passed and received.
Add the following changes inside
home.page.html
.
Now, we need to handle input inside the second.page.ts
using angular input decorator.
We also need to create a public variable called dinner
to pass into the parent page.
Inside closeModal
, put dinner
as a parameter to pass the value into the parent page.
Add the following changes inside
second.page.ts
Add the following changes inside
second.page.html
Result
And here is the result of our hard work.
0 comments:
Post a Comment
Note: only a member of this blog may post a comment.