Angular removes leading whitespace when rendering

user_8402051 0
Viewed 453

At work, I am developing an Angular component that displays a string from its input on the rendered HTML page. The HTML for displaying the string looks something like this:

<span>{{value}}</span>

where value comes from this.value in the Angular code. For normal strings this works OK, but I have found that Angular strips out leading whitespace. Now I know that HTML itself compresses multiple whitespace into one when rendering the HTML into a visible page, but the whitespace is removed from the HTML itself. I have verified that the string in the Angular code contains whitespace:

console.log("The string is: [" + this.value + "]");

prints out The string is: [ Hello world!] on the web console. But what appears on the rendered HTML page is:

<span>Hello world!</span>

How can I fix this?

angular html javascript
2 Answers

Even if Angular preserves the whitespace, which I assume it is doing, html will strip it down. You have two option to either use tag or do it via css as shown below:

No Preservation <br/>
<span> Hello world! </span><br/>
<span>   Hello world!  </span>


<br/>
With Pre tag

<pre>
  <span> Hello World!   </span>
</pre>

<br/>
With Css white-space: pre<br/>
<span style="white-space: pre;">
    Hello World!   </span>

user_29418990

One of the options is to use a non-breaking whitespace like this const value = '&nbsp;Hello World!'

user_98058670
Related