Angular Pipe Json examples | pretty format code

This is an short tutorial about angular pipe json examples

  • How to print json object in Angular component

Angular has inbuilt pipe called jsonPipe from @angular/common module.

This will be useful to convert an typescript object into JSON format type.

This will be useful to debug and manipulate object data.

Here is syntax in html template


How do you print an object without json pipe in Angular?

Let’s declare an Employee.ts object in typescript angular application.

export class Employee {
  id: Number;
  name: string;
  salary: Number;

Let’s create an angular typescript component. Create and Initialize array of employee with data.

import { Component } from '@angular/core';
import { Employee } from './employee';

  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  employees: Employee[] = [
    { id: 1, name: 'Ram', salary: 5000 },
    { id: 2, name: 'John', salary: 1000 },
    { id: 3, name: 'Franc', salary: 3000 },
    { id: 4, name: 'Andrew ', salary: 8000 }
  constructor() {}

  ngOnInit() {}

Let’s print the object array or object in Angular html component.



[object Object],[object Object],[object Object],[object Object]

An object or array object prints object in [object object] format, which is not helpful for developer to debug on the content of an object.

Hence JSON pipe in Angular helpful developer to print the content of an object pretty json format.

Angular JSON pipe to print object array

Let’s use json pipe for an object or array of object.

  {{employees |json}}

And output

[ { "id": 1, "name": "Ram", "salary": 5000 }, { "id": 2, "name": "John", "salary": 1000 }, { "id": 3, "name": "Franc", "salary": 3000 }, { "id": 4, "name": "Andrew ", "salary": 8000 } ]

JSON displayed as a string format without delimiter or pretty format.

How do you print the json in pretty format

Angular json pipe to print in pretty format

JSON data can be displayed using pre tag in html

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


    "id": 1,
    "name": "Ram",
    "salary": 5000
    "id": 2,
    "name": "John",
    "salary": 1000
    "id": 3,
    "name": "Franc",
    "salary": 3000
    "id": 4,
    "name": "Andrew ",
    "salary": 8000

Custom json pipe print in tab format

By default json pipe with 2 spaces provided by Angular.

export class JsonPipe implements PipeTransform {

  transform(value: any): string {
    return JSON.stringify(value, null, 2);

We can write a custom pipe using JSON.stringify with 4 spaces

export class JsonTabPipe implements PipeTransform {

  transform(value: any): string {
    return JSON.stringify(value, null, 4);

Angular JSON pipe circular pipe

Let’s have an model parent and child model in typescript.

export class Parent {
  id: number;
  child: Child;

export class Child {
  name: string;
  parent: Parent;

Let’s create an data initialize in parent and child object.

import { Component } from '@angular/core';
import { Child, Parent } from './parent';

  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  a = { name: 'Groucho', sibling: '' };
  b = { name: 'Harpo', sibling: this.a };
  parent: Parent;
  child: Child;
  constructor() {
    this.child = { name: 'ram', parent: this.parent };
    this.parent = { id: 1, child: this.child };

  ngOnInit() {}

And existing template gives an error

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

It gives an error TypeError: Converting circular structure to JSON

So, json pipe will not work in Angular application.

you can use below JSON stringify way of using circular object.


JSON pipe is not working in Angular

When you are using json pipe, You used to get following errors

  • Unhandled Promise rejection: Template parse errors The pipe ‘json’ could not be found
  • JSON pipe not works in Angular
  • pipe not found in Angular

The reason is json pipe is an pipe from CommonModule of @angular/common module.

You have to import CommonModule in application module i.e app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import {
} from '@angular/platform-browser/animations';

import { AppComponent } from './app.component';
import { CommonModule } from '@angular/common';

  imports: [
  declarations: [AppComponent],
  bootstrap: [AppComponent]
export class AppModule {}

Angular json pipe stackblitz example

JSON pipe example is written in stackblitz example


Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
You'll get a notification every time a post gets published here.

Related posts

Angular Material list | Best mat-list and item examples

Fix for Property has no initializer and is not definitely assigned in the constructor

How to convert json to/from  object in angular|Typescript 

Angular ngFor index - How to get current last even and odd index?

How to convert number to words in Angular|Typescript example

How to Format array of dates in typescript Angular example

In this post, you learn writing comments in Angular and typescript. You can also write single multiline and documentation comments in Typescript. This includes declare comments in Angular typescript and template HTML components.