JSON viewer

A collapsible JSON tree.

"name": "ng-blatui"

"ssr": true

0: "button"

1: "select"

2: "tree"

]

"stars": 0

"license": "MIT"

}

import { BuiJsonViewer } from 'ng-blatui';

<bui-json-viewer [data]="response" />

Collapsed

<bui-json-viewer [data]="response" [expanded]="false" />

"id": 1

"name": "Ada Lovelace"

"role": "Admin"

}

"id": 2

"name": "Grace Hopper"

"role": "Editor"

}

"id": 3

"name": "Alan Turing"

"role": "Viewer"

}

]

<!-- a JSON array at the root -->
<bui-json-viewer [data]="rows" />
// rows = [{ id: 1, name: 'Ada' }, …]

Prop	Type	Default	Description
`data`	`unknown`	`null`	Arbitrary JSON value to render; a string is parsed as JSON when possible.
`expanded`	`boolean`	`true`	Whether nodes start expanded.

Prop	Type	Default	Description
`value`	`unknown`	`null`	Arbitrary JSON value rendered by this node.
`keyName`	`string \| number \| null`	`null`	Object key or array index labeling this node, or null at the root.
`expanded`	`boolean`	`true`	Whether this node starts expanded.

Every ng-blatui component also accepts a class input to merge extra Tailwind classes onto the host.