Ionic Angular html tag showing in text

The issue

Text through the app is being rendered as

<p>Depletion estimates, Age and size composition, Catch, Effort, Catch rates, Fishing mortality</p>

Therefore, in this instance the HTML p tags are being displayed along with the text.

The code

Currently the code outputting this is written as:

<ion-item lines="full">
     <ion-label class="ion-text-wrap">Indicators:</ion-label>
     <ion-text class="right ion-text-wrap">{{ status.Indicators | removeComma }}</ion-text>
 </ion-item>

Solution

To resolve this issue, the status.Indicators needs to be an attribute of the ion-text using innerHTML.  You should use the innerHTML attribute binding like this:

[innerHTML]="status.Indicators"

Therefore, in the code appearing as

<ion-item lines="full">
     <ion-label class="ion-text-wrap">Indicators:</ion-label>
     <ion-text class="right ion-text-wrap" [innerHTML]="status.Indicators"></ion-text>
 </ion-item>

Testing

Running the app again post the change above and the output is

Depletion estimates, Age and size composition, Catch, Effort, Catch rates, Fishing mortality