0

We have a list of values being returned from the server. These values contains words like this :

"1      Black"
"1/2      Unavailable"
"3      Sky Blue"

The angular code is as follows: <select class="someclass" [(ngModel)]="colorChoice"> <option *ngFor="let c of colorList" [ngValue]="c">{{c}}</option> </select> Since the above started removing all the spaces between the words, except for one space in between.
Something like "1 Black".
So I resorted to using '&nbsp' in the code after getting the values from the server. let tmp = respColorList.replace(/\s/g, '&nbsp;'); this.colorList.push(tmp); Now this is showing "&nbsp" inside the drop down. I have also tried white-space: pre; and also word-spacing: 5px;

How do I solve this. Thank you.

KudmiSubba
  • 59
  • 2
  • 9

1 Answers1

0

In the values returned from the server, don't insert the HTML entity &nbsp; but (the equivalent) string character code \xa0 . e.g. "3\xa0\xa0\xa0\xa0\xa0\xa0Sky Blue". (See also How is a non-breaking space represented in a JavaScript string?)

I tested by specifying the following member property in a component:

colorList = [
   "1      Black",
   "1/2&nbsp;&nbsp;&nbsp;&nbsp;Unavailable",
   "3\xa0\xa0\xa0\xa0\xa0\xa0Sky Blue" ,
];

When you databind this with the HTML template code that you provided, I get a select box with in the 3rd option multiple spaces between the words. See attached image. Verified in Chrome and Firefox.

selectbox with multiple spaces in option 3

mcoomans
  • 116
  • 4
  • Sir, The   before the {{}} binding, works fine. But within the variable itself, there are the two words which needs to have the spaces in between. If I add " " or "\xa0" it is not getting interpreted, I just see the one space. Thank you for your help. – KudmiSubba Jun 18 '20 at 19:24
  • I get see multiple spaces with \xa0 (but not &nbsp) . I'll extend my answer to further clarify how I achieved that result. – mcoomans Jun 19 '20 at 21:51