plist template does not work with p-input

UI Components for Angular
Post Reply
Mahaveer85
Posts: 3
Joined: 18 Mar 2023, 07:03

26 Mar 2023, 12:52

Hi Team,

I have a requirement for a p-listbox with options having a checkbox, and text but not all selection headers in p-listbox.

So if i make multiple: false then no checkbox appear.

Ques: Could you say if there is any way to remove p-listbox header but keep the body with checkbox and text?
Ques: If I can achieve the above with custom template then it does not work https://primeng-listbox-demo-bgzdby.stackblitz.io/
Ques: If I would like to add a delete icon with each option using template, which should remove the option from list by clicking delete icon. This also does not work as currently click anywhere on the option row would select/deselect the checkbox.
Ques: Can we fill a list of options to p-listbox with check-box checked values?

Code: Select all


<p-listbox
                    [options]="cities"
                    optionLabel="name"
                    [checkbox]="true"
                    [multiple]="true"
                    [listStyle]="{ 'max-height': '130px' }"
                >
                    <ng-template let-city pTemplate="item">
                        <div class="flex justify-content-between w-full">
                            <div class="flex align-content-center z-4">
                                <label class="flex align-items-center" for="binary">{{ city.name }}</label>
                            </div>
                            <div class="p-2 bg-red-500 border-round-sm z-5">
                                <i class="pi pi-trash text-white" (click)="removeCity(city.name)"></i>
                            </div>
                        </div>
                    </ng-template>
                </p-listbox>

Post Reply

Return to “PrimeNG”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 20 guests