CODEWITHSUNDEEP
javascriptangulartypescript
M14
M14

Reputation: 1810

Angular 4 display in next line for newline character for p tag

I have a page in angular 4 where I have to display user comment list.Users may enter comments in multi-line. I would like to bind text in multi-line.I would like to display text starting by \n in the new line.

I have tried 

<p [innerHTML]="comment.text"></p>
          &
<p>{{comment.text}}</p>

I don't want to replace \n with <br>tag.I want something else.

If it can be done on the binding side that would be great.

Upvotes: 9

Views: 15020

Answers (2)

FAISAL
FAISAL

Reputation: 34673

Make use of white-space: pre-line; style. Add a style class e.g. multi_lines_text and add that on your <p>:

in your component css: 

.multi_lines_text { 
    white-space: pre-line; 
}

and in your template: 

<p class="multi_lines_text" [innerHTML]="comment.text"></p>

Link to StackBlitz demo.

Upvotes: 33

Gerlando Caldara
Gerlando Caldara

Reputation: 323

You could try the pre html element. Link Pre Make sure the DOMSanitizer don't remove the line breaking, it will remove everything thats not secure.

Upvotes: 2

Related Questions