Topic: Popovers with Hyperlink HTML Content

pasek-it priority asked 2 years ago


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>

Arkadiusz Idzikowski staff answered 2 years ago


@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 2 years ago

thanks, i took the smallest possible value with 70 milliseconds.


Amol Mandar premium commented 2 years ago

It gives following error on [mdbPopover]:

Type 'TemplateRef' is not assignable to type 'string'.


Grzegorz Bujański staff commented 2 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 2 years ago

on the above code for [mdbPopover]='tenplate' it gives following error Type 'TemplateRef' is not assignable to type 'string'.ngtsc(2322)


Amol Mandar premium answered 2 years ago


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 2 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 2 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.


Grzegorz Bujański staff answered 2 years ago


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.


Amol Mandar premium answered 2 years ago


    <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)



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • 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