ngx-bootstrap typeahead with itemTemplate for object

Question

I've built an ngx-bootstrap/typeahead component, which I use in my ngx-formly generated forms. Search results come from an API, I reuse this component for different objects, so the keys are not statically known.

I want my typeahead to get results from my Observable and display the items with my template:

<div class="widget form-group">
  <input id="typeahead-basic"
      type="text" class="form-control" autocomplete="off"
      [formControl]="formControl" 
      [formlyAttributes]="field"
      [typeahead]="search$"
      [typeaheadItemTemplate]="autocompleteItem"
      [typeaheadAsync]="true"      
      />
      <!-- Works with typeaheadOptionField="value.nested" -->
</div>

<ng-template #autocompleteItem let-item="item">
  <span>{{ item.value.nested }}</span>
</ng-template>

And the observable:

search$ = new Observable((observer: Observer<string>) => {
  observer.next(this.formControl.value);
}).pipe(
  tap(v => console.log('Input: ' + v)),
  switchMap(v =>
    of([
      {value: { nested: "foo"}},
      {value: { nested: "bar"}},
      {value: { nested: "foobar"}}
    ])
    //of(['foo', 'bar', 'foobar'])
  )
);

This used to work, but after upgrading some stuff it didn't anymore. Downgrading didn't fix things...

Here is a stackblitz: https://stackblitz.com/edit/angular-h3khea

If you add typeaheadOptionField="value.nested" to the , it works. I've never used that before, but found it in the docs. The only problem is, that it seems like this needs to be a fixed string and I can't load it from my .ts file.

I've also found an example where everything works just like my app used to work: https://stackblitz.com/edit/angular-8t8dcm-kzbw52

I'm not sure what the differences are, but they don't use reactive forms it seems. And I'm not going to downgrade to Angluar 7...

Answer 1

It works with typeaheadOptionField :

You can use it as a "string-setter" and pass a property path or even a method-name (for a method on the search result object):

typeaheadOptionField="my.property"
// or
typeaheadOptionField="myMethod()"

But you can also bind it to a property, by using the right syntax:

[typeaheadOptionField]="propertyInComponent"