Angular 9/8 Json Pipe Example | Json Pipe in Angular

By Hardik Savani | April 11, 2020 | Category : Angular


Hi All,

In this quick example, let's see angular json pipe example. i would like to share with you angular json pipe. you'll learn json pipe angular example. let’s discuss angular json pipe format.

Json pipe help to debug your object or object array because you can not print direct object in view file. so you can display it in json array see. json pipe will use for developing mostly but also widely. here i will show you how to use json pipe in angular 6, angular 7, angular 8 and angular 9.

I am not going to explain more and more description but i will simply give you syntax and some small examples so you can easily use it in your application.

Syntax:

{{ value_expression | json }}

Json Pipe with Object

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

@Component({

selector: 'my-app',

template: `<div>

<p>{{ myObject }}</p>

<p>{{ myObject | json }}</p>

</div>`,

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Angular';

myObject = {

id: 1,

name: "Hardik"

};

}

Output

[object Object]

{ "id": 1, "name": "Hardik" }

Json Pipe with Object Array

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

@Component({

selector: 'my-app',

template: `<div>

<p>{{ myArrayObject }}</p>

<p>{{ myArrayObject | json }}</p>

</div>`,

styleUrls: [ './app.component.css' ]

})

export class AppComponent {

name = 'Angular';

myArrayObject = [

{

id: 1,

name: "Hardik",

roles: [1, 2, 3]

},

{

id: 1,

name: "Harsukh",

roles: [1, 2, 4, 5]

}

];

}

Output

[object Object],[object Object]

[ { "id": 1, "name": "Hardik", "roles": [ 1, 2, 3 ] }, { "id": 1, "name": "Harsukh", "roles": [ 1, 2, 4, 5 ] } ]

I hope it can help you...




Hardik Savani
My name is Hardik Savani. I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.
Follow Me: Github Twitter
***Do you want me hire for your Project Work? Then Contact US.

We are Recommending you: