CODEWITHSUNDEEP
htmlangularpre
Mister_L
Mister_L

Reputation: 2611

angular 4 json pipe - spaces not trimmed in pre tag

I have this json that I'm trying to pretty-print:

{
 "error": "BAD_RESULT",
 "status": 500,
 "description": "Something bad happenned."
}

This object is stored in a variable errorMsg, and displayed in html using the pre tag like so:

<pre>
   {{ errorMsg | json }}
</pre>

Unfortunately, when I inspect the element in the developers console, I see that the content inside the pre tag is padded with lots of spaces (right after the opening pre, and right before the closing pre), and that causes an indentation of the opening bracket. If I manually delete the spaces from the console, the json is displayed perfectly. How can it be solved? Is there a pure css solution or maybe with js?

Thanks.

EDIT:

My code was originally:

<pre>
   {{ errorMsg | json }}
</pre>

When it was supposed to be:

<pre>{{ errorMsg | json }}</pre>

Now it works.

Upvotes: 4

Views: 4635

Answers (2)

deadwards
deadwards

Reputation: 2118

If you want to do this without having to rely on the indentation of your file, which might get messed with by formatting tools, I would suggest using something like the following.

<pre [innerText]="errorMsg | json"></pre>

Upvotes: 0

Reed
Reed

Reputation: 1642

If you are trying to trim strings, you could use Javascript .trim() method. 

var str = "       Hello World!        ";
alert(str.trim());

Output: Hello world!

https://www.w3schools.com/jsref/jsref_trim_string.asp

Upvotes: -1

Related Questions