hide an option based on some condition-CodePudding

I want to hide an option from ng-option based on some condition. I tried using [hidden] attribute on ng-option but it didn't work.

<ng-select [hideSelected]="true" [loading]="isLoading" [multiple]="true"
                           [(ngModel)]="selectedIds" [closeOnSelect]="false"
                           #selectedNames="ngModel" required
                           placeholder="{{'Names' | translate}}" [clearable]="true">
                    <ng-option *ngFor="let name of names" [value]="name.id">{{name.Label}}</ng-option>
</ng-select>

CodePudding user response：

You can use ng-container apply *ngFor to iterate over names and *ngIf on ng-option to apply the condition.

This is needed because it's not allowed to use multiple structural directives (such as *ngIf, *ngFor, etc) on an element.

<ng-container *ngFor="let name of names">
    <ng-option *ngIf="someCondition"  [value]="name.id">{{name.Label}}</ng-option>
</ng-container>

CodePudding user response：

try *ngIf in ng-option, and in ts file give some condition true or false, like

<ng-option *ngIf="isDisplayedCondition" [value]="name.id">{{name.Label}}</ng-option>