Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hivivo/ngx-json-viewer
JSON formatter and viewer in HTML for Angular
https://github.com/hivivo/ngx-json-viewer
angular angular13 angular14 json-format json-formatter ngx-json-viewer
Last synced: 4 days ago
JSON representation
JSON formatter and viewer in HTML for Angular
- Host: GitHub
- URL: https://github.com/hivivo/ngx-json-viewer
- Owner: hivivo
- License: mit
- Created: 2017-07-12T22:31:31.000Z (over 7 years ago)
- Default Branch: main
- Last Pushed: 2024-04-11T10:36:11.000Z (8 months ago)
- Last Synced: 2024-11-27T07:03:51.642Z (15 days ago)
- Topics: angular, angular13, angular14, json-format, json-formatter, ngx-json-viewer
- Language: TypeScript
- Homepage:
- Size: 958 KB
- Stars: 174
- Watchers: 5
- Forks: 72
- Open Issues: 58
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular - ngx-json-viewer - JSON formatter and viewer in HTML for Angular. (Table of contents / Third Party Components)
- fucking-awesome-angular - ngx-json-viewer - JSON formatter and viewer in HTML for Angular. (Table of contents / Third Party Components)
README
# ngx-json-viewer
JSON formatter and viewer for Angular
Live demo:
- Angular 14: https://stackblitz.com/edit/angular-14-ngx-json-viewer
- Angular 5: https://stackblitz.com/edit/ngx-json-viewer
## Install
```bash
npm install ngx-json-viewer
```
or
```bash
yarn add ngx-json-viewer
```
For older Angular:
```bash
# For Angular 4/5/6/7+:
npm install ngx-json-viewer@2
# For Angular 2:
npm install ngx-json-viewer@1
```
NPM Package: https://www.npmjs.com/package/ngx-json-viewer
## Usage
In your `app.module.ts` import `NgxJsonViewerModule` like
```js
import { NgxJsonViewerModule } from 'ngx-json-viewer';
@NgModule({
...,
imports: [
...,
NgxJsonViewerModule,
...
],
...
})
export class AppModule { }
```
In your component:
```html
```
To collapse all nodes at first:
```html
```
To only expand 3 levels:
```html
```
### Theming
Theming can be done with CSS variables
* --ngx-json-string : color of string values
* --ngx-json-number : color of number values
* --ngx-json-boolean : color of boolean values
* --ngx-json-date : color of date values
* --ngx-json-array : color of array values
* --ngx-json-object : color of object values
* --ngx-json-function : color of function values
* --ngx-json-null : color of null values
* --ngx-json-null-bg : background color of null values
* --ngx-json-undefined : color of undefined values
* --ngx-json-toggler : color of toggler
* --ngx-json-key : color of keys
* --ngx-json-separator : color of separators
* --ngx-json-value : color of values
* --ngx-json-undefined-key : color for key of undefined values
* --ngx-json-font-family : font-family
* --ngx-json-font-size : font-size