Juri Strumpflohner Follow Juri is a full stack developer and tech lead with a special passion for the web and frontend development. He creates online videos for Egghead.io, writes articles on his blog and for tech magazines, speaks at conferences and holds training workshops. Juri is also a recognized Google Developer Expert in Web Technologies

Angular: Using the JSONPipe for debugging

Remember the JSON filter in Angular 1? Here's how you can use it in Angular

Sep 21, 2016 2 min read

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.

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

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

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.

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


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

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

{% raw %}
@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'
        };
    }
}
{% endraw %}

Easy, isn’t it 😉.

Try it yourself

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

Questions? Thoughts? Hit me up on Twitter