ng2-json-editor
v0.25.52
Published
Angular2 component for editing large json documents
Downloads
181
Maintainers
Readme
ng2-json-editor
Angular2 component for editing large json documents.
USAGE
Live Demo
Here is a live example of ng2-json-editor: https://inveniosoftware-contrib.github.io/ng2-json-editor
Quick start
Install
npm install --save ng2-json-editor
yarn add ng2-json-editor
Style Requirements
- Bootstrap
- Font Awesone
- KaTeX (Needed when using
latexPreviewEnabled
config)
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
import { JsonEditorModule } from 'ng2-json-editor';
Then add it to your module's imports
.
Use
<json-editor [config]="config" [schema]="mySchema" [(record)]="myRecord""></json-editor>
config: JsonEditoConfig
: configuration object. See configuration docs for options.schema: JSONSchema
: valid json-schema for the record. See json schema limitationsrecord: object
: valid json to be edited.recordChange: EventEmitter<object>
: emitted when record change,$event
is the edited record.jsonPatches: Array<JsonPatch>
: array of json patches to be displayed as conflicts. See json-patch RFCjsonPatchesChange: EventEmitter<Array<JsonPatch>>
: emitted when jsonPatches change,$event
is the update array of json patches.problemMap (={})
: problems for individual parts of the record (format should be problem-map.jsontemplates: { [templateName: string]: TemplateRef<any> }
: Templates with name, to be used by configured fields for example autocomplete result item.
Example
Please have a look at example app
Json Schema Limitations
anyOf
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.
DEVELOPMENT
Quick start
Make sure you have Node version >= 6.9 and NPM >= 3
Setup
# 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
yarn install
# build for the first time and start example app to see changes
yarn start
# in another terminal session
# watch changes on src, so that all will be available on example app immediately
yarn gulp watch
Working with npm link
# in ng2-json-editor
# do initial build into dist
yarn build
# copy package.json to dist
yarn copy
# go to dist folder and link it
cd dist
npm link
# remove node_modules inside dist which might cause weird errors
rm -rf node_modules/
# in another terminal session
# watch changes on src, so that all will be available on the linked module
yarn gulp watch
# in another module
npm link ng2-json-editor
Debug e2e tests with vscode
yarn start
- Put breakpoints
- Go to debug view (
shift+mod+d
) - Run debugger with
e2e
configuration (f5
)
Useful commands
# build the editor and start the server with example app
yarn start
# run unit tests
yarn test:unit
# run e2e tests (an instance should be running)
yarn test:e2e
# test and watch (for usually debugging tests)
yarn test:watch
# build
yarn build
Contributing
Please see CONTRIBUTING