How to use a custom template in ng-bootstrap typeahead?

1.7k Views Asked by At

Here is the ng-bootstrap typeahead code:

<div class="col">
  <input
    id="typeahead-config"
    type="text"
    class="form-control"
    [(ngModel)]="model"
    [ngbTypeahead]="search"
    formControlName="searchText"
    [resultFormatter]="formatted"
    [inputFormatter]="formatter"/>
</div>

How do make changes to this dropdown?

enter image description here

I need to add a custom<b>{{item.somevalue}}</b> tags to that dropdown. Thank you!

1

There are 1 best solutions below

1
Arams On BEST ANSWER

@skouch2022 is right.

<ng-template #rt let-r="result" let-t="term">
   your somevalue: <b>{{r['id']}}</b> <-- your b or i tag
   <ngb-highlight [result]="r.name" [term]="t"></ngb-highlight>
</ng-template>