I need my p-dropdown to hide the previously selected option.
For example, I have options A, B, and C. If I previously selected A, only B and C should show up in the dropdown list. Then if I select B, now only A and C should show up.
//component.ts
this.planOptions = [
{ name: 'A'},
{ name: 'B'},
{ name: 'C'}
];
//component.html
<p-dropdown id="plan_option"
[options]="planOptions
[(ngModel)]="selectedPlanOption"
optionLabel="name">
</p-dropdown>
You should create a copy of planOptions that contains only the possible options
TS File
copyOfPlanOption = planOption;
chosenOption: 'A';
const index = copyOfPlanOption.indexOf(chosenOption);
if (index > -1) {
copyOfPlanOption.splice(index, 1);
}
HTML File
<p-dropdown [style]="{'minWidth':'100%', 'width': '100px', 'height':'50px'}" id="plan_option" appendTo="body" [options]="copyOfPlanOption" [(ngModel)]="selectedPlanOption" placeholder=" " optionLabel="name"></p-dropdown>