prettyJson Pipe

You can use this pipe like:
<pre [innerHtml]="YOUR_JSON | prettyJson: [true, 3]"></pre>

prettyJsonPipe default values are 'false' for line numbers and 3 for paddings.

The difference between <pre>{{YOUR_JSON | json}}</pre> and this pipe; You can add line numbers and you have a CSS file colored by value types like string, number and bool.

Example output is:

Live Example

http://my-angular-tests.herokuapp.com/

Source

https://stackoverflow.com/questions/37308420/