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 [email protected]/common';

    imports: [ CommonModule ]

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

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

    constructor() {
        this.myObj = {
            name: 'Juri',
            website: 'http://juristr.com',
            twitter: [email protected]'

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. :smiley: