PrimeNG dropdown - disable certain SelectItems

Question

Is there an option to disable some of PrimeNG\'s dropdown items (SelectItems)?

I notice this discussion, is something changed?

Answer 1

You can also disable any item in primeng dropdown using ng-template, click event and custom style as below:

    cars: any[];
    selectedCar: string;

1. Initialize the cars array of object that is essential an extension of Interface SelectItem with added property disabled: boolean

   ngOnInit(): void {
    this.cars = [];
    this.cars.push({label: 'Audi', value: 'Audi'});
    this.cars.push({label: 'BMW', value: 'BMW'});
    this.cars.push({label: 'Fiat', value: 'Fiat', disabled: true});
    this.cars.push({label: 'Ford', value: 'Ford'});
    this.cars.push({label: 'Honda', value: 'Honda', disabled: true});
    this.cars.push({label: 'Jaguar', value: 'Jaguar'});
    this.cars.push({label: 'Mercedes', value: 'Mercedes'});
    this.cars.push({label: 'Renault', value: 'Renault'});
    this.cars.push({label: 'VW', value: 'VW'});
    this.cars.push({label: 'Volvo', value: 'Volvo'});
   }
   

2. Method that gets triggered on click event

   onClick(disabled: boolean) {
           if(disabled) {
               event.stopPropagation();
           }
       }
   

3. Customizing the Primeng Dropdown using ng-template and adding ng-style

   
           
               
   
                   
    {{option.label}} 
               
           
       
   

Credit: ogousa (primeng forum)