npm

Need private packages and team management tools?Check out npm Orgs. »

ng2-json-editor

0.25.12 • Public • Published

Build Status Coverage Status npm version

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

Style Requirements

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 limitations
  • record: 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 RFC
  • jsonPatchesChange: 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.json
  • templates: { [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 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

Working with npm link

# in ng2-json-editor 
 
# do initial build into dist 
npm run build
 
# copy package.json to dist 
npm run 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 
gulp watch
# in another module 
 
npm link ng2-json-editor

Debug e2e tests with vscode

  • npm 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 
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 

Contributing

Please see CONTRIBUTING

install

npm i ng2-json-editor

Downloadsweekly downloads

189

version

0.25.12

license

GPL-2.0

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability