How to show two continuous spaces in Angular?

Question

UPDATE: both paths from Chris and Mark are working.

I am using Angular 2. I am trying to show two continuous spaces between a and b on the page. I tried all this, but none of them work:

 {{text}} text = "a\00a0\00a0b"; text = 'a\00a0\00a0b'; text = "a  b"; text = 'a  b'; text = "ab"; text = 'a b'; 

How can I make this work?

Answer 1

Bind to the DOM property innerHTML instead of the DOM property textContent (to which {{}} is bound):

 <span [innerHTML]="text"></span> text = "a&nbsp;&nbsp;b"; 

Answer 2

I believe that you get this because of the nature of stripping HTML space.

Perhaps you can use the white-space: pre css property for any element that you render.

 function MyCtrl($scope) { $scope.text = 'a b'; } ... <p style="white-space: pre">{{text}}</p> 

I don’t know much about your application, but maybe that’s enough.

demonstration

Answer 3

use ' ' instead of ' ' in the template.