CODEWITHSUNDEEP
angularng-bootstrapbootstrap-typeahead
Mike
Mike

Reputation: 423

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!

Upvotes: -1

Views: 2125

Answers (2)

Florian
Florian

Reputation: 1

The answer https://stackoverflow.com/a/71701804/21160371 does only work when also defining the result template for the ng-bootstrap typeahead

You will need to add [resultTemplate]="rt" to the HTML

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

And then whatever you defined in the respective template (at the bottom of the same HTML file) will be used (see previous suggestion https://stackoverflow.com/a/71701804/21160371)

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

Upvotes: 0

Arams
Arams

Reputation: 199

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

Upvotes: 3

Related Questions