angular component html is escaping my superscript character

Question

I have some text, in an angular 5 component as follows.

Area Breakdown m²

Unfortunately angular is breaking my neat little squared character and displaying this:

Area Breakdown m²

component.ts

@Component({
    templateUrl: `component.html`
})
export class SourceDocumentWorkItemsComponent implements OnInit {
    // (all very standard)
}

component.html

<div class="input-group">
    <label class="bold">Area Breakdown m&sup2;</label>
</div>

How do I stop angular from mangling my html... I am pretty sure angular is the culprit here.

Answer 1

Try [innerHTML] instead as below it gives the output as per your requirement:

areaBreakdownText:string='Area Breakdown m²';
<label class="bold" [innerHTML]="areaBreakdownText"></label>