json-editor integration in Angular

How to integrate js library which helps in JSON building and manipulating using a GUI (interface) for a non coding user

We will integrate this library https://github.com/json-editor/json-editor

Download & Install

npm install @json-editor/json-editor

Add the JS lib file in your angular.json scripts section as follows

"scripts": [ ... 
	"./node_modules/@json-editor/json-editor/dist/jsoneditor.js"
	]

// UI code
<div class="container">
  <div class="row">
    <div class="col-md-12" id="editor"></div>
  </div>
</div>

// Angular typescript code
import { Component, OnInit, AfterViewInit } from '@angular/core';
import { JSONEditor } from '@json-editor/json-editor';

@Component({
  selector: 'app-distribution-channel-config',
  templateUrl: './distribution-channel-config.component.html',
  styleUrls: ['./distribution-channel-config.component.scss']
})
export class DistributionChannelConfigComponent implements OnInit {
  public options: any = {
    theme: 'bootstrap4'
  }

  constructor() { }

  ngOnInit() {
    console.log(JSONEditor.defaults);
    var element = document.getElementById('editor');
    if (element) {
      var editor = new JSONEditor(element, {
        theme: 'bootstrap4',
        schema: {  // Schema defination is mandatory - it should as per your JSON requirements
          type: "string",
          title: "Car"
        }
      });
    }
    editor.on('ready', () => {
      // Now the api methods will be available
      editor.setValue({ name: "Some value" });
      editor.enable();
      console.log('on ready function being called.')
      // editor.validate();
    });
  }

  ngAfterViewInit() {
    // you can use ngAfterViewInit as well, in case the schema needs to be prepared after the server/API call 
  }

}