I have this method in my .ts file that creates a string out of obj.date and obj.status.
Now I'm using multiple(eight, to be exact) \xa0 (a hex encoded nbsp) to make some space between the date and the status.
The resulting string: 17/11/2020       done
is then bound in the template.

I would rather use a line break instead so that it would look like so:
17/11/2020
done

dateWithStatus(obj) {
  return
    moment.utc(object.date).format(DATE_FORMAT)
    + Array(8).fill('\xa0').join('')
    + object.status;
}

My question is - what hex code should I use instead of \xa0 to force the line break?
Neither \n, nor \r\n seem to work.

PS: Yes, I did search the stackoverflow (among other sites) for the answer, to no avail.


=== update === I tested the string literal thingy in the (Angular) template file.

testString = `abcd
efgh
ijkl`;

<span>{{testString}}</span>

RESULT : all the letters are in one line
abcd efgh ijkl

I have this method in my .ts file that creates a string out of obj.date and obj.status.
Now I'm using multiple(eight, to be exact) \xa0 (a hex encoded nbsp) to make some space between the date and the status.
The resulting string: 17/11/2020       done
is then bound in the template.

I would rather use a line break instead so that it would look like so:
17/11/2020
done

dateWithStatus(obj) {
  return
    moment.utc(object.date).format(DATE_FORMAT)
    + Array(8).fill('\xa0').join('')
    + object.status;
}

My question is - what hex code should I use instead of \xa0 to force the line break?
Neither \n, nor \r\n seem to work.

PS: Yes, I did search the stackoverflow (among other sites) for the answer, to no avail.


=== update === I tested the string literal thingy in the (Angular) template file.

testString = `abcd
efgh
ijkl`;

<span>{{testString}}</span>

RESULT : all the letters are in one line
abcd efgh ijkl

• javascript
• angular

• Can't you use template literals (back ticks)? – Roy Commented Feb 4, 2021 at 12:27
• I did try the back ticks, but the result was the same. All it yielded was one space. – pax Commented Feb 4, 2021 at 12:35
• All of the answers deal with the <h2> tag that I've chosen only for testing purposes. The tag containing the text in the app is actually <span>, so I changed it in the test example too. – pax Commented Feb 4, 2021 at 13:04

3 Answers 3

One of the ways could be adding a class to your element, say, testString, like so:-

.testString{
white-space:pre
}

white-space:pre should allow breaking at \n characters.

You can do it using safeHtml pipe.

// ponent.ts
...
testString = 'Hello<br>world!';
...

// ponent.html
<h2 [innerHtml]="testString | safeHtml"></h2>

You can add a line break in your string and then bind the innerText property of the element:

<h2 [innerText]="testString"></h2>

testString = 'first line' + ' \n ' + ' second line';