Primeng - How to add a button inside the header of a multi-select/dropdown?

Question

I would like to add a button somewhere inside the header of the multiselect component so user can click that button instead of relying on the onChange event of the multiselect component.

On the documentation, there are only a couple of pre-defined directive.

pTemplate="selectedItems" and pTemplate="item" to edit the template. How to i add custom html aside from those two. I would like to add the button besides the search input form?

Answer 1

I think you cannot override the component's Html, however you can play a workaround, copy these files in your project, change their html so it will suits you and then change your imports from the primeng dependency to that customized component.

Answer 2

You can use the p-footer or p-header component to include buttons in the header or int the footer of a p-multiSelect element. The p-footer and p-header components are a part of the PrimeNG library that allows you to add custom content.

Here is an example of how you can use the p-footer component to include buttons in the footer of a p-multiSelect element:

<p-multiSelect
  [options]="options"
  optionLabel="name"
>
  <p-footer>
    <div class="flex justify-content-between p-1">
      <button pButton pRipple type="button" label="Save" icon="pi pi-save" class="p-button-outlined p-button-sm"></button>
      <button pButton pRipple type="button" label="Reset" icon="pi pi-refresh"
              class="p-button-outlined p-button-sm"></button>
    </div>
  </p-footer>
</p-multiSelect>

you can check this Demo