Disable certain ng-template items in p-dropdown

1.8k Views Asked by At

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

1

There are 1 best solutions below

0
Katia S. On

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!