ngbTooltip: custom tooltip with markup from component

[Diego B. Rey]

Hi, I'm new in Angular.

I need to display a tooltip (I'mu sing NgBoostrap). Cunrrently I'm using something like this in the view:

                            <h6 class="mb-1" placement="right" [ngbTooltip]="tipContent" container="body">{{oferta.preferido}}</h6>

                            <ng-template #tipContent>{{oferta.termino}}</ng-template>

Ok, it semms trivial, but now I have been asked to show some words  of oferta.termino between <strong>word</strong>. The component would be responsible to determine dinamically which words have to be in bold..

Basically I have to generate in the component a string embeded in html.

The issue is what tooltip shows me literally text with markup instead of a text with almost a word in bold. Ie: 'Hello I'm <strong>Richard</strong>' instead of 'Hello I'm Richard'

In addition I've tried to replace <ng-template> with a regular div (or span) and using [innerHTML]="oferta.termino" and I could see the correct string without markup but can't get any word in bold after browser render the tooltip.

Any suggestion is welcome

TIA

Diego