jqxPopover on dynamic element in *ngfor

[ansh143Participant]

Hi,

How can i bind it inside ng loop as I am having multiple delete buttons and it is giving error jqxPopover: Invalid Popover toggler: \”#container1\”.”
Here is my Code:

                               <jqxPopover
                                        [showCloseButton]="true"
                                        [selector]="'#container' + citydatadetails1.id"
                                        [title]="'Delete'"
                                        [arrowOffsetValue]="50"
                                        [offset]="{ left: 300, top: -9 }"
                                >
                                    <div>You want to delete</div>
                                </jqxPopover>

                                <jqxButton id="container{{citydatadetails1.id}}">
                                    <i class="fa fa-trash"></i>
                                </jqxButton>

If i bind with static id it works fine
Thanks

[HristoParticipant]

Hello ansh143,

I would like to suggest you try to use the class selector:

<jqxPopover #popover
	[position]="'left'"
	[title]="'Employees'"
	[showCloseButton]="true"
	[selector]="'.classpopover'"
	>
  <div #employees> testing example </div>
</jqxPopover>
<div class="classpopover">
    <jqxButton id="test" style="float: right; margin-top: 10px; padding: 8px 0px; border-radius: 6px;"
        [width]="140" [height]="35">View Employees</jqxButton>
  </div>

Let me know if this does not help you.

Best Regards,
Hristo Hristov

jQWidgets team
http://www.jqwidgets.com

[msn_elfParticipant]

Hi
try this solution :

you must set 'auto-create=false'  and create popover component in afterViewInit State
1- your popover :
 <jqxPopover
    #removePopover
    [auto-create]="false"
[selector]="'.' + uniqName">
</jqxPopover>
2- your container :
<div[class]="uniqName"></div>
3-  in '... .component.ts'  please implement AfterViewInit:
import { jqxPopoverComponent } from 'jqwidgets-scripts/jqwidgets-ts/angular_jqxpopover';
    @ViewChild('removePopover') removePopover: jqxPopoverComponent;
    ngAfterViewInit(): void {
     if (this.removePopover) {
        this.removePopover.createComponent();
      }
    }

[Author]

Posts