Angular matTooltip呈现为纯文本

Question

I am iterating through a JSON document in angular 7, where each iteration object has a sentence and a list of words. Then, I'm trying to add a tooltip for each of the matched words in the sentence using the following method,

let sentence = ''';
addTooltip(word: string){
    let updatedWord = '<span matTooltip="word decription">'+word+'</span>';
    return this.sentence.replace(new RegExp(word, 'gi'), updatedWord);
}

In HTML, instead of rendering the updated words as tooltip, its just showing the full span tag in plain text, like this,

<span matTooltip="word decription">word</span>

But When I'm placing the same line directly in HTML, its perfectly showing the tooltip.

Do I need to add any additional code in the typescript or css in order to make it work?

Answer 1

As I can understand you want to add HTML markup from component to template.

For that you can bind to it and apply the markup with something like this in your template using innerHTML property

<div [innerHTML]="sentence"></div>

Hope this helps you :)