click event not working in PrimeNg List box inside template

1
votes

I am trying to add click event inside the template of list box in prime Ng but event is not listened below is the stackblitz code and demo link.

Below is the code

   <h5>Single</h5>
<p-listbox [options]="cities" [(ngModel)]="selectedCity" optionLabel="name" [style]="{'width':'15rem'}">
    <ng-template let-country pTemplate="item">
        <div class="country-item">
            <div>{{country.name}}</div>
            <a (click)="editProject('hii')"><i class="pi pi-pencil"></i></a>
        </div>
    </ng-template>
</p-listbox>

https://stackblitz.com/edit/primeng-listbox-demo-dxcpdt?file=src/app/app.component.ts

1
angularprimengangular10

1 Answers

2
votes

The problem is with prime-ng styles, the p-listbox has a .p-ink class that pops over the whole list item making it unclickable. So making the <a> clickable can be achieved by hiding the .p-ink.

Replace your styles in your ts with this:

  styles: [
    `
      :host ::ng-deep .ui-listbox {
        width: 20em;
        z-index: -1 !important;
      }
      :host ::ng-deep .p-ink {
        display: none !important;
      }
    `
  ]