How to remove(display : none) disabled options in ng-options of ng-select?

Question

I don't want to display value which have property enabled set to false in the dropdown.

<ng-select placeholder="Select" *ngIf="test.test.type == 'test1'">
        <ng-option *ngFor="let testValue of test.values"
        [value]="testValue"  [disabled]="testValue.enabled === false" >{{testValue.value}}</ng-option>
    </ng-select> 

Above code disables the values which have property enabled set to false. How do I filter the options so as to completely remove the disabled options from dropdown without deleting array items.

Thanks in advance.

Answer 1

Below code worked

.ng-select.custom-class .ng-dropdown-panel .ng-dropdown-panel-items .ng-option.ng-option-disabled {
    display: none !important;
}

Answer 2

You can use CSS. The below code will help you to add the hidden class in your dropdown, and you can hide the values based on the expr provided that has to be evaluated to be true.

<ng-select placeholder="Select" *ngIf="test.test.type == 'test1'">
        <ng-option *ngFor="let testValue of test.values"
        [value]="testValue"  [disabled]="testValue.enabled === false" [class.hidden]="Write an expr for which you need to hide" >{{testValue.value}}</ng-option>
    </ng-select> 

In you component css:

.hidden {
    visibility: hidden;
}