Open In App

Angular10 JsonPipe

Improve
Improve
Like Article
Like
Save
Share
Report

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



Last Updated : 21 Jul, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads