[angular] ngx-json-viewer JSON formatter and viewer

설치

npm install ngx-json-viewer

or

yarn add ngx-json-viewer

For older Angular:

# For Angular 4/5/6/7:
npm install ngx-json-viewer@2

# For Angular 2:
npm install ngx-json-viewer@1

직접 추가하고 싶다면 package.json에 추가합니다.

"dependencies": {
    "ngx-json-viewer": "^3.0.2"
}

---

사용하기

app.module.ts 에 NgxJsonViewerModule을 import 합니다.

import { NgxJsonViewerModule } from 'ngx-json-viewer';

@NgModule({
  ...,
  imports: [
    ...,
    NgxJsonViewerModule,
    ...
  ],
  ...
})
export class AppModule { }

In your component:

<ngx-json-viewer [json]="someObject"></ngx-json-viewer>

json을 접은 상태로 노출:

<ngx-json-viewer [json]="someObject" [expanded]="false"></ngx-json-viewer>

3depth까지만 노출:

<ngx-json-viewer [json]="someObject" [depth]="3"></ngx-json-viewer>

---

 

예제 코드 : https://stackblitz.com/edit/ngx-json-viewer

StackBlitz

 

​