Angular json pipe pretty format

For debugging purpose,We can display the JSON data in component HTML using Json Pipe in Angular.

Taking product object as explained in Angular Json Pipe.

<p>{{product | json}}</p>
<p>{{products | json}}</p>

Have a look at the output

{ "Id": 1, "Name": "Angular wiki" }

[ { "Id": 1, "Name": "Angular wiki" }, { "Id": 2, "Name": "Typescript" } ]

The above output is not pretty-printed/formatted to display to the user.

And if we display big json object it’s very difficult to understand.

So to format the JSON displayed, use <pre> tag in HTML.

<pre><p>{{product | json}}</p></pre>

<pre><p>{{products | json}}</p></pre>

//Output
{
  "Id": 1,
  "Name": "Angular wiki"
}

[
  {
    "Id": 1,
    "Name": "Angular wiki"
  },
  {
    "Id": 2,
    "Name": "Typescript"
  }
]

Link to Stackblitz Demo

Stackblitz Json Pipe Pretty Demo