Ngx-Json-handler

Usage

First, Import Angular JsonHandler module in root

import { NgxJsonHandlerModule } from 'ngx-json-handler';

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

Then setup your component models as below :

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

@Component({
  selector: 'app-root',
  template: ' <ngx-json-handler [dynamicHeight]="'500px'" [jsonData]="jsonData" [showCopyButton]="true" [title]="'Request Data'"></ngx-json-handler>',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 jsonData = {
    "name": "John Doe",
    "age": 30,
    "email": "[email protected]",
    "isSubscribed": true,
    "address": {
        "street": "123 Main St",
        "city": "Anytown",
        "state": "CA",
        "zip": "12345"
    },
    "phoneNumbers": [
        {
            "type": "home",
            "number": "555-555-5555"
        },
        {
            "type": "work",
            "number": "555-555-1234"
        }
    ]
}
}

Note : For better styling, add below line to your styles array in angular.js file

"node_modules/jsoneditor/dist/jsoneditor.min.css",