How can i set span tags in the return value of an component

Question

How can i in the following example set span tags around x, y and total so it is not one string?

 <div>
        {{GetNumbers()}}
    </div>

GetNumbers(){
const x = 10;
const y = 5;
total = 5;

return `${x} - ${y} of ${total}`;
}

Answer 1

You can set the innerHTML property of the div to use your string, including the span tags:

<div [innerHTML]="GetNumbers()"></div>

GetNumbers(){
  const x = 10;
  const y = 5;
  const total = 5;

  return `<span>${x}</span> - <span>${y}</span> of <span>${total}</span>`;
}

StackBlitz: https://stackblitz.com/edit/angular-vlp9au?file=src%2Fapp%2Fapp.component.ts