How to add a new line to a string variable using Javascript/Typescript in Angular? [duplicate]

Question

I am trying to add a new line to a string in Angular application. In component.ts file I have added a variable which takes a string value.

heading="Lorem ipsum dolor sit amet. \n consetetur sadipscing elitr."

In component.html file I am calling this variable.

<div>{{heading}}</div>

But no new line is generated and the text is one single paragraph. Can someone help me with this.

in HTML template use innerHTML binding... <h1 [innerHTML]="heading"></h1> and in component use... heading="Lorem ipsum dolor sit amet. <br> consetetur sadipscing elitr." — Benni Russell
– Benni Russell, Commented Jul 30, 2020 at 8:22

Pinnci · Accepted Answer · 2020-07-30 08:07:49Z

2

Try to add CSS style to to that Div.

div{
white-space:pre-line;
}

It should render \n in the browser.

answered Jul 30, 2020 at 8:07

Pinnci

4533 gold badges8 silver badges23 bronze badges

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

1 Answer 1