Отображение строки с HTML-тегами в Angular 4+

Очень часто разработчики сталкиваются с задачей, когда необходимо отобразить строку, включающую HTML-теги, в Angular 4+. Допустим, есть следующая строка:

let str = "<p><em><strong>Пример</strong></em></p>";

При попытке вывести данную строку в HTML с использованием обычной интерполяции, как показано ниже:

{{str}}

Результатом будет просто отображение самой строки, включая HTML-теги:

<p><em><strong>Пример</strong></em></p>

Но что делать, если необходимо, чтобы текст «Пример» отображался полужирным и курсивом, а не просто текстом с тегами?

Для решения этой проблемы в Angular предусмотрен специальный атрибут innerHTML. Он позволяет интерпретировать содержимое строки как HTML-код и отображать его соответствующим образом.

Вот как должен выглядеть код для решения этой задачи:

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

Теперь строка будет отображаться в виде HTML-кода, и текст «Пример» будет выведен полужирным и курсивом, как и было задумано.

Однако стоит помнить, что использование innerHTML может быть потенциально опасным, так как это может привести к атакам типа Cross Site Scripting (XSS). Поэтому необходимо всегда быть уверенным в том, что содержимое строки безопасно для отображения.

В этом примере использовалась простая строка, но подход будет работать и для строк, полученных динамически.