Wondering what’s next for npm?Check out our public roadmap! »

    ng2-json-editor
    TypeScript icon, indicating that this package has built-in type declarations

    0.25.26 • 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
     
    yarn add 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 
    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

    Install

    npm i ng2-json-editor

    DownloadsWeekly Downloads

    151

    Version

    0.25.26

    License

    GPL-2.0

    Unpacked Size

    1.26 MB

    Total Files

    586

    Last publish

    Collaborators

    • avatar