CODEWITHSUNDEEP
angular
Ben
Ben

Reputation: 16699

innerHtml and directives in angular 5

I am including html-content that contains angular-font-awesome <fa> tags into my .html file by using <div [innerHtml]="fa-containing-content">.

My problem is that the fa tags do not get converted into i tags, so no icon is shown. I suspect that the code that converts fa into the actual icon is not run after the inclusion, but I don't know how to address it.

To be clear, angular-font-awesome works fine for me otherwise. The problem only appears when I have the fa tags inside the content that is included via innerHtml.

ATTEMPT 1:

test: string ="<fa name='heart'></fa>"; <div class="test" [innerHtml]="test"></div>

OUTPUT:

<div _ngcontent-c1="" class="test"></div>

ATTEMPT 2: Using safeHtml pipe

test: string ="<fa name='heart'></fa>"; <div class="test" [innerHtml]="test | safeHtml"></div>

OUTPUT:

<div _ngcontent-c1="" class="test"><fa name="heart"></fa></div>

The problem remains that the <fa> tag is not converted, i.e. the <i> is not being inserted by angular-font-awesome.

How can I get angular-font-awesome to run over this again after the innerHtml has been included?

Upvotes: 4

Views: 5087

Answers (1)

Zze
Zze

Reputation: 18865

Unfortunately you just can't have an angular component generate after the html processing stage. The html is generated at run time, as is that inner html injection so the component will never detect that it has been injected.

Maybe you could try something like..

public applyFA: boolean = true;

<div class="test"><fa *ngIf="applyFA" [name]="'heart'"></fa></div>

At least then the fa component should be generated correctly into the template.

Upvotes: 1

Related Questions