add an observable for isPopupOpen for ngb-typeahead

[ganqqwerty]

NgTypeahead has a method isPopupOpen(): boolean that allows us to understand if the typeahead popup is open.

The problem with this method is that it's synchronous. In some cases we want to react on the popup being opened or closed.

For that I suggest to implement an observable that will hold the state of the popup like so:

/// class NgbTypeahead
popupOpen: Observable<boolean>; // can also be EventEmitter

this way the user will be able to subscribe to the stream of booleans like so:

/// my component
class MyComponent {
  @ViewChild(NgbTypeahead) ngbTypeahead: NgbTypeahead;
  ngAfterViewInit() {
    this.ngbTypeahead.popupOpen.subscribe(open => {
        console.log('popup changed its state to ', open)
     })
  }

[ganqqwerty]

Even more powerful option would be to expose the currently shown options:

/// class NgbTypeahead
optionsShown:Observable<Array> | null; //null indicates that the the typeahead window is not opened. If the typeahead is opened, we will see an array of the currently shown options. 

this way the user will be able to subscribe to the stream of arrays like so:

/// my component
class MyComponent {
  @ViewChild(NgbTypeahead) ngbTypeahead: NgbTypeahead;
  ngAfterViewInit() {
    this.ngbTypeahead.optionsShown.subscribe(optionsShown => {
        if (optionsShown===null) console.log('the options window is now closed')
        else console.log('currently shown options:', optionShown)
     })
  }

[IAfanasov]

To have the list of options show one can pipe into suggestions observable.

<input type="text" [ngbTypeahead]="find" />

find = this.fetchDataFromBackEnd()
.pipe(tap(results => this.showedOptions = results))
.subscribe();

My mind can not come up with a nice scenario when isPopupOpened event is useful. If @maxokorokov or @pkozlowski-opensource approves it, I can implement.

@ganqqwerty if you can provide justification for this feature, I suppose for the rulers of ng-bootstrap it would be easy to decide if it needed to add this feature into the code base.

[agustinhaller]

@IAfanasov I believe this feature will improve the customizability of the typeahead component.

In particular I'm working on this UI, and I would find this feature super useful to style my component accordingly (when the typeahead is opened / closed).

Based on your suggestion, currently I'm using an RxJs subject that taps on the search Observable and emits false when there are no results (no results => the typeahead should be closed) and true when there are (has results => the typeahead should be opened).
This workaround misses the cases when the user loses focus on the input or when the user selects a result or when the user press the escape key.
In all of those scenarios, the Typeahead gets destroyed but the search results array does not get cleaned up (thus, no chance to tap into the search Observable to infer the state of the observable based on the results returned).

Having an observable to hold the state of the popup would be a cleaner solution IMO.

@maxokorokov, @pkozlowski-opensource would you consider approving this feature request?

[duhamaher]

this would be a very helpful feature, especially if we want to customize typeahead window in case no results come from api or so; for example display no results found to the user