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>

//Output
{
  "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

☝ ✍ Angular Wiki ✍☝
Get a short & sweet Angular tutorials delivered to your inbox every couple of days. No spam ever. Unsubscribe any time.
Avatar
Arunkumar Gudelli

I am One among a million Software engineers of India. I write beautiful markup.I make the Web useful.

Previous