Topic: Popovers with Hyperlink HTML Content
Expected behavior
Clickable Popover Hyperlink
Actual behavior
Link is showed but not activated on click.
Resources (screenshots, code snippets etc.)
<a tabindex="0" [mdbPopover]="template"
trigger="focus" [placement]="placement">show
</a>
<ng-template #template style="border: 1px solid #000;">
<div [innerHtml]="More Infos here: <a href='https://google.com/' target='_blank'>Demo</a>"></div>
</ng-template>
@pasek-it In this case when you use the focus trigger the popover component will be closed on the next click (even if you click on the link inside its content) and the link click won't be triggered. You would need to add a delay to prevent this behavior:
<a tabindex="0" [mdbPopover]="template"
trigger="focus" [placement]="placement" [delayHide]="150">show
</a>
pasek-it priority commented 3 years ago
thanks, i took the smallest possible value with 70 milliseconds.
Amol Mandar premium commented 3 years ago
It gives following error on [mdbPopover]:
Type 'TemplateRef' is not assignable to type 'string'.
Grzegorz Bujański staff commented 3 years ago
@Amol Mandar We need more information to see why this error occurs. Please add the code that causes this error for you. We'll check it.
Amol Mandar premium commented 3 years ago
on the above code for [mdbPopover]='tenplate' it gives following error Type 'TemplateRef' is not assignable to type 'string'.ngtsc(2322)
I dont know what to add further.!! Let me attempt one more time. 1) I just want to have custom template as popover 2) for that I imported MdbPopoverModule in app.module.ts 3) then on a img tag i wanted to display a custom popover so added relevant popover attributes as mentioned in previous code. 4) when we use [mdbPopover] initialized to template ref variable named as 'tenplate' it gives error. 5) if i write simply mdbPopover and initialize it to any string, it works and popover appears with no styles. 6) Thats all!! Just wanted to have custom template for popover on a image.Simple.
Grzegorz Bujański staff commented 3 years ago
Please add the complete code. Currently, the code you provided does not contain the ng-template tag closing. Should there be anything else in this template? Is the img inside or outside of this template? Have you checked if the code I sent is working correctly for you?
Arkadiusz Idzikowski staff commented 3 years ago
@Amol Mandar The problem with mdbPopover input type was fixed in version 1.6.0. Please make sure that you use this version in your project.
I am not sure if I understand your example correctly. Is this an example where the popover content runs over and over again? Hovering over an image inside a popover opens another popover with the same content?
I used this code:
<button
type="button"
class="btn btn-lg btn-danger"
[mdbPopover]="tenplate"
mdbPopoverHeader="Popover title"
>
Click to toggle popover
</button>
<ng-template #tenplate>
<div style="border: 1px solid #000;" [innerHTML]="ste"></div>
<img
[src]="['assets/1.jpg']"
class="card-img-top"
placement="left"
trigger="focus hover"
mdbPopoverTitle="Power vs Force"
[mdbPopover]='tenplate'
alt="..."
[delayHide]="1500"
/>
</ng-template>
and I have no such error. Please add the complete code - along with the element that uses this template. Please add information as to what exactly this error refers to. Which part of the code triggers it.
<ng-template #tenplate >
<div style="border: 1px solid #000;" [innerHTML]="ste"></div>
<img
[src]="['assets/1.jpg']"
class="card-img-top"
placement="left"
trigger="focus hover"
mdbPopoverTitle="Power vs Force"
[mdbPopover]='tenplate'
alt="..."
[delayHide]="1500"
/>
on the above code for [mdbPopover]='tenplate' it gives following error:
Type 'TemplateRef' is not assignable to type 'string'.ngtsc(2322)
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Priority
- Premium support: Yes
- Technology: MDB Angular
- MDB Version: MDB5 1.0.0
- Device: PC
- Browser: Chrome
- OS: Windows
- Provided sample code: No
- Provided link: No