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?

Mark Rajcok · Accepted Answer · 2016-02-06 23:10:09Z

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 6, 2016 at 23:10

Mark Rajcok

365k114 gold badges501 silver badges494 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

crowmagnumb Over a year ago

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.

Chris · Accepted Answer · 2016-02-06 23:30:59Z

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.

Demo

edited Feb 6, 2016 at 23:30

answered Feb 6, 2016 at 23:11

Chris

59.7k20 gold badges121 silver badges144 bronze badges

7 Comments

Mark Rajcok Over a year ago

But he said he tried  s, which aren't stripped by HTML.

Chris Over a year ago

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.

Hongbo Miao Over a year ago

Thank you, @Chris! Your style="white-space: pre" way is also working in Angular 2.

Naveen Kumar V Over a year ago

Worked for me :)

Pragnesh Chaudhari Over a year ago

This worked for me as expected. Thank you for suggetion.

|

nehem · Accepted Answer · 2017-10-22 23:46:56Z

13

use ' ' instead of ' ' in template.

edited Oct 22, 2017 at 23:46

nehem

13.8k6 gold badges65 silver badges86 bronze badges

answered Oct 22, 2017 at 19:53

Rahul K

9385 silver badges17 bronze badges

Collectives™ on Stack Overflow

How to show two continuous spaces in Angular?

3 Answers 3

1 Comment

7 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

7 Comments

Comments

Linked

Related