Угловое отображение matTooltip в виде простого текста

Question

Я перебираю документ JSON на угловом 7, где у каждого итерационного объекта есть предложение и список слов. Затем я пытаюсь добавить всплывающую подсказку для каждого совпавшего слова в предложении, используя следующий метод,

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

В HTML вместо рендеринга обновленных слов в виде всплывающей подсказки, он просто показывает тег полного диапазона в виде простого текста, например,

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

Но когда я помещаю ту же строку прямо в HTML, она прекрасно показывает всплывающую подсказку.

Нужно ли добавлять какой-либо дополнительный код в машинописный текст или CSS, чтобы он работал?

Answer 1

Как я понимаю, вы хотите добавить HTML-разметку от компонента к шаблону.

Для этого вы можете привязать к нему и применить разметку с чем-то вроде этого в вашем шаблоне, используя свойство innerHTML

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

Надеюсь, это поможет вам:)