A powerful way of debugging, especially templates, in Angular 1 was the JSON pipe (or filter) which could be used within a template. The pipe still natively exists in Angular. Here's how you can import and use it.

Contents are based on Angular version >=2

Especially when you have to debug your Angular templates it was particularly useful in Angular 1 to use the JSON filter.


<h1>Some template</h1>
<pre>{{ myObj | json }}</pre>

As a result you got a nicely formatted JSON representation of your databound JavaScript object.

Use the JSONPipe in Angular

The very same holds for Angular, which has a built-in JSONPipe object as well.

To use it you have to import the CommonModule from the @angular/common package into your own module.


import { CommonModule } from '@angular/common';


@NgModule({
    ...
    imports: [ CommonModule ]
    ...
})

Then you can start using it in your template, just as you did in Angular 1.


@Component({
    selector: 'my-app',
    template: `
      <pre>{{ myObj | json }}</pre>
    `
})
export class MyAppComponent {
    myObj: any;

    constructor() {
        this.myObj = {
            name: 'Juri',
            website: 'http://juristr.com',
            twitter: '@juristr'
        };
    }
}

Easy, isn’t it :wink:.

Try it yourself

Here’s a Plunker to play around with: https://plnkr.co/edit/zA3ogWLGwg0raLyz1iVj?p=preview


If you enjoyed this post you might want to follow me on Twitter for more news around JavaScript and Angular or watch my Egghead.io video lessons. :smiley: