Search code examples
angulartypeaheadng2-bootstrap

Angular 2 - Ng2-Bootstrap: custom complex template typeahead implementation

I have a problem with the ng2-bootrstrap typeahead implementation. I've created a plunker to show the issue.

https://plnkr.co/edit/SDgkXLA2RWIjGTjJ02E6?p=preview

<template #customItemTemplate let-model="item" let-index="index">
    <h5>This is: {{model | json}} Index: {{ index }}</h5>
</template>

<input [(ngModel)]="customSelected"
    [typeahead]="statesComplex"
    [typeaheadItemTemplate]="customItemTemplateComplex">

<input [(ngModel)]="selected"
    [typeahead]="states"
    [typeaheadItemTemplate]="customItemTemplate">

I want to use 'complex' data (means objects to query not simple strings) for the typeahead and show them in a custom template. The problem is, that the values showing up in the list of results are not correct. For example if I type 'a' in the typeahead on the custom complex typeahead nothing shows up. If I type 'a' in the simple custom typeahead there are showing up the results 'Alabama', 'Arizona'.. everything that includes an 'a' and I want the same result for the custom complex typeahead.

Is it an error in the ng2-bootstrap or am I missing something?

Solution

  • I investigated your problem and it appears that your solution looks very simple.

    Just add typeaheadOptionField property to your complex component

    <input [(ngModel)]="customSelected"
       [typeahead]="statesComplex"
       [typeaheadItemTemplate]="customItemTemplateComplex"
       typeaheadOptionField="name">

    Plunker Example