Wanna keep up to date with the latest webdev stuff? Follow me on Twitter

My friend Todd knows how to create top-notch video courses. Check out Ultimate Angular!

What's this?
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';

    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: '@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: