$1

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