Registry / testing / ngx-json-viewer-scrolling

ngx-json-viewer-scrolling

JSON →
library2.3.1jsnpmunverified

Angular component for displaying JSON objects in an expandable, collapsible tree view. Version 2.3.1 supports Angular 5+ with RxJS 5.5.2+. It offers scrolling support for large JSON and optionally collapses all nodes initially. Differentiators include a simple API, TypeScript types, and a live demo. Compatible with Angular 2 via v1 branch.

npm install ngx-json-viewer-scrolling
INSTALL
IMPORT
SIG · NGX-JSON-VIEWER-SC
N
ngx-json-viewer-scrolling
testingjavascriptv2.3.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-scrolling'
import { NgxJsonViewerModule } from 'ngx-json-viewer'
The package name is 'ngx-json-viewer-scrolling', not 'ngx-json-viewer'. The latter is a different package.
NgxJsonViewerComponent
import { NgxJsonViewerComponent } from 'ngx-json-viewer-scrolling'
Use this if you need a direct reference to the component class.
NgxJsonViewerModule (standalone)
import { NgxJsonViewerComponent } from 'ngx-json-viewer-scrolling'
import { NgxJsonViewerModule } from 'ngx-json-viewer-scrolling'
In Angular 14+, standalone components may not require NgxJsonViewerModule; import the component directly.

Shows installation and basic usage: import module, use component with json input and optional expanded binding.

// app.module.ts import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { NgxJsonViewerModule } from 'ngx-json-viewer-scrolling'; import { AppComponent } from './app.component'; @NgModule({ imports: [ BrowserModule, NgxJsonViewerModule ], declarations: [AppComponent], bootstrap: [AppComponent] }) export class AppModule { } // app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', template: '<ngx-json-viewer [json]="data" [expanded]="false"></ngx-json-viewer>' }) export class AppComponent { data = { name: 'ngx-json-viewer', version: 2, features: ['collapsible', 'scrolling'] }; }
Debug
Known issues
breakingBreaking change: v2 requires Angular 5+ and RxJS 5.5.2+. v1 for Angular 2.
fix
For Angular 2, install v1: npm install ngx-json-viewer-scrolling@1
affects: >=2.0.0
deprecatedImport path from README uses 'ngx-json-viewer' which is incorrect for this package.
fix
Use correct import: import { NgxJsonViewerModule } from 'ngx-json-viewer-scrolling'
affects: *
gotchaComponent selector is 'ngx-json-viewer' but the package name includes '-scrolling' - do not confuse with other ngx-json-viewer packages.
fix
Always use 'ngx-json-viewer-scrolling' for npm install and import path.
affects: *
Errors
Common errors & fixes
Cannot find module 'ngx-json-viewer' or its corresponding type declarations.
Import path in code uses 'ngx-json-viewer' instead of 'ngx-json-viewer-scrolling'.
fix
Change import to 'ngx-json-viewer-scrolling'
ERROR in The target entry-point "ngx-json-viewer-scrolling" has missing dependencies: @angular/core @angular/common rxjs
Missing peer dependencies for Angular and RxJS.
fix
Install required peer deps: npm install @angular/core @angular/common rxjs
Upgrade
Version history
2.3.1latest on npm
Audit
Dependencies
@angular/coreoptionalRequired for Angular component functionality
@angular/commonoptionalRequired for Angular directives and pipes
rxjsoptionalRequired for reactive streams
Agent activity
9 hits · last 30 days
node
8
Resources
ngx-json-viewer-scrolling — npm install ngx-json-viewer-scrolling · libregistry