Angular2/4 typeahead that supports objects and custom templating?

Question

I have the following:

[{'title':'Book Title', 'author':'author, 'type':'book'},{'title':'Btitle', 'author':'Bauthor', 'type': 'book'},{'title':'Movie Title', 'author': 'Director', 'type': 'movie'}]

I want to have an input field (text) I can use to type and display a typeahead. Ive tried:

ng2-completer - Supports objects, but does not support custom templates in what is previewed.

ngx-bootstrap - Does not support objects, but does support custom templates.

All I want is to be able to have a typeahead feature with my input field with custom templates that use custom values depending on the type of data it is. How can I do this? Or is there something out there for angular2/4 that supports this?

Answer 1

You can try to use PRIME NG autocomlete component, it supports objects and templating, works both with ngModel and reactive forms.

Here is Prime NG's official example:

<p-autoComplete [(ngModel)]="brand" 
                [suggestions]="filteredBrands" 
                (completeMethod)="filterBrands($event)">
  <ng-template let-brand pTemplate="item">
    <div class="ui-helper-clearfix" style="border-bottom:1px solid #D5D5D5">
      <img src="assets/showcase/images/demo/car/{{brand}}.png" style="width:32px;display:inline-block;margin:5px 0 2px 5px"/>
      <div style="font-size:18px;float:right;margin:10px 10px 0 0">{{brand}}</div>
    </div>
  </ng-template>
</p-autoComplete>