Open select from ts (angular, ng-select)

Question

I have several ng-selects on a page, and am trying to open one from ts.

I am able to focus on the right ng-select using the following:

@ViewChildren(NgSelectComponent) ngselect: QueryList<NgSelectComponent>;
this.ngselect.last.filterInput.nativeElement.focus()

However, I'm not able to open. I tried the below

this.ngselect.last.filterInput.nativeElement.open() 

but get the error:

_this.ngselect.last.filterInput.nativeElement.open is not a function

.open() is a method though...how can I get this to work? https://github.com/ng-select/ng-select#methods

Rotberg

Answer 1

Have You tried something like this

<ng-select #Selecter ></ng-select>

@ViewChild('Selecter') ngselect: NgSelectComponent;

ngAfterViewInit() {
  this.ngselect.open();
}

Working Example Links To stackblitz

Breakaway

Thanks, though that gives the same error that I have above. – Rotberg

Updated my answer with a link to a live example on stackblits – Breakaway

Answer 2

There's a far easier way to achieve what you want. If you check the documentation (found here: https://github.com/ng-select/ng-select#api), you'll find you can pass isOpen to ng-select. Changes to the value of isOpen passed to the right ng-select would open and close it automatically.

Example:

<ng-select
  [isOpen]="isOpen"
  [items]="items"
>
</ng-select>

and in the component class, you can simply change isOpen and that would open and close the select.

Moneylender

Thank you for your help, though I believe that ends up making it a lot more complicated. Changing isOpen to true makes it so that it won't close (false so that it won't open). That means I need to also listen for changes. Since there are multiple selects, I also have to create an array of isOpen to specify the right one. – Rotberg

Answer 3

You may also need to open it in your test file, for when you want to check items in the DOM, etc:

1. Create a file and add this (or add to an existing file if you prefer)

import { DebugElement } from '@angular/core';
import { ComponentFixture } from '@angular/core/testing';
import { By } from '@angular/platform-browser';

/*
* Utils based on ng-select helper functions:
  https://github.com/ng-select/ng-select/blob/3018a1098ba2ad06fbdf4dfe60209087cbd68185/src/ng-select/testing/helpers.ts
*/
export function getNgSelectElement(fixture: ComponentFixture<any>): DebugElement {
    return fixture.debugElement.query(By.css('ng-select'));
  }

export function triggerKeyDownEvent(element: DebugElement, which: number, key = ''): void {
  element.triggerEventHandler('keydown', {
      which: which,
      key: key,
      preventDefault: () => { },
  });
}

2. Import the functions into your test file and use them like this:

// Open the dropdown
triggerKeyDownEvent(getNgSelectElement(fixture), 32);
fixture.detectChanges();

Accost

You can use the variable selector in the template and run ngAfterViewInit manually in your test, but this may be a little too verbose to add to add of your ng-select usages, just to test it. – Accost

Answer 4

Use [isOpen]

I want to add some explanation to the answer provided above

ng-select has an option to trigger its opening with [isOpen]="shouldOpenSelect"

Functions you need to define

// .ts file

isAfterFirstOpen = false;

onClickSelect() {
  if (this.isAfterFirstOpen) {
    this.shouldOpenSelect = !this.shouldOpenSelect;
    return;
  }
  this.shouldOpenSelect = true;
  this.isAfterFirstOpen = true;
}

onBlurSelect() {
  this.shouldOpenSelect = false;
  this.isAfterFirstOpen = false;
}

onFocusSelect() {
  this.shouldOpenSelect = true;
}

onChangeSelect() {
  this.shouldOpenSelect = false;
}

And

// html file

<ng-select
  [(ngModel)]="value"
  (blur)="onBlurSelect()"
  (change)="onChangeSelect()"
  (focus)="onFocusSelect()"
  (click)="onClickSelect()"
  [isOpen]="shouldOpenSelect"
>
</ng-select>

Participate