Angular Reactive form disable specific options in p-dropdown

Issue

Using PrimeNg p-dropdown in component.

<p-dropdown 
 [options]="productRequest"
 formControlName="request"
 optionLabel="ProductName"
 (onChange)="someFunction('request')">
</p-dropdown>

Below is the JSON received from server that is used as [options] in p-dropdown

{ 
 "Increase": true,
 "Decrease" : true,
 "Like" : true,
 "Dislike" : true,
 "Old" : false,
 "Others" : true
}

I need to disable that option against which boolean: false is mentioned. Like while i click on dropdown, i am able to see all options. Now i need to disable that particular option against which boolean: false is mentioned. In above case i should be able to select all options except Old as it has boolean: false against it.

How to do so ?? Thanks in advance..

Solution

To disable specific options using the dropdown component of prime-ng, you must use SelectItem type when constructing your array.

Within the SelectItem type there is a disabled property of type boolean.

This is where you can disable a specific option by setting this property to true.

I have created you a Stackblitz with a working example here:

https://stackblitz.com/edit/primeng-dropdown-demo-m6a6ni

Happy Coding :-)

Answered By - Adamski