@covalent/json-formatter

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

Properties:

Name	Type	Description
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.

Setup

Import the [CovalentJsonFormatterModule] using the forRoot() method in your NgModule:

import { CovalentJsonFormatterModule } from '@covalent/json-formatter';
@NgModule({
  imports: [
    CovalentJsonFormatterModule.forRoot(),
    ...
  ],
  ...
})
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>