Help Angular by taking a 1 minute survey!Go to surveyHome

JsonPipe

Converts a value into its JSON-format representation. Useful for debugging.

{{ value_expression | json }}
      
      {{ value_expression | json }}
    

NgModule

Input value

value any

A value of any type to convert into a JSON-format string.

Usage notes

The following component uses a JSON pipe to convert an object to JSON format, and displays the string in both formats for comparison.

@Component({ selector: 'json-pipe', template: `<div> <p>Without JSON pipe:</p> <pre>{{object}}</pre> <p>With JSON pipe:</p> <pre>{{object | json}}</pre> </div>` }) export class JsonPipeComponent { object: Object = {foo: 'bar', baz: 'qux', nested: {xyz: 3, numbers: [1, 2, 3, 4, 5]}}; }
      
      
  1. @Component({
  2. selector: 'json-pipe',
  3. template: `<div>
  4. <p>Without JSON pipe:</p>
  5. <pre>{{object}}</pre>
  6. <p>With JSON pipe:</p>
  7. <pre>{{object | json}}</pre>
  8. </div>`
  9. })
  10. export class JsonPipeComponent {
  11. object: Object = {foo: 'bar', baz: 'qux', nested: {xyz: 3, numbers: [1, 2, 3, 4, 5]}};
  12. }