Angular10 JsonPipe

In this article, we are going to see what is JsonPipe in Angular 10 and how to use it.

JsonPipe is used to convert an object its JSON representation

Syntax:

{{ value | json}}

NgModule: Module used by JsonPipe is:

• CommonModule

Approach: 

• Create the angular app to be used
• There is no need for any import for the JsonPipe to be used
• In app.component.ts define the variables that takes the JsonPipe value.
• In app.component.html use the above syntax with ‘|’ symbol to make JsonPipe element.
• serve the angular app using ng serve to see the output

Input value:

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

Example 1:

app.component.ts

import { Component }
from '@angular/core';

@Component({
    selector: 'app-root',
    templateUrl: './app.component.html'
})
export class AppComponent {
    // JSON object
    emp: Object = {
        "list":[
        {
            "name":"Billy Lee",
            "position":"Web Developer",
            "office":"Detroit",
            "salary":"$50000",
            "edit":"Edit",
            "delete":"Delete"

        },
        {
            "name":"John Doe",
            "position":"Manager",
            "office":"Troy",
            "salary":"$90000",
            "edit":"Edit",
            "delete":"Delete"
        },
        {
            "name":"James Baxter",
            "position":"IT Support",
            "office":"Detroit",
            "salary":"$30000",
            "edit":"Edit",
            "delete":"Delete"
        },
        {
            "name":"Jimmy Lee",
            "position":"Web Developer",
            "office":"Detroit",
            "salary":"$50000",
            "edit":"Edit",
            "delete":"Delete"
        },
        {
            "name":"Nick Wess",
            "position":"Sales",
            "office":"Ann Arbor",
            "salary":"$40000",
            "edit":"Edit",
            "delete":"Delete"
        },
        {
            "name":"Sarah Deets",
            "position":"Graphic Designer",
            "office":"Ann Arbor",
            "salary":"$40000",
            "edit":"Edit",
            "delete":"Delete"
        }
        ]
}
  }

app.component.html

<div>
   <pre>{{emp | json}}</pre>
 </div>

Output:

Reference: https://angular.io/api/common/JsonPipe