NgbTypeahead not showing dropdown

Issue

I'm trying to use ng-bootstrap's NgbTypeahead, but it's not showing the dropdown with the options.

I'm quite sure I'm doing something wrong, once after the search, my input element shows ng-reflect-ngb-typeahead="function (text) { as an attribute, as if it's not recognising the search function somehow.

My code in component.ts:

search = (text: Observable<string>) => {
    return text.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      map(term => {
        console.log(this.livros.filter((v) => v.titulo.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10));
        term.length < 3 ? [].slice() : this.livros.filter((v) => v.titulo.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10);
      })
    );
  }

Excerpt from component.html:

<div class="row">
  <div class="col-md-12">
    <label for="livro-search">Digite o t&iacute;tulo do livro</label>
    <input id="livro-search" type="text" class="form-control" [(ngModel)]="model" [ngbTypeahead]="search">
  </div>
</div>

The livros field is populated when ngOnInit is ran so it's not empty when I try to search.

The console outputs the resulting array correctly, so I know the search function should be working. But I'm not being able to fill the component with the response.

I'm using:

• Angular 6.1.0
• Bootstrap 4.1.3
• ng-bootstrap 3.3.0

If anyone could shed a light on where I'm failing I would be eternally grateful (well, at least for the end of the year).

Solution

Your map function doesn't return anything.

search = (text: Observable<string>) => {
    return text.pipe(
      debounceTime(200),
      distinctUntilChanged(),
      map(term => {
        console.log(this.livros.filter((v) => v.titulo.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10));
        return term.length < 3 ? [].slice() : this.livros.filter((v) => v.titulo.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10);
      })
    );
  }

Answered By - Adrian Brand