angularng-bootstrapbootstrap-typeahead

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


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!


Solution

  • @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>