bug: Inline Modals not working

[EinfachHans]

Bug Report

Ionic version:

[ ] 4.x
[ ] 5.x
[X] 6.x

Current behavior:

I'm currently trying to open a inlined Modal with a Datetime Component in it. As this also doesn't work with any other stuff inside i guess it's a Modal Issue.

My Code:

<ion-modal trigger="open-modal">
 <ion-datetime></ion-datetime>
</ion-modal>

1. My IDEA (IntelliJ) says Attribute trigger is not allowed here, but i don't know if this is something that you can fix.
2. If i press the button with the matching id a modal opens but it's just a white screen.

Even if i design my Modal like:

<ion-modal>
 <ion-header>
 <ion-toolbar>
 <ion-title>Test</ion-title>
 </ion-toolbar>
 </ion-header>
 <ion-content>
 </ion-content>
</ion-modal>

it's just a white modal.

Additional Question:

• Is it possible to somehow use presentingElement & swipeToClose in an inlined Modal?
• What i want to create is a effect that you have an image at the bottom of your screen and if you pull and swipe this image up it transforms into a "normal" modal. For that i think to adjust the present & dismiss animation of the inlined modal as weill

Expected behavior:

To correctly opens the Modal.

Steps to reproduce:

I created a small Repo: https://github.com/EinfachHans/ionic-inline-modal-bug

Ionic info:

Ionic:

 Ionic CLI : 6.16.3 (/usr/local/lib/node_modules/@ionic/cli)
 Ionic Framework : @ionic/angular 6.0.0-beta.0
 @angular-devkit/build-angular : 12.0.5
 @angular-devkit/schematics : 12.0.5
 @angular/cli : 12.0.5
 @ionic/angular-toolkit : 4.0.0

Capacitor:

 Capacitor CLI : 3.0.2
 @capacitor/android : not installed
 @capacitor/core : 3.0.2
 @capacitor/ios : not installed

Utility:

 cordova-res (update available: 0.15.3) : 0.15.1
 native-run : 1.4.0

System:

 NodeJS : v14.15.4 (/usr/local/bin/node)
 npm : 7.17.0
 OS : macOS Big Sur

[liamdebeasi]

For inline modals with Angular, you need to use <ng-template> in order for the inner content to be destroyed on dismiss since the ion-modal instance is reused. This is covered in the v6 docs: https://beta.ionicframework.com/docs/api/modal#inline-modals

So your content would look like this:

<ion-modal trigger="datetime-modal">
 <ng-template>
 <ion-datetime></ion-datetime>
 </ng-template>
</ion-modal>

[liamdebeasi]

Is it possible to somehow use presentingElement & swipeToClose in an inlined Modal?

Yes presentingElement and swipeToClose should work like normal. presentingElement needs a reference to ion-router-outlet, and swipeToClose can be bound as a boolean.

What i want to create is a effect that you have an image at the bottom of your screen and if you pull and swipe this image up it transforms into a "normal" modal. For that i think to adjust the present & dismiss animation of the inlined modal as weill

Yeah it might be best to create a custom animation for this.

[EinfachHans]

@liamdebeasi Ohh i din't found that Docs yet. Amazing, thank you! 😊

FYI: The Fact the a ng-template is needed, is missing in the Datetime Usage Docs: https://beta.ionicframework.com/docs/api/datetime#usage (btw there is a small typo on that page, search for componetn)

Also, presentingElement and swipeToClose seems to work, but my IDEA marks them as red and says: Property presentingElement is not provided by any applicable directives nor by ion-modal element

[liamdebeasi]

Thanks! I can update the example for Angular - thanks!

The typo should be fixed, I just need to update the docs site to use beta 1.

Does the IDE error happen in v5 as well?

[EinfachHans]

The IDEA Error is only when i use the Modal inline. When i use the ModalController to create the Modal, all options are parsed correctly. So no Problems with this in v5 and v6. Only v6 inline. Also the trigger attribute is not known, but this is less important as it isn't marked as an error

[liamdebeasi]

Thanks!

Docs example PR: #23564
IDE Error fix: #23565

Both should be in beta 2.

[EinfachHans]

Amazing thank you! :) I will continue testing the beta in the next days

[farisfaisalthena]

Just wanted to clarify. To close inline modal we just use this.modalCtrl.dismiss() in the .ts file right?

[liamdebeasi]

For Angular I would recommend that approach.

[farisfaisalthena]

Also will i be able to pass any parameters with the inline modal? Could not find this on the doc. Im looking for something like the componentProps behaviour.