www.npmjs.com Open in urlscan Pro
104.17.223.175  Public Scan

Form analysis
1 forms found in the DOM

GET /search

<form id="search" method="GET" action="/search" class="_13c93d41 relative flex bg-transparent ph3 ph2 pv2 ph0-ns pv0-ns bt b--black-10 bn-ns">
  <div class="e82b10fd relative dde91b96">
    <div class="_2f299eeb nowrap flex"><span class="_705cdf4f db fl pl3 pr1"><svg width="15px" height="15px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18" aria-hidden="true">
          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <g stroke="#777777" stroke-width="1.3">
              <g>
                <path d="M13.4044,7.0274 C13.4044,10.5494 10.5494,13.4044 7.0274,13.4044 C3.5054,13.4044 0.6504,10.5494 0.6504,7.0274 C0.6504,3.5054 3.5054,0.6504 7.0274,0.6504 C10.5494,0.6504 13.4044,3.5054 13.4044,7.0274 Z"></path>
                <path d="M11.4913,11.4913 L17.8683,17.8683"></path>
              </g>
            </g>
          </g>
        </svg></span><input type="search" role="combobox" name="q" hotkeys="[object Object]" placeholder="Search packages" aria-label="Search packages" aria-controls="typeahead-list-3051" aria-expanded="false" aria-activedescendant=""
        inputref="[object Object]" autocomplete="off" class="_390acbc5 f5 fw3 black relative" value="" element="input"></div>
  </div><button type="submit" class="_0da775bb bn pv2 ph4 f6 white pointer bn pv2 ph4 f6 white pointer" aria-label="Search">Search</button><input type="hidden" name="csrftoken" value="nCF519B3JaAdiJcywQqfywlvxxjnLB-Z4MlOj_WChLS">
</form>

Text Content

skip to:contentpackage searchsign in
❤
 * Pro
 * Teams
 * Pricing
 * Documentation

npm


Search
Sign UpSign In


ANG-JSONEDITOR


3.1.1 • Public • Published a year ago
 * Readme
 * Code Beta
 * 1 Dependency
 * 20 Dependents
 * 45 Versions


ANGULAR JSON EDITOR



Angular Json Editor (wrapper for jsoneditor). View/Edit Json file with
formatting.

StackBlitz template

Working with latest Angular 16.




INSTALLATION

To install this library with npm, run below command:

$ npm install --save jsoneditor ang-jsoneditor

Example:

<json-editor [options]="editorOptions" [data]="data" (change)="getData($event)"></json-editor>


USAGE


CONFIGURATION

First, Import Angular JsonEditor module in root

import { NgJsonEditorModule } from 'ang-jsoneditor' 

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    ....,
    NgJsonEditorModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Then setup your component models as below :

import { Component, ViewChild } from '@angular/core';
import { JsonEditorComponent, JsonEditorOptions } from 'ang-jsoneditor';

