Display list items on typing minimum 2 characters for ng-select

Question

I am using ng-select for search in my project. I want the list to be displayed only when the user has typed more than 2 characters. I have tried search, change and open events of ng-select but I am not getting the actual term typed by the user. Any help is appreciated.

Answer 1

The solution for this issue is to give Id for ng-select component by its labelForId property and get this as HTML element in the ts file. If you get value for this HTML element, this will be the term typed by user. And if the term has less than 2 letters, you have to close dropdown using close() event of ngSelect.

component.html file:

<ng-select #Selecter [multiple] = "true" typeToSearchText = "'Please type'" labelForId="ngSelectId" (keyup) = "openDropdown()" (open) = "openLocationsDropdown()"
[items] = "selectOptions"></ng-select>

component.ts file:

@ViewChild('Selecter') ngselect: NgSelectComponent;

openLocationsDropdown() {
         let element = (document.getElementById('ngSelectId') as HTMLInputElement);
             let component = this.ngSelect;
         let term = element.value;
         if (this.term.length < 2){
              component.close();
         }
         element.value = this.term;
  }