Show variable or HTML in div?


#1

I’m trying to do this, it works if its text I’m showing, but not if I’m showing the font-awesome icon. How can I get it to render HTML instead?

<div>{{ aAvailListItem.qty || '<i class="fa fa-plus-circle"></i>' }}</div>


#2

Use structural directives.

<fa-icon *ngIf="aAvailListItem.qty" [icon]="plusCircleIcon"></fa-icon>

#3

Thanks but I didn’t add Font Awesome in a way that supports this [icon] thing. I get a runtime error “Template parse errors: Can’t bind to ‘icon’ since it isn’t a known property of fa-icon”.

Any way to just get it to parse HTML? I’m surprised this is so difficult.


#4

You should, because it will make a huge difference in your app binary size, as you will only include the icons you are actually using, instead of the entire huge set. Docs here.

It’s deliberately difficult for both security and performance reasons. You really want to be using structural directives here, not interpolation kludgery.


#5

I just did this, good enough.

           <div>
              <div *ngIf="aAvailListItem.qty > 0; then showValue; else showPlusIcon"></div>
              <ng-template #showPlusIcon><i class="fa fa-fw fa-plus-circle"></i></ng-template>
              <ng-template #showValue>{{ aAvailListItem.qty }}</ng-template>
            </div>