I am facing an issue with an array that includes displayName with HTML tags:
this.topicsList = [
{id: "173", name: "Discussion1", displayName: "Discussion1", status: 1},
{id: "174", name: "discussion123", displayName: "discussion123", status: 1},
{id: "192", name: "erer", displayName: "erer", status: 1},
{id: "184", name: "Hussa Test", displayName: "Hussa Test", status: 1},
{id: "194", name: "Ratheesh^TM^", displayName: "Ratheesh<sup> TM </sup>", status: 1},
{id: "181", name: "test test", displayName: "test test", status: 1},
{id: "189", name: "test topic", displayName: "test topic", status: 1},
{id: "195", name: "test^TM^tdtest", displayName: "test<sup> TM </sup>tdtest", status: 1},
{id: "190", name: "topic test", displayName: "topic test", status: 1},
{id: "193", name: "yu", displayName: "yu", status: 1}
]
My goal is to display the displayName in superscript form while listing and remove the HTML tag. However, when I use [innerHtml] to display the display name list without the functioning HTML tags, it does not work as expected. I need a solution for this problem.
<select class="form-control select-topic" id="select-topic-id" formControlName="topic" [ngModel]="topicSelected || ''" (ngModelChange)="topicSelected = $event">
<option value="">Select Topic</option>
<option *ngFor="let topic of topicsList" value="{{topic.id}}">{{topic.displayName}}</option>
</select>
I have also tried using [innerHtml], but that did not solve my issue.
<select class="form-control select-topic" id="select-topic-id" formControlName="topic" [ngModel]="topicSelected || ''" (ngModelChange)="topicSelected = $event">
<option value="">Select Topic</option>
<option *ngFor="let topic of topicsList" value="{{topic.id}}"><div [innerHtml]="topic.displayName"></div></option>
</select>