title: Angular 2 pipe that transforms JSON object to pretty-printed JSON
body: <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>