How to render either a number or a HTML element depending on what a function returns?

Issue

I have a function getScore() which either returns a number or null. Then I call it inside my html file like this:

<span>{{ getScore(assessmentRequest) }}</span>

Now I want to change it so that I render the number if a number is returned, or render an icon if it returns null. I tried something like this, but it just returns a string instead of an actual HTML element:

<span>{{ getScore(assessmentRequest) ? getScore(assessmentRequest) : '<i class="icon ion-checkmark"></i>' }}</span>

How would I render an actual HTML element in that case?

Solution

One way would be to use ngIf

For AngularJS:

ng-if

<span ng-If="assessmentRequestValue">{{ assessmentRequestValue }}</span>
<span ng-If="!assessmentRequestValue"><i class="icon ion-checkmark"></i></span>

For Angular2+

NgIf

<span *ngIf="assessmentRequestValue">{{ assessmentRequestValue }}</span>
<span *ngIf="!assessmentRequestValue"><i class="icon ion-checkmark"></i></span>

For both, Try not to use function calls in angular template expressions Use getScore(assessmentRequest) somewhere inside your controller to set assessmentRequestValue

Answered By - Husky Slava