font awesome in ternary if does not render in angular-CodePudding

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="" ></i> }} </span>

the result is like this:

{{ isEditablePropertyworkLogSumTimes == true ? 'edit' : }}

CodePudding user response：

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="" ></i>
</ng-template>