ngx-json-treeview

A simple Angular component to display object data in an expandable JSON tree view.

Key Features

• Expandable/collapsible nodes.
• Configurable initial expansion state and depth.
• Optional click handling for value nodes.
• Keyboard navigable

Demo

https://stackblitz.com/edit/ngx-json-treeview

Install

npm install ngx-json-treeview

Usage

To render JSON in its fully expanded state.

<ngx-json-treeview [json]="someObject" />

To render JSON with all nodes collapsed.

<ngx-json-treeview [json]="someObject" [expanded]="false" />

Alternatively, expand only to a max depth by default.

<ngx-json-treeview [json]="someObject" [depth]="1" />

You can enable the user to click on values. Provide onValueClick to implement the desired behavior.

<ngx-json-treeview [json]="someObject" [enableClickableValues]="true" (onValueClick)="onValueClick($event)" />

Theming

Theming can be done with CSS variables

--ngx-json-string        /* color of string values */
--ngx-json-number        /* color of number values */
--ngx-json-boolean       /* color of boolean values */
--ngx-json-date          /* color of date values */
--ngx-json-function      /* color of function values */
--ngx-json-null          /* color of null values */
--ngx-json-null-bg       /* background color of null values */
--ngx-json-undefined     /* color of undefined values */
--ngx-json-toggler       /* color of toggler */
--ngx-json-key           /* color of keys */
--ngx-json-punctuation   /* color of punctuation (':', '{', '}', etc) */
--ngx-json-value         /* color of values */
--ngx-json-undefined-key /* color for key of undefined values */
--ngx-json-label         /* color of preview labels */
--ngx-json-font-family   /* font-family */
--ngx-json-font-size     /* font-size */

Thanks

ngx-json-treeview is originally based on ngx-json-viewer by Vivo Xu and contributors.