Angular 2+ Integration

Hi json-editor team, I have an angular 5 project and I can`t figure out how to properly import the json-editor module into an angular component.

So far I installed the jso-editor with npm and the status is like this.

angular ts

import { Component, OnInit } from '@angular/core';
import * as JSONEditor from '@json-editor/json-editor';
@Component({
  selector: 'app-angular-component',
  template: `<div id="configuration_editor"></div>`,
})
export class AngularComponent implements OnInit {
  configuration_editor: any;
  constructor() {
    const element = document.getElementById('configuration_editor');
    this.configuration_editor = new JSONEditor(element, {});
  }

  ngOnInit() {}
}

console output

Try `npm install @types/@json-editor/json-editor` if it exists or add a new declaration (.d.ts) file containing `declare module '@json-editor/json-editor';`

[osharav]

To continue @trsh’s good advice, here is a full example:

import {Component, OnInit} from '@angular/core';
import * as JSONEditor from '@json-editor/json-editor';
import {Inject} from '@angular/core';
import {DOCUMENT} from '@angular/common';

JSONEditor.__proto__.constructor();

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  private doc: any;

  constructor(@Inject(DOCUMENT) document) {
    this.doc = document;
  }

  schema = {
    'type': 'object',
    'properties': {
      'aaa': {
        'type': 'string'
      },
      'zzz': {
        'type': 'integer'
      }
    },
    'required': [
      'aaa',
      'zzz'
    ],
    'additionalProperties': false
  };

  ngOnInit() {
    const elem = this.doc.getElementById('editor');
    const generatedUI = new (<any>window).JSONEditor(elem, {schema: this.schema});
  }

}

[belvederef]

I was able to make it work importing the package with:

import { JSONEditor } from '@json-editor/json-editor/dist/jsoneditor.js'