Ngx-bootstrap: How to use same typeahead on multiple fields

Created on 25 Feb 2017 · 4Comments · Source: valor-software/ngx-bootstrap

Hi, I am able to use the typeahead module on single field by creating an Observable and subscribing to it using a service. However not entirely sure how to use the same Observable for multiple form fields?

For instance i have 3 input fields on which i want to provide the same autocomplete options.

My TS file:

  private supplierName1: string = '';
  private supplierName2: string = '';
  private supplierName3: string = '';
  private suppliersListAutoComplete1: Observable<any>;
  private suppliersListAutoComplete2: Observable<any>;
  private suppliersListAutoComplete3: Observable<any>;


  constructor(
    private supplierService: SupplierService
  ) { 
    this.suppliersListAutoComplete1 = Observable.create((observer: any) => {
      this.supplierService.getSuppliersList(this.supplierName1).subscribe((result: any) => {
        observer.next(result);
      })
    });

    this.suppliersListAutoComplete2 = Observable.create((observer: any) => {
      this.supplierService.getSuppliersList(this.supplierName2).subscribe((result: any) => {
        observer.next(result);
      })
    });

    this.suppliersListAutoComplete3 = Observable.create((observer: any) => {
      this.supplierService.getSuppliersList(this.supplierName3).subscribe((result: any) => {
        observer.next(result);
      })
    });
  }

Anyway i can optimize this code?

comp(typeahead) question

Source