New Line '\n' is not working in Typescript

Question

I am creating a list item in typescript component which will be displayed in the UI. The List items should be displayed in separate lines. So i added new line char \n as below. But still the list items are shown in same line. Below is the code. Any idea why it doesn't work?

Typescript Code:

@Output() excludeDisplay: any = '';
@Output() includeDisplay: any = '';
includeValues: any = '';
excludeValues: any = '';

this.includeValues += this.merId + ',' + this.explodeStatus + '\n';
console.log("include values are "+ this.includeValues);
this.excludeValues += this.merId + ',' + this.explodeStatus + '\n';
console.log("exclude values are "+ this.excludeValues);
this.includeDisplay = this.includeValues;
this.excludeDisplay = this.excludeValues;

Html Code:

<ul id="excludedUl" required>{{ excludeDisplay }}</ul>
<ul id="includedUl" required>{{ includeDisplay }}</ul>

CSS Code:

#includedUl {
  float: right;
  width: 33%;
}

#excludedUl {
  float: right;
  width: 33%;
}

Here is working solution..... https://stackoverflow.com/a/69753810/7320692 — Radim Šafrán, Nov 01 '21 at 08:50

score 35 · Answer 1 · answered Jul 02 '19 at 11:39

35

Need to use fix width:

 <div style="width: 500px;white-space: pre-line">{{property}}</div>

In typescript use '\n' to add new line.

answered Jul 02 '19 at 11:39

Palash Roy

1,547
1
15
11

1

No need to specify `width` only `white-space: pre-line` solved my issue. Thanks! – Mhd Alaa Alhaj Aug 24 '22 at 12:27

score 17 · Accepted Answer · answered Jun 25 '17 at 07:38

17

\n does not cause a line break in html.
You'll need to use a <br/> or wrap your text in a block element.

this.includeValues += this.merId + ',' + this.explodeStatus + '<br/>';
this.excludeValues += this.merId + ',' + this.explodeStatus + '<br/>';

Or

this.includeValues += '<div>' + this.merId + ',' + this.explodeStatus + '</div>';
this.excludeValues += '<div>' + this.merId + ',' + this.explodeStatus + '</div>';

answered Jun 25 '17 at 07:38

Nitzan Tomer

155,636
47
315
299

@VladimirDespotovic and so you've decided to downvote. nice. you're probably doing something different because `
` is the way to do it in html. – Nitzan Tomer Aug 12 '19 at 13:43
Thanks for answering. I will remove the downvote. The n doesn't work for me hoever, and neither does br....... – Vladimir Despotovic Aug 12 '19 at 13:45
What happends to mje is that in the webpage, the
is just displayed like that :) i.e.
......angular preformats it. I'm looking to way to display br as br..... – Vladimir Despotovic Aug 12 '19 at 13:49
@VladimirDespotovic well then, this is not the right thread for you. `\n` shouldn't work, so that ok, as for the `
', there are other threads for that, i.e.: https://stackoverflow.com/questions/14963444/angularjs-is-rendering-br-as-text-not-as-a-newline – Nitzan Tomer Aug 12 '19 at 13:50

score 6 · Answer 3 · edited Sep 16 '21 at 14:13

6

If the information is only going to be displayed in the HTML, you can use the CSS property white-space. For breaking just the '\n' character then this should work white-space: pre-line; as mentioned here and for the documentation check MDN.

edited Sep 16 '21 at 14:13

AntonioGarcía

1,140
2
15
25

answered Sep 16 '21 at 08:39

Christos Andreou

61
2
4

score 1 · Answer 4 · answered Aug 07 '21 at 12:03

If you still need the original text with \n included for something else, you can always make a call to the Str.replace method, to change all \n into <br/>, so the template works as expected. You could do something like this:

this.includeDisplay = this.includeValues.replace(/\n/g, '<br />');

You can refer to MDN docs.

New Line '\n' is not working in Typescript

4 Answers4

Linked

Related