JSON Pipe

There’s one last pipe I want to go over before we dive into creating custom pipes. Angular has a pipe called the JsonPipe. Here’s the link to the documentation: https://angular.io/api/common/JsonPipe.

According to the description, it’s useful for debugging. Sometimes you will want to see an object output on the template to inspect it.

Let’s create a property, called pizza, in the app.component.ts component class file.

export class AppComponent {
  name = 'john doe';
  todaysDate = new Date();
  cost = 2000;
  temperature = 25.3;
  pizza = {
    toppings: ['pepperoni', 'mushroom'],
    size: 'Large'
  };
}

It will be an object with two properties: toppings and size. Let’s try to output the object.

<pre>{{ pizza }}</pre>

This will not work. We’ll end up with the following output:

[object Object]

If we want to output an object, we’ll need to use the json pipe, as shown here:

<pre>{{ pizza | json }}</pre>

This will change the output to the following:

{
  "toppings": [
    "pepperoni",
    "mushroom"
  ],
  "size": "Large"
}

The json pipe is convenient for debugging an object. It doesn’t serve much purpose outside of this.

Here’s the complete code for this lesson: