How to display paragraphs coming from a single element in Angular with the required characters worki-CodePudding

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?

CodePudding user response：

You can use HTMLElement.innerText:

<div>
  <p [innerText]="data.description"></p>
</div>

CodePudding user response：

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>