{"id":13481868,"url":"https://github.com/matiboy/angular2-prettyjson","last_synced_at":"2025-03-17T08:37:03.028Z","repository":{"id":57179685,"uuid":"59794827","full_name":"matiboy/angular2-prettyjson","owner":"matiboy","description":"Angular 2 debug output of objects. Contains a pipe similar to JsonPipe but adds support for spacing and handling of circular structures","archived":false,"fork":false,"pushed_at":"2018-02-25T04:55:21.000Z","size":409,"stargazers_count":41,"open_issues_count":3,"forks_count":10,"subscribers_count":4,"default_branch":"master","last_synced_at":"2024-04-15T04:22:39.861Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/matiboy.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2016-05-27T01:35:44.000Z","updated_at":"2023-10-03T11:15:36.000Z","dependencies_parsed_at":"2022-09-14T03:30:47.933Z","dependency_job_id":null,"html_url":"https://github.com/matiboy/angular2-prettyjson","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matiboy%2Fangular2-prettyjson","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matiboy%2Fangular2-prettyjson/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matiboy%2Fangular2-prettyjson/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/matiboy%2Fangular2-prettyjson/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/matiboy","download_url":"https://codeload.github.com/matiboy/angular2-prettyjson/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243852484,"owners_count":20358271,"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":[],"created_at":"2024-07-31T17:00:56.949Z","updated_at":"2025-03-17T08:37:02.663Z","avatar_url":"https://github.com/matiboy.png","language":"JavaScript","readme":"# Angular 2 Pretty Json v3.0.0\n\nA module for Angular 2 debug output of objects. Contains a pipe similar to [JsonPipe](https://angular.io/docs/ts/latest/api/common/index/JsonPipe-class.html) but adds support for spacing and handling of circular structures.  \nAlso contains a component that outputs any object with syntax highlight.  \n**Warning**: just as the `JsonPipe`, this is an impure pipe and should be used only for debugging purposes.\n\n**Breaking change in 3.0.0** The UMD bundle has moved to a \"bundle\" subdirectory. SymstemJS users should update their system.config. Should not affect AngularCLI and other webpack projects.\n\n## Install\n\n```\nnpm install angular2-prettyjson\n```\n\n## ES2015 / UMD\n\nTwo versions are available: ES2015 modules and UMD. If you are using a project based on the AngularCLI, everything should work from a simple npm install.  \nIf you are using the Angular Quickstart template (or other SystemJS based compilation), please point to the bundle `angular2-prettyjson.umd.min.js` file\ne.g. `systemjs.config.js`:\n\n```\n    map: {\n      ...\n      // other libraries\n      'rxjs':                      'npm:rxjs',\n      'angular2-prettyjson': 'npm:angular2-prettyjson'\n    },\n    packages: {\n      ...,\n      'angular2-prettyjson': {\n        defaultExtension: 'js',\n        main: './bundles/angular2-prettyjson.umd.min.js'\n      }\n```\n\n## Usage\n\nImport PrettyJsonModule to have access to the component and pipes\n```js\nimport {PrettyJsonModule} from 'angular2-prettyjson';\n\n@NgModule({\n    declarations: [\n        AppComponent,\n    ],\n    imports: [\n        PrettyJsonModule,\n    ],\n    providers: [\n    ],\n    bootstrap: [AppComponent]\n})\nexport class AppModule {\n}\n```\n\n### Safe Pipe\n\nThe `SafeJsonPipe` aims to override the `JsonPipe` and so uses the same name \"json\". It also accepts an optional argument `spaces=2` for the JSON stringify spacing.\n\n```js\n@Component({\n  ....\n  template: `\n    \u003cpre\u003e\n    {{ circularObj | json }}\n    {{ circularObj | json:4 }}\n    \u003c/pre\u003e\n  ` // make sure to use a surrounding element with white-space: pre; for best results\n  })\n  ...\n```\n\noutputs\n\n2 spaces (default):\n\n![2 spaces](https://cloud.githubusercontent.com/assets/487758/15599442/d163cf2a-2415-11e6-8097-f1f9f62fd3ce.png)\n\n4 spaces:\n\n![4 spaces](https://cloud.githubusercontent.com/assets/487758/15599411/a6815a8e-2415-11e6-8f1f-e68db77885a2.png)\n\n### Pretty (and safe) Pipe\n\nThe `PrettyJsonPipe` stringifies the object and then adds spans around properties, `null`, arrays etc. You can bind it to the innerHtml of other elements.\n\n```js\n\n@Component({\n  ....\n  template: `\n    \u003cpre [innerHtml]=\"circularObj | prettyjson:3\"\u003e\u003c/pre\u003e\n  `\n  })\n  ...\n```\n\n A good set of styles to use is\n\n ```css\n    pre span {white-space: normal;}\n    .string { color: green; }\n    .number { color: darkorange; }\n    .boolean { color: blue; }\n    .null { color: magenta; }\n    .key { color: red; }\n ```\n\n If you wish to use the `styles` property of the parent component, please prefix each class selector with `:host /deep/`\n e.g.\n\n ```js\n\n@Component({\n  ....\n  template: `\n    \u003cpre [innerHtml]=\"circularObj | prettyjson:3\"\u003e\u003c/pre\u003e\n  `,\n  styles: [`:host /deep/ .string {color:green} ...`]\n  })\n  ...\n```\n\n See output under component below.\n\n### Component\n\n Creates a `pre` element into which the Pretty Json pipe'd object is dumped as HTML. Takes care of styling.\n\n Takes an input `[obj]` that can be data bound to any object.\n\n Make sure `PrettyJsonModule` is imported in your own module.\n\n```js\n\n@Component({\n  ....\n  template: `\n    \u003cprettyjson [obj]=\"theForm.value\"\u003e\u003c/prettyjson\u003e\n  `\n  })\n  export class MyComponent {\n    ngOnInit() {\n      this.theForm = this.formBuilder.group({\n       ...\n```\n\noutputs\n\n![Pretty json with syntax highlight](https://cloud.githubusercontent.com/assets/487758/15599410/a68103f4-2415-11e6-8c5e-d86c22abd72b.png)\n","funding_links":[],"categories":["Uncategorized","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Uncategorized","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatiboy%2Fangular2-prettyjson","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmatiboy%2Fangular2-prettyjson","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmatiboy%2Fangular2-prettyjson/lists"}