title: Formatting a string to JSON Object to disply in HTML In a textarea w/ [(ngModel)]
body: <p>I have a string json object that I am trying to format and display in the html. I have tried using <code>JSON.parse()</code> and <code>JSON.stringify()</code> but the typeof is still showing as a string and it is displaying in a straight line instead of formatting . I also tried <code>&lt;pre&gt; {{formatJson | json}}&lt;/pre&gt;</code> and still no success.</p>
  
  <pre><code>formatJSON: string  = '{"a":1,"b":2,"c":{"d":3, "e":4}}'
  
  ngOnInit() {
    var test = json.parse(this.formatJSON);
    console.log(typeof test); //string
    this.formatJSON = JSON.stringify(test, null, "   ")
  
  }
  </code></pre>
  
  <p>HTML Code:</p>
  
  <pre><code>&lt;div&gt;
    &lt;textarea [(ngModel)]="formatJSON" class="text-area" cols="200" rows="10"&gt;
         {{formatJSON}}
    &lt;/textarea&gt;
  &lt;/div&gt;
  
  
  &lt;!-- &lt;pre&gt;{{formatJSON | json}}&lt;/pre&gt; --&gt;
  </code></pre>
  
  <p>Desired Output:</p>
  
  <p><a href="https://i.stack.imgur.com/PrZCR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PrZCR.png" alt="Desired Output"></a></p>