How to add header to the ngbtypeahead window?

I am trying to implement typeahead functionality in Angular. I am using ngbTypeahead from ng-bootstrap for this as shown below.

 <input id="typeahead-template" type="text" class="form-control form-rounded" [ngbTypeahead]="search" [resultTemplate]="rt" [inputFormatter]="formatter"  />

 <ng-template #rt let-r="result" let-t="term">
 <img [src]="'https://upload.wikimedia.org/wikipedia/commons/thumb/'+r['flag']" class="mr-1" style="width: 16px">
 <ngb-highlight [result]="r.name" [term]="t"></ngb-highlight>
 </ng-template>

This is displaying result like

• result1
• result2
• result3

but I want a header to be added and the result should be in the format

• The results are
• result1
• result2
• result3

Can someone please help with this?

This isn't supported by ng-bootstrap's Typeahead component, however you can use CSS to insert text before the results. The only problem with this solution is that you need to use ::ng-deep which is deprecated and likely to be dropped by Angular soon.

Add this to your component's CSS:

::ng-deep ngb-typeahead-window:before {
  content: "The results are:";
}

and you should see the following when results are displayed:

This will prepend the typeahead results with the text specified as the value of the content property.

Please see this StackBlitz for a demo