Disable certain ng-template items in p-dropdown

Question

I have a p-dropdown contructed with ng-template (this dropdown presents Languages that can be selected.) I need the languages that have been already selected, to be disabled.

This is my dropdown:

<p-dropdown 
  [styleClass]="'form-control'" 
  [options]="languages" 
  optionValue="languageID" 
  formControlName="languageID" 
  appendTo="body"
  (onChange)="onLanguageChanged(languagesFormGroup, $event.value)">
    <ng-template let-item pTemplate="selectedItem">
      <img src="{{item.icon}}"><span>{{item.name}} {{item.languageID}}</span>
    </ng-template>
    <ng-template let-item pTemplate="item">
      <img src="{{item.icon}}"><span>{{item.name}} {{item.languageID}}</span>
    </ng-template>
</p-dropdown>

I need specific pTemplate="item" to be disabled. I tried with angular's disable, i tried with ng-disable, with ngIf, with [att.disabled]="expression(item)", nothing works.

Is there any way to achieve what I need? Please help.

Thanks a lot in advace

Have you tried the `optionDisabled` attribute? https://primefaces.org/primeng/dropdown — R. Richards, Jun 07 '22 at 17:33
verify if the object in [options]="languages" should have a property as disabled: false or true — Abel Valdez, Jun 07 '22 at 18:46
I have multiple dropdowns (the user can add or delete multiple selected languages). In the beginning there are two drop-downs with "English" and "Greek" selected. I need these two languages to be disabled in the third (added) dropdown so that the user can't select them again — Katia S., Jun 08 '22 at 07:00

score 0 · Answer 1 · answered Jun 08 '22 at 07:24

So I found the correct way to do it. I added a disabled property on my languages collection. I set disabled = true whenever a language is selected and the ng-template does the rest by itself. No further code needed.

Thanx everyone for their suggestions!

Disable certain ng-template items in p-dropdown

1 Answers1