Search code examples
angularprimeng

PrimeNg DropDown - User can't clear the value

I'm implementing primeNg dropdown component in my Angular2 application.

<p-dropdown [options]="listCustomers_itm" placeholder="Selezionare" [(ngModel)]="Customer_itm" [ngModelOptions]="{standalone: true}" [style]="{'width':'225px'}" filter="filter"  (onChange)="onCustomerSelect($event.value)">
</p-dropdown>

All works fine except one annoing thing:

Once time the user has selected an option, he can't clear the selected value...

Can you help me?

Solution

  • To fix this, I had to set a placeholder for the dropdown. The code I used is something like:

    template.html

    <p-dropdown ...
            placeholder="Select"
            #dropDownThing></p-dropdown>

<button (click)="onButtonClick()"></button>

    component.ts

    import { Dropdown } from "primeng/components/dropdown/dropdown";
...
@ViewChild('dropDownThing')
dropDownThing: Dropdown;
...
onButtonClick() {
    this.dropDownThing.value = <someValueNotInTheDropdown'sList>;
}
...

    When the code above is run without a placeholder, the currently-selected option remains selected.

    When the code above is run with a placeholder, the dropdown's value changes to the provided placeholder.