AllowHTML flag doesn't work in custom variations

[rina-maslova]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[ ] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[x] Support request
[ ] Other... Please describe:

Current behavior

I have bunch of tooltips with custom HTML templates in my project and they worked perfect on 3.1.0 version of @ngneat/helipopper.
After upgrading the version to 5.1.4 it doesn't work. It is now showing tags (like it is just a string) rather than parsed HTML.
I've tried to show a tooltip with a template using custom variation and allowHTML flag, but it doesn't seem to work too.

I've created a new variation that extends the existing one:

export const TEMPLATE_TOOLTIP = {
  ...tooltipVariation,
  allowHTML: true, // this property doesn't work
  delay: 1000, // this one works
};

Then in app.module.ts

TippyModule.forRoot({
  defaultVariation: 'tooltip',
  variations: {
    tooltip: tooltipVariation,
    popper: popperVariation,
    templateTooltip: TEMPLATE_TOOLTIP,
  }
}),

Tooltip is defined in component like:
Tooltip = '<p>some title</p><p>my custom content</p>';

In template:
<span [tippy]="Tooltip" variation="templateTooltip"></span>

After all that manipulations I still see my tooltip rendering with tags and not parsing the custom template.
Can you please guide me what am I doing wrong? Or is it the issue with "allowHTML" flag?

Environment

Angular version: 13.3.6


Browser:
- [x] Chrome (desktop) Version 101.0.4951.67 (Official Build) (64-bit)
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
 
For Tooling issues:
- Node version: 16.15.0 
- Platform:  Windows 

Others:
"@ngneat/helipopper": "^5.1.4", (was 3.1.0)
"@ngneat/overview": "^3.0.4", (was 1.0.0)

[rina-maslova]

Same issue here #96

[NetanelBasal]

cb4f2f7

[NetanelBasal]

You can use ng-template

[NetanelBasal]

I don't mind seeing a PR that makes it configurable.

[rina-maslova]

@NetanelBasal ng-template is not an option in some cases.
For example if you are iterating through an array with dynamic tooltips. Check this example https://stackblitz.com/edit/angular-ivy-gvajja?file=src%2Fapp%2Fapp.component.ts

[rina-maslova]

I concern that upgrading the package version breaks the existing functionality.

[rina-maslova]

@NetanelBasal ng-template is not an option in some cases. For example if you are iterating through an array with dynamic tooltips. Check this example https://stackblitz.com/edit/angular-ivy-gvajja?file=src%2Fapp%2Fapp.component.ts

@NetanelBasal did you get a change to check this example? Do you have any suggestions what to do in such cases?

[NetanelBasal]

<h1>Allow HTML test</h1>
<ul *ngFor="let item of items">
  <ng-template #foo>
    <p>{{ item.name }}</p>
  </ng-template>
  <li [tippy]="foo" variation="templateTooltip">
    {{ item.name }}
  </li>
</ul>

[rina-maslova]

@NetanelBasal unfortunately the solution you provided is not working. Please check
https://stackblitz.com/edit/angular-ivy-mmuugg?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.ts

[NetanelBasal]

if you want to render html inside ng-template use innerHTML