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

Question

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.

Answer 1

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.