Ionic 4 click outside modal background backdrop return data

Ionic Framework
1

When I first had the problem I searched around and found a couple of posts about this but for previous versions of IONIC and they didn’t work for me so I decided to post what I did to fix it for IONIC 4, I know it’s basic stuff but posting it might save someone’s time in the future :man_shrugging: also why I tried including keywords in the title

The problem is pretty simple, I’ma walk you through what’s happening in my App

  • I have a side menu where I’m displaying the name of the logged in user ( the variable is stored in a service )
  • When he clicks on his name a modal is shown, I developed the modal based on this post https://www.freakyjolly.com/ionic-4-how-to-use-ionic-modal-popovers-and-pass-data-and-receive-response/ where I can send and recieve data back, the only difference is how I’ve added some css to make it smaller and look like a popup instead of a full page page
  • I send the user’s name to the modal and it is shown on the input field, there’s 2 buttons, when he clicks Cancel the data sent back is the original data received, if he clicks Ok then he data sent back is the current text in the input field
  • Everything so far works
  • When I click outside the modal, the modal closes and the name on the side menu LITERALLY disappears
3 Likes
2

My first guess was that when I click outside the module the data sent back is “” and it updates the name with that, but after printing the value of the returned data I noticed it said “undefined” so what I did was in the modal.onDidDismiss where I receive the returned data, I make sure that dataReturned.data != undefined and only then allow the user’s name to take the value of the returned data.

3

@SanduCuragau you need to add backdropDismiss: false when creating the modal

        const modal = await this.modalCtrl.create({
            component: ComponentName,
            componentProps: { 
                prop1: value1
            },
            backdropDismiss: false
        });``
3 Likes
4

Welp that is an option, but doing that makes me unable to close the modal by clicking outside of it, what I wanted to achieve was being able to click outside the modal to close it, without having the return data doing any bad to the app.

5

@SanduCuragau you check for the return data != undefined is the only way,

6

@SanduCuragau Do you know how to get component reference from the modal?

7

A component reference from the modal? Hmm I’m not sure I understand your question, you want in a page or service to permanently get a reference to a component present on a modal? Why would you want that, you can send data values both ways, and that’s usually the only way you wanna go about it

1- From page to modal: you send data on the modal creation, like I do here

image
and then use it in the modal
image

image
image.png957×89 3.55 KB

2- From modal to page: you open up the modal, use it however you see fit, and then when you dismiss it you send the data back and receive it in the onDidDismiss, like I do it here
image

Maybe I didn’t understand your question, could you elaborate your situation?

8

@SanduCuragau in my case, in my component i used @Output decorator which i can wire it up using tag i.e

                        <mob-keypad
                            display="keypad"
                            (submited)="keypadValueSubmited($event)">
                        </mob-keypad>

but when i create this using ModalController i.e

            const modal = await this.modalCtrl.create({
                component: MobKeypadComponent,
                componentProps: { 
                    display: "passcode", submited: () => { /*some code*/ }
                } 
            })

It does not work, that why i want to get the component reference from modal, then subscribe to submited event.
Please help