Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
2.6k views
in Technique[技术] by (71.8m points)

angular - PrimeNG dropdown - disable certain SelectItems

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

I notice this discussion, is something changed?

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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 essentially 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

     <p-dropdown [options]="cars" [(ngModel)]="selectedCar" [style]="{'width':'150px'}">
             <ng-template let-option pTemplate="item">
                 <div>
                     <div (click)="onClick(option.disabled)" [ngStyle]="option.disabled? {'color': '#ccc', 'cursor': 'default'} : ''"> {{option.label}} </div>
                 </div>
             </ng-template>
         </p-dropdown>
    

Credit: ogousa (primeng forum)


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...