ngx-bootstrap typeahead select from ngrx store

Question

I am trying to select my data from ngrx store to pass it to ngx-bootstrap typeahead. My selector from the store is working but i don`t know how i can connect it to the typeahead from ngx.

My code is the following:

constructor(private store: Store) {
    this.dataSource = new Observable((observer: Subscriber<string>) => {
      observer.next(this.tourNr);
    }).pipe(
      mergeMap((tourNumber: string) => {
        return this.store.select(getTourByTourNr, { tourNr: tourNumber});
      })
    );
  }

I think i am missing a key concept here. What i want to achieve is that the select from the store returns me my actual data but it actually returns the following:

Store {_isScalar: false, actionsObserver: ActionsSubject, reducerManager: ReducerManager, source: Store, operator: DistinctUntilChangedOperator}

So i don`t know how to return the actual data from the store to return it. Maybe someone can push me in the right direction.

score 0 · Answer 1 · answered Jun 30 '20 at 09:00

I just found the answers in the docs: https://valor-software.com/ngx-bootstrap/#/typeahead#async-http-request

Missed it at first. Here my implementation which works:

this.dataSource$ = new Observable((observer: Observer<string>) => {
      observer.next(this.tourNr);
    }).pipe(
      switchMap((query: string) => {
        if (query) {
          return this.store.select(getTourByTourNr, { tourNr: query }).pipe(
            map((data: any) => {
              console.log(data);
              return data || [];
            }),
            tap(
              () => noop,
              (err) => {
                // in case of http error
                this.errorMessage =
                  (err && err.message) || 'Something goes wrong';
              }
            )
          );
        }

        return of([]);
      })
    );

ngx-bootstrap typeahead select from ngrx store

1 Answers1