Popovers with dynamic template

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!

Add comment

tano pro answered 6 years ago

1 0 Best answer

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.

Add comment

Damian Gemza staff answered 6 years ago

0 1 Best answer

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

Add comment

tano pro answered 6 years ago

0 0 Best answer

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.

Add comment

bitmads pro premium answered 5 years ago

0 0 Best answer

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.

Add comment

Write

Create snippet

FREE CONSULTATION

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

Status

Answered

Specification of the issue

User: 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

tano

Pro User

229Support score
21Questions 12Answers

0Snippets likes 0Snippets