I have a object in view.component.ts file coming form backend. It is supposed to be description for a product. It has more than 500 lines of text. for eg:
{"description" : "Hello my Name is Param Bedi.\r\nHow are you\r\n\r...continue till 500 lines and more"}
I need to display this to Angular view. But its just coming straight as it is ie containing all the "\r\n" etc. Its not inserting a new line instead of \n.
This is what I am doing in view.component.html
<div>
<p>{{ data["description"] }}</p>
</div>What should I do so that I can display the data with newline and other special characters working?
You can use HTMLElement.innerText:
<div>
<p [innerText]="data.description"></p>
</div>
Or, if you need special character output, using Element.innerHTML (with replacing new lines with <br>):
<div>
<p [innerHTML]="data.description.replace(/(\r\n|\r|\n)/g, '<br>')"></p>
</div>
Solution 1: You can use white-space: pre-line in css. You can check here CSS White Space.
Solution 2: You can use Textarea with readonly.
<textarea name="description" readonly [(ngModel)]="data.descrption" style="resize: none;" ></textarea>