Component typeahead not showing template when no result found

[mvecchione]

Just wondering if there is any chance to make typeahead to show a custom template when no result found.

Look in the Template for results example. But i cannot find a way to make it works.

Thanks!

[magomarlon]

I'm not sure if this help, but in my case my search input is for search users, when the typeahead has no result I need show a little form to make a new user register. So I solved the detection of no result with this code in the search Observable:

search = (text$: Observable<string>) =>
    text$
      .debounceTime(300)
      .distinctUntilChanged()
      .switchMap(term =>
          this.playersService.getPlayers().map(result =>{
            let match = result.data.filter(v => new RegExp(term, 'gi').test(v.user.email));
            if (match.length == 0){
              this.showRegister = true; // variable for show form
            }else{
              this.showRegister = false;  // variable for show form
              return match; // in this case return the result
            }

          })
      )

I think tha taking this idea could work in another cases.

[robinvanderknaap]

I've solved this by returning an array with a null value in it if no results are found. (see code example below, specifically the map method)

The result template will receive one result, which contains the null value. You can render a string like 'No results found' if the value is null, which will be shown in the item list. If a user decides to 'select' the 'No results found' item, the ng-model is still set to null, because the value is null.

`search = (text$: Observable) => {

return text$.pipe(
  debounceTime(300),
  distinctUntilChanged(),
  switchMap(searchTerm => searchTerm.length < 2
    ? []
    : this.environmentService.searchAvailablePersons(this.environment.id, searchTerm).pipe(
        map((response)=> {
          return response.length > 0 ? response : [null];
        }),
        catchError(() => {

          return of([]);
        }))
  )
);

}`

[skelesp]

Is this feature (to show a message when results are empty) still not added to ngbTypeahead in ngBootstrap?

This feature is available in ui-bootstrap. Now I'm upgrading my app from angularJS to angular, but it seems I'm losing functionality here...

[vdurante]

@skelesp same issue here. I have simulated an empty typeahead result by returning a single result with a message on my search observable. Have you found a proper solution?

[skelesp]

@vdurante I used the suggestion of @robinvanderknaap to extend my search logic and return [null] when no result is available.

In my results template, I check if the result is null, if it is, I show a message in the results template.