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?
[showClear]="true" OR editable="true"
Please add showClear property or editable property based on your requirement. This works perfectly for your use case
Had to dig into the source code a little to find, since it's not in the documentation, but the updateSelectedOption method did the trick for me. None of the other answers worked in our case. We have a "custom" option (opens a calendar selection tool), which needed to be selectable every time.
template:
<p-dropdown #dateDropdown [options]="dateOptions" [(ngModel)]="selectedDate"></p-dropdown>
<button (click)="clearSelection(dateDropdown)"></button>
component:
clearSelection(dropdown) {
dropdown.updateSelectedOption(null);
}