npm i ngx-json-viewer
app.module.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { FormsModule } from '@angular/forms'; import { NgxJsonViewerModule } from 'ngx-json-viewer'; import { AceEditorModule } from 'ng2-ace-editor'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, FormsModule, NgxJsonViewerModule, AceEditorModule ], declarations: [ AppComponent ], bootstrap: [ AppComponent ] }) export class AppModule { } |
app.component.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 |
import { Component } from '@angular/core'; @Component({ selector: 'my-app', templateUrl: './app.component.html', styleUrls: [ './app.component.css' ] }) export class AppComponent { data = { 'simple key': 'simple value', 'numbers': 1234567, 'simple list': ['value1', 22222, 'value3'], 'special value': undefined, 'owner': null, 'simple obect': { 'simple key': 'simple value', 'numbers': 1234567, 'simple list': ['value1', 22222, 'value3'], 'simple obect': { 'key1': 'value1', 'key2': 22222, 'key3': 'value3' } } }; get code () { return JSON.stringify(this.data, null, 2); } set code (v) { try{ this.data = JSON.parse(v); } catch(e) { console.log('error occored while you were typing the JSON'); }; } } |
app.component.html
|
1 2 3 |
<ace-editor [(text)]="code" mode="json" style="height:400px;"></ace-editor> <ngx-json-viewer [json]="data"></ngx-json-viewer> |
FULL SOURCE CODE
