{"id":13808921,"url":"https://github.com/hivivo/ngx-json-viewer","last_synced_at":"2025-05-16T16:07:57.109Z","repository":{"id":38982972,"uuid":"97057251","full_name":"hivivo/ngx-json-viewer","owner":"hivivo","description":"JSON formatter and viewer in HTML for Angular","archived":false,"fork":false,"pushed_at":"2024-04-11T10:36:11.000Z","size":981,"stargazers_count":183,"open_issues_count":58,"forks_count":74,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-05-04T12:56:47.329Z","etag":null,"topics":["angular","angular13","angular14","json-format","json-formatter","ngx-json-viewer"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/hivivo.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-07-12T22:31:31.000Z","updated_at":"2025-03-31T21:14:52.000Z","dependencies_parsed_at":"2023-02-08T07:45:23.198Z","dependency_job_id":"0ae90dc9-0d90-4aa1-9712-493327ef76a8","html_url":"https://github.com/hivivo/ngx-json-viewer","commit_stats":{"total_commits":52,"total_committers":12,"mean_commits":4.333333333333333,"dds":0.5192307692307692,"last_synced_commit":"5c04d3731b54fb065aac0aa54830f6a1761915b2"},"previous_names":[],"tags_count":16,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hivivo%2Fngx-json-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hivivo%2Fngx-json-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hivivo%2Fngx-json-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/hivivo%2Fngx-json-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/hivivo","download_url":"https://codeload.github.com/hivivo/ngx-json-viewer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252823911,"owners_count":21809712,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular13","angular14","json-format","json-formatter","ngx-json-viewer"],"created_at":"2024-08-04T01:01:55.138Z","updated_at":"2025-05-16T16:07:57.050Z","avatar_url":"https://github.com/hivivo.png","language":"TypeScript","funding_links":[],"categories":["Table of contents"],"sub_categories":["Third Party Components"],"readme":"# ngx-json-viewer\n\nJSON formatter and viewer for Angular\n\nLive demo:\n- Angular 14: https://stackblitz.com/edit/angular-14-ngx-json-viewer\n- Angular 5: https://stackblitz.com/edit/ngx-json-viewer\n\n## Install\n```bash\nnpm install ngx-json-viewer\n```\n\nor\n\n```bash\nyarn add ngx-json-viewer\n```\n\nFor older Angular:\n\n```bash\n# For Angular 4/5/6/7+:\nnpm install ngx-json-viewer@2\n\n# For Angular 2:\nnpm install ngx-json-viewer@1\n```\n\nNPM Package: https://www.npmjs.com/package/ngx-json-viewer\n\n## Usage\n\nIn your `app.module.ts` import `NgxJsonViewerModule` like\n```js\nimport { NgxJsonViewerModule } from 'ngx-json-viewer';\n\n@NgModule({\n  ...,\n  imports: [\n    ...,\n    NgxJsonViewerModule,\n    ...\n  ],\n  ...\n})\nexport class AppModule { }\n```\n\nIn your component:\n```html\n\u003cngx-json-viewer [json]=\"someObject\"\u003e\u003c/ngx-json-viewer\u003e\n```\n\nTo collapse all nodes at first:\n```html\n\u003cngx-json-viewer [json]=\"someObject\" [expanded]=\"false\"\u003e\u003c/ngx-json-viewer\u003e\n```\n\nTo only expand 3 levels:\n```html\n\u003cngx-json-viewer [json]=\"someObject\" [depth]=\"3\"\u003e\u003c/ngx-json-viewer\u003e\n```\n\n### Theming\n\nTheming can be done with CSS variables\n\n* --ngx-json-string : color of string values\n* --ngx-json-number : color of number values\n* --ngx-json-boolean : color of boolean values\n* --ngx-json-date : color of date values\n* --ngx-json-array : color of array values\n* --ngx-json-object : color of object values\n* --ngx-json-function : color of function values\n* --ngx-json-null : color of null values\n* --ngx-json-null-bg : background color of null values\n* --ngx-json-undefined : color of undefined values\n* --ngx-json-toggler : color of toggler\n* --ngx-json-key : color of keys\n* --ngx-json-separator : color of separators\n* --ngx-json-value : color of values\n* --ngx-json-undefined-key : color for key of undefined values\n* --ngx-json-font-family : font-family \n* --ngx-json-font-size : font-size \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhivivo%2Fngx-json-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fhivivo%2Fngx-json-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fhivivo%2Fngx-json-viewer/lists"}