Search code examples
angularprimeng

Dropdown filter does not filter the value or if it filters showing the object instead of value

I am using primeng version 16.9.1, and using the dropdown component in our project.

As mentioned in document, we should use the [filter]="true" property. If we use this property, throwing the following error option.toLowerCase is not a function. Resolve this issue we must include the filterBy and optionLabel properties, but if I add those properties instead of the selecting the value it is selecting the object (key value) pair.

How to use the [filter] along with selecting only the value

I added the code here

Solution

  • You have to use optionValue to make it populated only the 'value' field.

    <p-dropdown
    [options]="cities"
    [(ngModel)]="selectedCity"
    [showClear]="true"
    [filter]="true"
    filterBy="label"
    optionLabel="label"
    optionValue="value"
    placeholder="Select a City"
  ></p-dropdown>

    Stackblitz Demo