ngx-bootstrap: Typeahead , Error expecting Observable

Question

Getting this Error when ever I type more 3 characters in input box.

TypeError: You provided an invalid object where a stream was expected. You can provide an Observable, Promise, Array, or Iterable.

.html file :

<input class="form-control"
           type="text"
           [typeahead]="dataSourceObservable"
           typeaheadOptionField="address1"
           typeaheadGroupField="city"
           [typeaheadMinLength]="3"
           (typeaheadOnSelect)="setAddress($event)"
           id="{{componentId}}"
           maxlength="100"
           allowedPattern="^[a-zA-Z0-9\s\.\-\#]*$"
           appPatternRestrict
           [formControl]="componentFormControl"
           [(ngModel)]="quoteReference[jsonField]"
           [typeaheadOptionsLimit]="20"
           [appDisableControl]="componentDetails.locked"
           placeholder=" "
    />

.ts file :

public dataSourceObservable: Observable<any>;


  constructor(public quoteDataService: QuoteDataService, public addressPrefillService: AddressPrefillService, public store$: Store<State>) {
    super(quoteDataService, store$);
    // Required for type ahead for values, do not remove unless thoroughly tested.
    this.dataSourceObservable = Observable.create(() => {})
  }


  ngOnInit() {
    this.componentFormControl.valueChanges
      .subscribe(value => {
        let address = null;
        this.store$.pipe(select(currentQuote)).pipe(take(1)).subscribe(val=>{
          if(val ) {
            if(val.garageAddress) {
              address = val.garageAddress;
            }
          }
        });
        if (address && address.zipCode !== null) {
          let request = {
            "zipCode": address.zipCode,
            "addressLine1": value
          };
          this.dataSourceObservable = this.addressPrefillService.prefillAddress(request);
        }
      });
  }

Expected Behaviour Error In Console

Answer 1

The version of ngx-bootstrap your using might affect the error your getting so first things first, make sure your using the latest version

The error only appears after 3 characters because of the [typeaheadMinLength]="3" property in your template, once the 3rd character is entered it will then try to update the bound value.

The typeahead does not have to be an Observable, taken from the ngx-bootstrap docs :

options source, can be Array of strings, objects or an Observable for external matching process

So for the purpose of testing/dev it would be easier to use a simple Array like ["one", "two", "three"] instead of an empty Observable for your components dataSourceObservable property (their first example does this).

As for the error your receiving, it looks like your not using an actual Observable object, the Observable.create method must not actually return an Observable as the Typeahead expects, causing the error.

I'm not sure what library that Observable object is coming from in your code but I'll assume it's rxjs , possibly an older version, in versions 6+ there are different ways of creating an Observable, one way:

import { of } from 'rxjs';
of({}); // Makes Observable with empty object as data

I'd suggest reading up on rxjs basics in the Angular docs - https://angular.io/guide/rx-library