javascript/angular: add 'line break' via string

Question

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.

component.ts

testString = `abcd
efgh
ijkl`;

component.html

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

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

I did try the back ticks, but the result was the same. All it yielded was one space. — pax
– 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
– pax, Commented Feb 4, 2021 at 13:04

Lakshya Thakur · Accepted Answer · 2021-02-04 13:43:18Z

7

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.

edited Feb 4, 2021 at 13:43

answered Feb 4, 2021 at 12:57

Lakshya Thakur

8,3141 gold badge15 silver badges43 bronze badges

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

Comments

user12688644 · Accepted Answer · 2021-02-04 12:56:53Z

0

You can do it using safeHtml pipe.

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

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

answered Feb 4, 2021 at 12:56

user12688644

Comments

JustLearning · Accepted Answer · 2021-02-15 08:10:02Z

0

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';

edited Feb 15, 2021 at 8:10

answered Feb 4, 2021 at 12:56

JustLearning

3,3423 gold badges37 silver badges58 bronze badges

1 Comment

JustLearning Over a year ago

@PaxForce sorry you are right with innerText you need to use \n to have the new line. It is usefull when displaying text captured via a textarea input and preservers the new line and white spaces

Collectives™ on Stack Overflow

javascript/angular: add 'line break' via string

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related