Skip to content
Related Articles

Related Articles

Improve Article

Angular10 JsonPipe

  • Last Updated : 21 Jul, 2021
Geek Week

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




My Personal Notes arrow_drop_up
Recommended Articles
Page :