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.

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-array : color of array values
• --ngx-json-object : color of object 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.