A simple tree viewer component for Angular.
Demo
You can check the demo on Github Pages
Code
Installation
npm i ng-json-tree-view
Usage
Import the module NgJsonTreeViewModule
in your AppModule
Insert the ng-json-tree-view
tag in your component html passing a JSON Object:
jsonObject = {
menu: {
id: 'file',
value: 'File',
popup: {
menuitem: [
{ value: 'New', onclick: 'CreateNewDoc()' },
{ value: 'Open', onclick: 'OpenDoc()' },
{ value: 'Close', onclick: 'CloseDoc()' },
],
},
},
};
<ng-json-tree-view [obj]="jsonObject"></ng-json-tree-view>
The original object can be full edited by default. You can activate the readonly
property to prevent this:
<ng-json-tree-view [obj]="jsonObject" [readonly]="true"></ng-json-tree-view>