How can I add html element with string interpolation in angular?

Question

How can I add a html element dynamically using string interpolation without add any html tag? Exp:

This is my obj in my component

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

I want to add this like;

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

{{myObj.icon}} rendered as text, but I want render as html. How can?

I want the result to be as follows

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

and if I change my obj like this;

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

render as

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

Possible duplicate of [Angular HTML binding](https://stackoverflow.com/questions/31548311/angular-html-binding) — ConnorsFan, Oct 19 '18 at 13:29

Sunil Singh · Answer 1 · 2019-07-29T13:30:30.213

6

You can leverage innerHTML

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

Note : I have used to segregated the elements however you can pick any element as per your design.

edited Jul 29 '19 at 13:30

answered Oct 19 '18 at 13:54

Sunil Singh

thanks but i want to make it without adding any html tag as span – midstack Oct 19 '18 at 13:57
1

Use DomSanitizer or DomSanitizationService – Sunil Singh Oct 19 '18 at 14:04
@SunilSingh could you give us an example usage of `DomSanitizer` in this context? – LppEdd Jul 29 '19 at 12:53