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:
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 {
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
Share your thoughts in the comments
Please Login to comment...