I need to split the string with a ma to a newline. I have tried using split and join function. It is removing mas only but not printing on a new line.

string='Lorem Ipsum,Lorem Ipsum,Lorem Ipsum'

My code is printing like this in HTML:

Lorem Ipsum Lorem Ipsum Lorem Ipsum 

It's supposed to print like this:

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

Code:

{
  'date':'Nov 12',
  'name':"Agra",
  'entities': 14,
  'details':'Lorem Ipsum,Lorem Ipsum,Lorem Ipsum'
}

getdetails(x:any){
  this.detail = x.details;
  this.s = this.detail.split(',').join('\n')
}

    <div class="col-md-4 col-12 overflow-auto test">
      <div class="alert alert-dark">No description yet <span class="font-weight-bold">+Add Description</span> </div>
      <p>{{s}}</p>

    </div

stackblitz link

I need to split the string with a ma to a newline. I have tried using split and join function. It is removing mas only but not printing on a new line.

string='Lorem Ipsum,Lorem Ipsum,Lorem Ipsum'

My code is printing like this in HTML:

Lorem Ipsum Lorem Ipsum Lorem Ipsum 

It's supposed to print like this:

Lorem Ipsum
Lorem Ipsum
Lorem Ipsum

Code:

{
  'date':'Nov 12',
  'name':"Agra",
  'entities': 14,
  'details':'Lorem Ipsum,Lorem Ipsum,Lorem Ipsum'
}

getdetails(x:any){
  this.detail = x.details;
  this.s = this.detail.split(',').join('\n')
}

    <div class="col-md-4 col-12 overflow-auto test">
      <div class="alert alert-dark">No description yet <span class="font-weight-bold">+Add Description</span> </div>
      <p>{{s}}</p>

    </div

stackblitz link

• javascript
• html
• angular

Share Improve this question Follow edited Feb 12, 2020 at 8:45 mplungjan 179k2828 gold badges182182 silver badges240240 bronze badges asked Feb 12, 2020 at 8:41 PremPrem 12444 silver badges1616 bronze badges 3

• 1 try to have like this instead, this.s = this.detail.split(',').join('<br />') if thats what you mean since this is HTML not a normal text. – ROOT Commented Feb 12, 2020 at 8:43
• Why not put each part of the split in a separate <p>? Note that for a newline in HTML you need <br> not \n. – jonrsharpe Commented Feb 12, 2020 at 8:44
• <br> printing like this Lorem Ipsum<br>Lorem Ipsum<br>Lorem Ipsum – Prem Commented Feb 12, 2020 at 8:55

Add a ment  | 

5 Answers 5

Sorted by: Reset to default 2

If you want to display new line in template you can use <br> tag for new line. And in html file use innerHtml property for binding data for p tag

Try this

.ts

this.s = this.detail.split(',').join('<br />')

.html

<p [innerHtml]="s"></p>

You try:

<p style="white-space: pre-line;">{{s}}</p>

When you split the string - you have an array of the ponent parts of the string - simply iterate over these with an ngFor and use a block level element like a p element to automatically puth them on separate lines (or use a ul with the details in li's which again are block level elements and will render on new lines).

getdetails(x:any){
this.detail = x.details;
this.s = this.detail.split(','); // creates an array you can iterate over 
}

<p *ngFor="let _s of s">{{ _s }}</p>

this.s = this.detail.split(','); and in the template <p *ngFor="let _s of s">{{_s}}</p>

Use pre tag to defines preformatted text.

<div class="col-md-4 col-12 overflow-auto test">
      <div class="alert alert-dark">No description yet <span class="font-weight-bold">+Add Description</span> </div>
      <p>{{s}}</p>
  </div>

Example