I have a method in one of my ponents that gets called in my html page whenever I click on a button. I am currently trying to format the page so that certain attributes (namely city and state) appear at fixed locations in the page. This is what I have so far:

if (this.city !== undefined) {
   let test = 50;
   test -= this.city.length;
   let result = 'City: ' + this.city;
   for ( let i = 0; i < test; i++) {
       result += ' ';
   }
   return result + this.state;
}

However, instead of seeing something like City:

                                       (41 extra spaces) Grapevine TX

it looks like City:

Grapevine TX. 

The interesting thing is that extra characters are added as long as they aren't spaces. For example, if I wrote result += 'a', then I would see 41 extra a's in the string.

Using the result += 'a' example, if I wrote the line result = result.replace(/a/g, ' '), then the final output would be City: Grapevine TX. However, if I had originally written result += ' ' and then wrote result = result.replace(/ /g, 'a'), then even though the extra spaces would not appear in the original string, those spaces would be replaced by an 'a.'

How do I add extra whitespace to my string?

I have a method in one of my ponents that gets called in my html page whenever I click on a button. I am currently trying to format the page so that certain attributes (namely city and state) appear at fixed locations in the page. This is what I have so far:

if (this.city !== undefined) {
   let test = 50;
   test -= this.city.length;
   let result = 'City: ' + this.city;
   for ( let i = 0; i < test; i++) {
       result += ' ';
   }
   return result + this.state;
}

However, instead of seeing something like City:

                                       (41 extra spaces) Grapevine TX

it looks like City:

Grapevine TX. 

The interesting thing is that extra characters are added as long as they aren't spaces. For example, if I wrote result += 'a', then I would see 41 extra a's in the string.

Using the result += 'a' example, if I wrote the line result = result.replace(/a/g, ' '), then the final output would be City: Grapevine TX. However, if I had originally written result += ' ' and then wrote result = result.replace(/ /g, 'a'), then even though the extra spaces would not appear in the original string, those spaces would be replaced by an 'a.'

How do I add extra whitespace to my string?

• javascript
• angular
• typescript

• 1 Try adding   instead of a space – Brett Gregson Commented Jun 19, 2019 at 14:01
• 4 HTML omits multiple whitespaces. Unless you use non-breakable ones. However, I suspect you are better off fixing this using CSS and/or other formatting. – VLAZ Commented Jun 19, 2019 at 14:01
• You can add space as a html character entity like this:   – riorudo Commented Jun 19, 2019 at 14:02
•   might not be encoded into an acutal non-breaking space (for certain string-encoding-safety aspects of angular), unicode escape codes will work better. – Frank N Commented Oct 22, 2021 at 8:22

8 Answers 8

You can add white spacess by adding \xa0.

eg:

result = result.concat("\xa0");

Your issue is related to html which omits multiple spaces following another space. Angular is not the root cause.

Pure html Example - Both headlines are dispalyed equally :

<h1>test     test<h1> 
<h1>test test<h1>

Solution: use tags and/or css for layouting your output.

Try use next code in your css:

.pre-class {
    white-space: pre;
}

But be careful — text will be shown as is with all empty spaces and new rows!

Instead of ' ' you can try  

As people have mented you in other answers, the problem in your case is with the html. I remend you to add   instead of ' ' in your code.

if (this.city !== undefined) {
   let test = 50;
   test -= this.city.length;
   let result = 'City: ' + this.city;
   for (let i = 0; i < test; i++) {
       result += '&nbsp;';
   }
   return result + this.state;
}

Or if you prefer, you can embed your string result into <pre></pre> tags.

You can check out this page https://www.wikihow./Insert-Spaces-in-HTML for further information.

Even if you get extra spaces in string, html will not render the extra spaces. You can get the count of whitespaces needed and loop in html wherever wanted. Tested and it works.

<span *ngFor="let i of whitespacecount">&nbsp;</span>

You can use   to create a space in typescript For example:

<h1>Hello World<h1>

can be written as

<h1>Hello &nbsp; World<h1>

This will display it as a space on the page view.

I was facing the same kind of issue, trying to make random text having always a fixed MAX_CHAR_PER_CELL length.   only works in html pages of Angular. if you try to print a typescript string variable including any html entity, they will be automatically escaped.

but @Parinda-Rajapaksha's solution is working. Here is a more contemporary way to do the whole thing:

    const length:number = text.length;
    if ( length == this.MAX_CHAR_PER_CELL)
    {
       return text;
    } else if ( length > this.MAX_CHAR_PER_CELL ) {
       return text.slice(0, this.MAX_CHAR_PER_CELL-3)+"...";
    } else { // length < this.MAX_CHAR_PER_CELL
       return text + "\xa0".repeat(this.MAX_CHAR_PER_CELL - length);
    }

Note: this won't give the expected result of a fixed width on a web page unless using monospaced fonts.