Expert Angular

JSON Pipe

Similar to a JSON filter in Angular 1.x, we have the JSON pipe, which helps us to transform the string into a JSON format string.

In a lowercase or an uppercase pipe, we transformed the strings; using a JSON pipe, we can transform and display the string into a JSON format string.

The general syntax is shown in the following code snippet:

<pre>{{ myObj | json }}</pre>

Now, let's use the preceding syntax and create a complete Component example, which uses the JSON Pipe:

import { Component } from '@angular/core';@Component({  template: ` <h5>Author Page</h5> <pre>{{ authorObj | json }}</pre> `})export class JSONPipeComponent { authorObj: any;  constructor() { this.authorObj = { name: 'Sridhar Rao', website: 'http://packtpub.com', ...