Hide option list if list is empty in ng-select-CodePudding

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  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 ></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>

CodePudding user response：

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>

CodePudding user response：

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