Registry / devops / ngx-json-viewer

ngx-json-viewer

library3.2.1jsnpmunverified

Angular component for displaying JSON data in a collapsible, tree-like view. Current stable version is 3.2.1, released periodically. Key differentiators: fully Angular-native (no jQuery), supports theming via CSS variables, configurable depth and initial expansion, works with Angular 2+. Older versions (v1 for Angular 2, v2 for Angular 4-7) have different APIs and are in maintenance mode.

devops

npm install ngx-json-viewer

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · NGX-JSON-VIEWER

ngx-json-viewer

devopsjavascriptv3.2.1

harness data pending

Install & Compatibility

Where this runs

No compatibility data collected yet for this library.

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

NgxJsonViewerModule

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

✗ import { NgxJsonViewerModule } from 'ngx-json-viewer/ngx-json-viewer.module';

ESM import path; also sets up the component in your Angular module.

NgxJsonViewerComponent

✓ import { NgxJsonViewerComponent } from 'ngx-json-viewer';

Can be used directly if you are using standalone components (Angular 14+).

require('ngx-json-viewer')

✓

✗ const ngxJsonViewer = require('ngx-json-viewer');

The package is ESM-only; CommonJS require will not work. Use import statements.

Minimal Angular setup: import the module, bind a JSON object, and display it with expandable/collapsible nodes.

// app.module.ts import { NgxJsonViewerModule } from 'ngx-json-viewer'; @NgModule({ imports: [ NgxJsonViewerModule ], ... }) export class AppModule { } // app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: ` <ngx-json-viewer [json]="jsonData" [expanded]="true" [depth]="5"></ngx-json-viewer> `, styles: [` :host { display: block; } `] }) export class AppComponent { jsonData = { name: 'John', age: 30, active: true, address: { street: '123 Main St', city: 'Anytown', zip: '12345' }, hobbies: ['reading', 'coding', 'hiking'] }; }

Debug

Known issues

breakingVersion 3.x drops support for Angular < 14.

fix

Upgrade to Angular 14+ or use ngx-json-viewer@2 for Angular 4-7.

affects: >=3.0.0 <4.0.0

breakingVersion 2.x drops support for Angular 2/3 and introduces a new API with [json] input instead of [data].

fix

Use [json] input instead of [data]; for Angular 2 use version 1.x.

affects: >=2.0.0 <3.0.0

deprecatedThe old CSS custom property --ngx-json-font-family is incorrectly named; it is used for font-size as well.

fix

Use --ngx-json-font-family for font-family and --ngx-json-font-size for font-size (if supported). Check source if not available.

affects: >=3.0.0

gotchaThe [depth] input does not work correctly when [expanded] is false; nodes remain collapsed regardless of depth.

fix

Set [expanded]="true" if you want depth-based expansion.

affects: >=3.0.0

Errors

Common errors & fixes

Cannot find module 'ngx-json-viewer' or its corresponding type declarations.

Missing import or type definitions not loaded.

fix

Ensure you have run `npm install ngx-json-viewer` and that your tsconfig has `"module": "esnext"` and `"moduleResolution": "node"`.

ERROR in 'NgxJsonViewerModule' is not an NgModule

Trying to import a named export that does not exist or using a wrong path.

fix

Use `import { NgxJsonViewerModule } from 'ngx-json-viewer';` (correct path).

Can't bind to 'json' since it isn't a known property of 'ngx-json-viewer'.

NgxJsonViewerModule is not imported in the module where the component is used.

fix

Add NgxJsonViewerModule to the imports array of the module that declares the component using <ngx-json-viewer>.

Upgrade

Version history

3.2.1latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/hivivo/ngx-json-viewer ↗

packagengx-json-viewer ↗

homepagehttps://github.com/hivivo/ngx-json-viewer#readme ↗