font awesome in ternary if does not render in angular

user_10997800 0
Viewed 16

Base on a variable I want to show a text with and fontawsome icon but the icon doesn't render correctly and it just show code which is related to it.

<span> {{ isEditablePropertyworkLogSumTimes == true ? 'edit' : <i _ngcontent-c25="" class="fa fa-plus fa-fw"></i> }} </span>

the result is like this:

{{ isEditablePropertyworkLogSumTimes == true ? 'edit' : }} enter image description here

angular
1 Answers

Structural Directive : *ngIf

You shouldn't write html inside the ternary.

Try using the *ngIf structural directive instead.

<span *ngIf="isEditablePropertyworkLogSumTimes; else other" > edit </span>

<ng-template #other>
    <i _ngcontent-c25="" class="fa fa-plus fa-fw"></i>
</ng-template>
user_123485840
Related