TourIonPopoverModule and Custom Template problem

[NSiggel]

Currently trying to use
<tour-step-template> <ng-template let-step="step">
...

however even with no customization, using de default from website, the templates shows up non clickable state, Frozen on screen, and can't be dismissed.
Visually I can also see that the CSS does not line up the way the default one with no customization does

Does anyone have proper guidance on setting this up in an TourIonPopoverModule context ?
I've got my at the bottom of my
app.component.html
and I've registers a number of steps and achors and using default template everything works, but feel there might be something missing in docs of configuration in order to be able to use the ng-template properly.

The primary reason for needing the template is the ability to embed a iframe with video content.
This does not work, as the Angular XSS it is currently stripping the content out.

I know we can fix this by using domsanitizer which I would apply via a pipe, but I feel I would need to use the tour-step-template in order to apply something like
<ion-card-content
[innerHTML]="step.content | noSanitizing"
>

Any suggestion would be welcome.

[hakimio]

Can you create reproduction of your "non-clickable" tour? What version of the tour are you using?

[hakimio]

You can find default step template here.

[hakimio]

CSS here

[NSiggel]

Let me see about creating a reproduction.
As to core versions
"@angular/core": "^15.0.0",
"@ionic/angular": "^7.1.0",
"ngx-ui-tour-ionic": "^1.7.0",

when I copy paste the default template in from
https://hakimio.github.io/ngx-ui-tour/ion-popover/Misc#custom-template

this is a screenshot I get. Notice the X button for close is not in the right spot.

with the step definition as
{
anchorId: 'start-tour',
title: 'Welcome To Tour',
content: Welcome to the Ngx-UI-Tour tour!<br><br>Let's begin!,
enableBackdrop: true,
stepDimensions: {
minWidth: '500px',
},
},

So it's as though the template did not register itself properly.
we can see the step min-width is being applied. the the content of the template is not being inserted/registered properly.

• From the new link, should I be implementing it the full class as my own component ?
• is this a possible version compatibility issue ?

really appreciate your quick replies and assistance.

[hakimio]

The default template in the docs is for the new version: v2

[NSiggel]

Thanks for confirming.
So maybe the key question does ionic 1.7 allow for a custom ?
Does it need to be registered in a different way ? vs docs which seem to be on the current release ?

I tested the following template in the 1.7 branch, but getting the same errors.
https://github.com/hakimio/ngx-ui-tour/blob/ionic%40v1.7.0/src/app/ion-popover/examples/default-template.txt

Do you have any other suggestions on getting iframe or remote content in the content of a step ?
I'm assuming the [innerHTML]=step.content with a sanitizer is the best way.

Really appreciate any insight. Will look at v2 migration.

[hakimio]

So maybe the key question does ionic 1.7 allow for a custom ?

Custom templates work the same way. Just default template CSS is slightly different.

Anyway, did you manage to make your custom template with iframe work?