open NgbTypeahead dropdown when click event on button - focus

Question

I need to simulate focus event on input to open NgbTypeahead dropdown , is it possible? Because i cant do it like:
.ts:
#ViewChild('inputExecutor') inputExecutor: ElementRef
focus$ = new Subject<string>();
click$ = new Subject<string>();
focused(){
this.executorForm.controls['executor'].setValue('');
this.focus$.next(this.executorForm.value.executor);
}
inputFocus(){
this.inputExecutor.nativeElement.focus();
}
html:
<input
class="choose-executor-input"
type="text"
name="executor"
formControlName="executor"
[ngbTypeahead]="searchExecutors"
(focus)="focus$.next($event.target.value); focused()"
(click)="click$.next($event.target.value);"
(selectItem)="itemSelected($event)"
[resultFormatter]="formatExecutors"
[inputFormatter]="formatExecutors"
#instance="ngbTypeahead"
#inputExecutor/>
<button
click)="inputFocus()"
class="btn btn-executor-open"></button>
</button>
So how i can focus on input to open dropdown? Any issues?

Answer 1

To accomplish this, you can fire an input event on the input element the NgbTypeahead is bound to, then call the focus method so that the input has focus and you can start typing immediately.
I started with the Open on focus demo from the ng-bootstrap website, and made the following changes:
Declare a new template variable elem so the DOM element is accessible inside the component TS file (note you can't use the existing instance as that is an NgbTypeahead not an HTML element):
Component HTML:
<input
id="typeahead-focus"
...
#instance="ngbTypeahead"
#elem
/>
Component TS:
#ViewChild('elem') elem: ElementRef;
Add a button to the template which will call a focus function - this is the button that when clicked will open the typeahead and focus on it:
<button (click)="openTypeahead()">Open Typeahead</button>
Add an openTypeahead function in the component TS file as follows:
public openTypeahead(): void {
// Dispatch event on input element that NgbTypeahead is bound to
this.elem.nativeElement.dispatchEvent(new Event('input'));
// Ensure input has focus so the user can start typing
this.elem.nativeElement.focus();
}
Please see this Stackblitz for a demo

Answer 2

I use
HTML:
<input #instance="ngbTypeahead" .../>
<button (click)="openTypeahead(instance)">Open Typeahead</button>
TS:
openTypeahead(inp) {
inp._elementRef.nativeElement.value = '';
inp._elementRef.nativeElement.dispatchEvent(new Event('input'));
inp._elementRef.nativeElement.focus();
}