Angular json pipe pretty format

json pipe formatting

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>

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

    "Id": 1,
    "Name": "Angular wiki"
    "Id": 2,
    "Name": "Typescript"

Link to Stackblitz Demo

Stackblitz Json Pipe Pretty Demo

Angular Json Pipe Pretty

Angular Json Pipe Pretty


Arunkumar Gudelli

Liked this post? Subscribe