Hide option list if list is empty in ng-select

user_6643372 0
Viewed 1253

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>

enter image description here

angular-ngselect angular
2 Answers

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>

user_94645940

Wrap it into a div and use ngIf to hide it in case the list has no items

user_75195230
Related