td-json-formatter

td-json-formatter renders a javascript object in JSON format the same way the chrome/firefox console would render it using console.log().

Hovering on nodes will bring out a preview tooltip of the first 5 objects/properties of the node.

The tree is collapsable/expandable so you can navigate through its nodes.

API Summary

Inputs

• key?: string
  • Tag to be displayed as root of formatted object.
• data: any
  • JS object to be formatted.
• levelsOpen?: number
  • Levels opened by default when JS object is formatted and rendered.

Methods

• refresh: function
  • Refreshes json-formatter and rerenders [data]

Setup

Import the [CovalentJsonFormatterModule] in your NgModule:

import { CovalentJsonFormatterModule } from '@covalent/core/json-formatter';
@NgModule({
  imports: [
    CovalentJsonFormatterModule,
    ...
  ],
  ...
})
export class MyModule {}

Usage

Simply add the component and pass the object to be formatted as a [data] input.

Example for HTML usage:

<td-json-formatter [data]="object" key="root" [levelsOpen]="1">
</td-json-formatter>