Как я могу добавить элемент HTML с интерполяцией строк в угловых?

Question

Как я могу динамически добавить элемент html, используя интерполяцию строк без добавления тега html ?Exp:

Это мой объект в моем компоненте

myObj = {
    title: 'Header Title',
    icon: '<i class="fa fa-user">'
}

Я хочу добавить это как;

<header>
    {{myObj.title}} - {{myObj.icon}}
</header>

{{myObj.icon}}, отображаемый как текст, но я хочу сделать как HTML.Как можно?

Я хочу, чтобы результат был следующим:

<header>
    Header Title <i class ="fa fa-user"></i>
</header>

, и если я изменю свой объект следующим образом:

myObj = {
    title: 'Header Title',
    icon: '<mat-icon>search</mat-icon>'
}

отобразим как

<header>
    Header Title <mat-icon>search</mat-icon>
</header>

Answer 1

Вы можете использовать innerHTML

<header>
    <span>{{myObj.title}}</span> - <span [innerHTML]="myObj.icon"></span>
</header>

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