1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: Popovers with dynamic template

tano pro asked 6 years ago

Hey,   I've a strange problem with popups. 
<span class="counter" mdbPopoverHeader="{{'Selected Users' | translate}}" triggers="hover" [mdbPopover]="popTemplate">{{added.length}}</span>


<ng-template #popTemplate>

some static

<ul class="list-group z-depth-1">

<li class="list-group-item"*ngFor="let u of added">{{u.username}}</li>

</ul>

</ng-template>
The problem is that during hovering only the some static text appears and i have to click to get the generated content. So it seems the hover event is not usable with dynamic content.
Thank you!

bitmads premium answered 5 years ago

Pff he has disappeared, same issue here.

Arkadiusz Idzikowski staff commented 5 years ago

There were many changes many changes in component loading and change detection since version 6, but we will take a closer look at again.

Arkadiusz Idzikowski staff commented 5 years ago

We tried to reproduce this problem on our end with the code provided in this thread but without success.

Which version of MDB Angular do you use? Please provide some example html/ts code that is not working and more details about reproduction steps.

tano pro answered 6 years ago

You can easily reproduce it with datepicker if you add onpush changedetection to
Form2Component in Admin Dashboard Pro. The popover error is similar to this.

tano pro answered 6 years ago

Dear Damien, It works because in the example the html is static. For me I have a ng-template in which angular should substitute but it does not till i click on the popup. I'm going to investigate this if you can't reproduce it. I have an other issue with datepicker. I have to click on it twice to close. It seems like the focus remains on the form. There must be some z-index problem, but I couldn't find it. I think it is related to this issue too. Thanks

tano pro commented 6 years ago

for date-picker i see that the z-index remains 0, because i have onpush changedetection on the holding component. By removeing it the picker and the popup works as expected. I should have to find a workaround to use onpush.

Damian Gemza staff answered 6 years ago

Dear tano, I have tried to reproduce your problem with the code from our documentation, and for me, everything is working fine. Could you please check your problem with below code? HTML: 
<ng-template #popTemplate>Here we go: <div [innerHtml]="html"></div>

</ng-template>

<button id="popTemplate" type="button" class="btn btn-success waves-light" triggers="hover" mdbPopoverHeader="Dynamic html inside"

[mdbPopover]="popTemplate" mdbWavesEffect>

Show me popover with html

</button>
TS: 
public html: string = '<span class="btn btn-danger">Your HTML here</span>';
Best Regards, Damian
Write
Create snippet
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: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: 6.2.3
  • Device: HP
  • Browser: Chrome
  • OS: Win10
  • Provided sample code: No
  • Provided link: No
Tags
popovers tooltips
About author
tano
Pro User 229Support score
21Questions 12Answers 0Snippets