@Component({
  selector: 'app-root',
  template: '<json-editor [options]="editorOptions" [data]="data"></json-editor>',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  public editorOptions: JsonEditorOptions;
  public data: any;
  @ViewChild(JsonEditorComponent, { static: false }) editor: JsonEditorComponent;

  constructor() { 
    this.editorOptions = new JsonEditorOptions()
    this.editorOptions.modes = ['code', 'text', 'tree', 'view']; // set all allowed modes
    //this.options.mode = 'code'; //set only one mode
      
      this.data = {"products":[{"name":"car","product":[{"name":"honda","model":[{"id":"civic","name":"civic"},{"id":"accord","name":"accord"},{"id":"crv","name":"crv"},{"id":"pilot","name":"pilot"},{"id":"odyssey","name":"odyssey"}]}]}]}
  }

}

Note : For better styling, add below line to your main style.css file

@import "~jsoneditor/dist/jsoneditor.min.css";


FORMS

Build it integrated with ReactiveForms:

this.form = this.fb.group({
  myinput: [this.data]
});

<form  [formGroup]="form" (submit)="submit()">
    <json-editor [options]="editorOptions2" formControlName="myinput">
    </json-editor>
</form>


EXTRA FEATURES

Besides all the configuration options from the original jsoneditor, Angular Json
Editor supports one additional option:

expandAll - to automatically expand all nodes upon json loaded with the data
input.


TROUBLESHOOT

If you have issue with the height of the component, you can try one of those
solutions:

When you import CSS:

@import "~jsoneditor/dist/jsoneditor.min.css";
textarea.jsoneditor-text{min-height:350px;}

Or Customizing the CSS:

:host ::ng-deep json-editor,
:host ::ng-deep json-editor .jsoneditor,
:host ::ng-deep json-editor > div,
:host ::ng-deep json-editor jsoneditor-outer {
  height: 500px;
}

Or as a inner style in component:

<json-editor class="col-md-12" #editorExample style="min-height: 300px;" [options]="editorOptionsData" [data]="dataStructure"></json-editor>

For code view you can change the height using this example:

.ace_editor.ace-jsoneditor {
  min-height: 500px;
}

Use debug mode to see in your console the data and options passed to jsoneditor.
Copy this and paste in your issue when reporting bugs.

<json-editor [debug]="true" [options]="editorOptionsData" [data]="dataStructure"></json-editor>


JSONOPTIONS MISSING PARAMS

If you find youself trying to use an custom option that is not mapped here, you
can do:

let editorOptions: JsonEditorOptions = new JsonEditorOptions(); (<any>this.editorOptions).templates = [{menu options objects as in json editor documentation}]

See the issue


INTERNET EXPLORER

If you want to support IE, please follow this guide:

 * https://github.com/mariohmol/ang-jsoneditor/issues/44#issuecomment-508650610


MULTIPLE EDITORS

To use multiple jsoneditors in your view you cannot use the same editor options.

You should have something like:

<div *ngFor="let prd of data.products" class="w-100-p p-24" >
  <json-editor [options]="makeOptions()" [data]="prd" (change)="showJson($event)"></json-editor>
</div>

makeOptions = () => {
  return new JsonEditorOptions();
}


DEMO

Demo component files are included in Git Project.

Demo Project with a lot of different implementations (ngInit, change event and
others): [https://github.com/mariohmol/ang-jsoneditor/tree/master/src/app/demo)

When publishing it to npm, look over this docs:
https://docs.npmjs.com/misc/developers


COLLABORATE

Fork, clone this repo and install dependencies. This project just works with
webpack 4 (dont change to 5):

npm i -g rimraf
npm i


LICENSE

MIT(./LICENSE)







VERSIONS


CURRENT TAGS

 * Version
   
   Downloads (Last 7 Days)
   * 
     Tag
 * 3.1.1
   
   16.897
   * latest


VERSION HISTORY

show deprecated versions
 * Version
   
   Downloads (Last 7 Days)
   * 
     Published
 * 3.1.1
   
   16.897
   * a year ago
 * 3.1.0
   
   1.886
   * a year ago
 * 3.0.2
   
   1.093
   * a year ago
 * 3.0.1
   
   6
   * a year ago
 * 3.0.0
   
   119
   * a year ago
 * 2.0.0
   
   201
   * 2 years ago
 * 1.10.5
   
   7.551
   * 4 years ago
 * 1.10.4
   
   363
   * 4 years ago
 * 1.10.3
   
   50
   * 4 years ago
 * 1.10.2
   
   96
   * 4 years ago
 * 1.10.1
   
   1
   * 4 years ago
 * 1.10.0
   
   43
   * 4 years ago
 * 1.9.4
   
   156
   * 4 years ago
 * 1.9.2
   
   7
   * 4 years ago
 * 1.9.1
   
   1.486
   * 5 years ago
 * 1.9.0
   
   35
   * 5 years ago
 * 1.8.4
   
   2.324
   * 5 years ago
 * 1.8.3
   
   27
   * 5 years ago
 * 1.8.2
   
   21
   * 5 years ago
 * 1.8.1
   
   23
   * 5 years ago
 * 1.8.0
   
   13
   * 5 years ago
 * 1.7.8
   
   67
   * 5 years ago
 * 1.7.7
   
   26
   * 5 years ago
 * 1.7.6
   
   0
   * 5 years ago
 * 1.7.5
   
   7
   * 5 years ago
 * 1.7.4
   
   13
   * 5 years ago
 * 1.7.3
   
   10
   * 6 years ago
 * 1.7.2
   
   2
   * 6 years ago
 * 1.7.1
   
   12
   * 6 years ago
 * 1.7.0
   
   8
   * 6 years ago
 * 1.6.2
   
   253
   * 6 years ago
 * 1.6.1
   
   21
   * 6 years ago
 * 1.6.0
   
   0
   * 6 years ago
 * 1.5.12
   
   12
   * 7 years ago
 * 1.5.9
   
   1
   * 7 years ago
 * 1.5.8
   
   2
   * 7 years ago
 * 1.5.7
   
   2
   * 7 years ago
 * 1.5.6
   
   4
   * 7 years ago
 * 1.5.5
   
   0
   * 7 years ago
 * 1.5.4
   
   1
   * 7 years ago
 * 1.5.3
   
   0
   * 7 years ago
 * 1.5.2
   
   1
   * 7 years ago
 * 1.5.1
   
   0
   * 7 years ago
 * 1.0.2
   
   0
   * 7 years ago


PACKAGE SIDEBAR


INSTALL

npm i ang-jsoneditor


REPOSITORY

Gitgithub.com/mariohmol/ang-jsoneditor


HOMEPAGE

github.com/mariohmol/ang-jsoneditor


DOWNLOADSWEEKLY DOWNLOADS

32.848


VERSION

3.1.1


LICENSE

MIT


UNPACKED SIZE

85.6 kB


TOTAL FILES

14


ISSUES

22


PULL REQUESTS

4


LAST PUBLISH

a year ago


COLLABORATORS

 * 

Try on RunKit
Report malware


FOOTER


SUPPORT

 * Help
 * Advisories
 * Status
 * Contact npm


COMPANY

 * About
 * Blog
 * Press


TERMS & POLICIES

 * Policies
 * Terms of Use
 * Code of Conduct
 * Privacy