Angular 2 pipe that transforms JSON object to pretty-printed JSON
<p>Trying to write an Angular 2 pipe that will take a JSON object string and return it pretty-printed/formatted to display to the user.</p>

<p>For example, it would take this:</p>

<p><strong>{
        "id": 1,
        "number": "K3483483344",
        "state": "CA",
        "active": true
    }</strong></p>

<p>And return something that looks like this when displayed in HTML:</p>

<p><a href="https://i.stack.imgur.com/g3WF5.png"><img src="https://i.stack.imgur.com/g3WF5.png" alt="enter image description here"></a></p>

<p>So in my view I could have something like: </p>

<pre><code>&lt;td&gt; {{ record.jsonData | prettyprint }} &lt;/td&gt;
</code></pre>