https://github.com/devmark/ngx-jsoneditor

a wrapper for json editor(http://jsoneditoronline.org)
https://github.com/devmark/ngx-jsoneditor

angular editor json json-editor

Last synced: 23 days ago
JSON representation

a wrapper for json editor(http://jsoneditoronline.org)

• Host: GitHub
• URL: https://github.com/devmark/ngx-jsoneditor
• Owner: devmark
• Created: 2017-05-05T14:44:31.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2021-09-06T12:20:18.000Z (over 3 years ago)
• Last Synced: 2024-11-09T10:47:54.022Z (about 1 month ago)
• Topics: angular, editor, json, json-editor
• Language: TypeScript
• Homepage:
• Size: 8.79 KB
• Stars: 8
• Watchers: 3
• Forks: 8
• Open Issues: 7
• Metadata Files:
  • Readme: README.MD

Awesome Lists containing this project

README

        
# ngx-jsoneditor

## Installation

- Include JSONEditor css/js in your application :

```

```

To install this library, run:

```bash

$ npm install ngx-jsoneditor --save

```

## Consuming your library

Once you have published your library to npm, you can import your library in any Angular application by running:

```bash

$ npm install ngx-jsoneditor

```

and then from your Angular `AppModule`:

```typescript

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Import your library

import { JSONEditorModule } from 'ngx-jsoneditor';

@NgModule({

  declarations: [

    AppComponent

  ],

  imports: [

    // Specify your library as an import

    JSONEditorModule

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }

```

Once your library is imported, you can use its components, directives and pipes in your Angular application:

```javascript

import { Component } from '@angular/core';

@Component({

  selector: 'sample',

  template: `

  

  

    collapseAll

    expandAll

  `

})

export class Sample{

  constructor(){

    this.jsonContent = {

        "Array": [1, 2, 3],

        "Boolean": true,

        "Null": null,

        "Number": 123,

        "Object": {"a": "b", "c": "d"},

        "String": "Hello World"

    };

  }

  onChange(value){

      

  }

}

```

## Configuration

* `config` : The configuration object for JSONEditor see https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#configuration-options

## Development

To generate all `*.js`, `*.d.ts` and `*.metadata.json` files:

```bash

$ npm run build

```

To lint all `*.ts` files:

```bash

$ npm run lint

```

## License

MIT © [DevMark](mailto:[email protected])