How to show two continuous spaces in Angular?

Question

UPDATE: Both ways from Chris and Mark work.

I am using Angular 2. I try to show two continuous spaces between a and bin the page. I've tried all of these, but none of them works:

{{text}}

text = "a\00a0\00a0b";
text = `a\00a0\00a0b`;
text = "a&nbsp;&nbsp;b";
text = `a&nbsp;&nbsp;b`;
text = "a  b";
text = `a  b`;

How can I make it work?

score 27 · Accepted Answer · answered Feb 06 '16 at 23:10

27

Bind to DOM property innerHTML instead of DOM property textContent (which is what {{}} binds to):

<span [innerHTML]="text"></span>

text = "a&nbsp;&nbsp;b";

answered Feb 06 '16 at 23:10

Mark Rajcok

1

In version 6.0.0 I found that you have to add single quotes around the text string since it otherwise assumes the whole thing is a variable. You also can't take the square brackets from around innerHTML as that complains for a different reason. So basically ```text = "'a b'"``` is what worked for me. – crowmagnumb May 17 '18 at 18:13

Chris · Answer 2 · 2016-02-06T23:30:59.980

25

I believe you're getting this because of the nature of html stripping spaces.

You could perhaps use the white-space: pre css property on whatever element you are rendering that text.

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

I don't know alot about your application, but perhaps this will suffice.

edited Feb 06 '16 at 23:30

answered Feb 06 '16 at 23:11

Chris

But he said he tried ` `s, which aren't stripped by HTML. – Mark Rajcok Feb 06 '16 at 23:14
That's what I thought as well, until I tried it locally. The above is the only I got to work. It might suffice for OP, so worth trying I suppose. – Chris Feb 06 '16 at 23:21
Fair enough. You might want to show the value assigned to `text`, so people don't have to click through to the demo. – Mark Rajcok Feb 06 '16 at 23:29
2

Thank you, @Chris! Your `style="white-space: pre"` way is also working in Angular 2. – Hongbo Miao Feb 07 '16 at 00:19
Glad you found it useful! – Chris Feb 07 '16 at 00:19
1

Worked for me :) – Naveen Kumar V Sep 18 '20 at 16:22
1

This worked for me as expected. Thank you for suggetion. – Pragnesh Chaudhari Nov 01 '22 at 12:32

score 12 · Answer 3 · edited Oct 22 '17 at 23:46

12

use ' ' instead of ' ' in template.

edited Oct 22 '17 at 23:46

nehem

answered Oct 22 '17 at 19:53

Rahul K

3 Answers3