I need to hide the option list of ng-select if the list is empty. Now if I click on the select box, or the searched result is empty, then option list with this No items found
values is displaying. I don't need this feature. Instead I need to hide the option list.
<ng-select class="selectable_input" placeholder="PLZ / Ort" [searchable]="true" [searchFn]="customSearch" (search)="searchLocation($event.term)" (clear)="clearLocationList()" (change)="setLocation($event)" formControlName="location" required>
<ng-option *ngIf="isLocationLoading else noLoader" [disabled]="true"><i class="fa fa-spinner fa-spin"></i> Loading...</ng-option>
<ng-template #noLoader>
<div *ngFor="let locations of locationList">
<ng-option *ngFor="let location of locations" [value]="location">{{location?.zip}} {{location?.place}}
</ng-option>
</div>
</ng-template>
</ng-select>
You can use [isOpen]
attribute inside <ng-select>
tag to achieve your goal as follows:
[isOpen] = "!locationList.length? false : null"
This will prevent the dropdown list to be opened if there are no items in it.
Another option is to change the displaying text itself with something suitable for your application or even set it to an empty string using notFoundText
attribute inside the <ng-select>