Ionic V6.20 modal gives blank screen

Hi, there;
I am doing a project using Ionic V6.2.5. I have tried all the sample from site: ion-modal: Ionic Mobile App Custom Modal API Component

I ran this on my Android device.

None of the sample listed here works for me. It all shows a bank modal.

Can some direct me to the right path please?

This is my environment:

Ionic CLI : 6.20.0 (C:\Users\myname\AppData\Roaming\npm\node_modules@ionic\cli)
Ionic Framework : @ionic/angular 6.2.5
@angular-devkit/build-angular : 13.3.9
@angular-devkit/schematics : 13.2.6
@angular/cli : 13.2.6
@ionic/angular-toolkit : 6.1.0

Capacitor:

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

Utility:

cordova-res : not installed globally
native-run : 1.7.0

System:

NodeJS : v16.15.1 (C:\Program Files\nodejs\node.exe)
npm : 8.12.2
OS : Windows 10

Cheers,
Rob

After millions of try, I figured out that <ng-template> needs to be taken out from the template.

To be honest, very disappointed on the doc from ionic.

The Datetime picker also has similar issue,for example, attribute “minute-Values” should have “-” between words, but all sample code in the doc says “minuteValues”, so frustrating!

Cheers,
Rob.

Hey @storynana, sorry to hear you were having some issue.

What was the sample code you tried in the original modal?

For this, those are both different things according to the component. The minute-values version is the vanilla html attribute that can set on the component. But with Angular, that can be set as minuteValues in order to reflect that to the component class. It’s a difference between class properties and html attributes.

This is why we make sure to mention the both in the docs

(notice the attribute section).

Either way, this is not really an issue with the docs, but how framework handle attributes/props.

Hi, mhartington;
Thanks for the reply.
What was the sample code you tried in the original modal?
–>I just copy/paste all the code from ion-modal: Ionic Mobile App Custom Modal API Component

But with Angular, that can be set as minuteValues in order to reflect that to the component class. It’s a difference between class properties and html attributes.
→ I am using Angular, this doesn’t work for me. I have to use “minute-values”

Cheers,
Rob.