Adding newline in JSON object Typescript and Angular

Question

I've the following data, I wanted the text to appear in new line. I tried \n. But new line is not working,

Do I need to do anything else ? Please help

Below is my code.

title = {"text": "Hello \n World"}

and in app.html

{{title}}

Mujadid Mughal · Accepted Answer · 2020-05-14 10:10:06Z

1

Make use of angular innerHtml binding. Replace \n with br

title = {"text": "Hello <br /> World"}

and in html page

<p [innerHtml]="title.text"></p>

Thanks.

answered May 14, 2020 at 10:10

Mujadid Mughal

2,67119 silver badges16 bronze badges

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

Comments

Gagan Deep · Accepted Answer · 2020-05-14 10:09:43Z

0

Try this

<div style="white-space: pre-line">{{title}} </div>

answered May 14, 2020 at 10:09

Gagan Deep

1,51911 silver badges13 bronze badges

Shlok Nangia · Accepted Answer · 2020-05-14 10:16:59Z

0

in typescript

title = {"text": "Hello \n World"};

in html

<div style="white-space: pre-line">{{title.text}}</div>

what pre-line does is :- Sequences of whitespace will collapse into a single whitespace. Text will wrap when necessary, and on line breaks

answered May 14, 2020 at 10:16

Shlok Nangia

2,3773 gold badges19 silver badges25 bronze badges