Angular, mat-option, text format with spaces-CodePudding

I need to display text inside <mat-option> with number of spaces between words. E.g. 'word1__word2' must have two spaces in between. I can do this by replacing the space character with  . But this doesn't work if I return a string from a method:

.ts:

myFunc() {
  return 'This&nbsp;doesn't&nbsp;work!';
}

.html:

<mat-option>
  {{myFunc() 'This&nbsp;works!'}}
</mat-option>

So, the formatting doesn't work if I return the string from a method. How I can force to format it? Else it skips extra spaces.

[innerHtml] doesn't work also, since it hides other staff like checkboxes:

<mat-select [multiple]="true">
  <mat-option [innerHtml]="'inner'"></mat-option>
  <mat-option>opt2</mat-option>
</mat-select>

the first item doesn't have checkbox.

CodePudding user response：

try using \xA0 in place of  

myFunc() {
    return "This\xA0doesn't\xA0\xA0\xA0\xA0\xA0\xA0work!";
}

this answer has some more information