Angular2 component for editing large json documents.
Here is a live example of ng2-json-editor: https://inveniosoftware-contrib.github.io/ng2-json-editor
npm install --save ng2-json-editor
Styles above must be available globally in your application, if you are using Angular CLI you can have a look at example-app's angular-cli.json to see how to include those styles in your application.
import { JsonEditorModule } from 'ng2-json-editor';
Then add it to your module's imports
.
<json-editor [config]="config" [schema]="mySchema" [record]="myRecord" (onRecordChange)="doStuffWithNewRecord($event)"></json-editor>
config
: configuration object. See configuration docs for options.schema
: valid json-schema for the record. See json schema limitationsrecord
: valid json to be edited.onRecordChange
emitted when record change,$event
is the edited record.errorMap (={})
: errors for individual parts of the record (format should be errors-map.json
Please have a look at example app
ng2-json-editor
has very limited support for anyOf
, support where all anyOf
items have same properties
and they are objects with primitive properties. Before display, it picks the first anyOf
item, merges all enum values and
removes pattern
and format
rules.
Make sure you have Node version >= 6.9 and NPM >= 3
# clone our repo or alternatively your fork
git clone https://github.com/inveniosoftware-contrib/ng2-json-editor.git
# change directory to our repo
cd ng2-json-editor
# install the repo with npm
npm install
# build for the first time and start example app to see changes
npm start
# in another terminal session
# watch changes on src, so that all will be available on example app immediately
gulp watch
# build the editor and start the server with example app
npm start
# run unit tests
npm run test:unit
# run e2e tests (an instance should be running)
npm run test:e2e
# test and watch (for usually debugging tests)
ng test
# build
gulp build
Please see CONTRIBUTING