Over a million developers have joined DZone.

Angular 2: Using the JSONPipe for Debugging

Remember the JSON filter in Angular 1? Here's how to use it in Angular 2.

· Web Dev Zone

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

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 2. 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.

Image title

<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 2

The very same holds for Angular 2, 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?

Try it Yourself

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

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

json,angularjs,web dev

Published at DZone with permission of Juri Strumpflohner, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

The best of DZone straight to your inbox.

Please provide a valid email address.

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}