Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/matiboy/angular2-prettyjson
Angular 2 debug output of objects. Contains a pipe similar to JsonPipe but adds support for spacing and handling of circular structures
https://github.com/matiboy/angular2-prettyjson
Last synced: about 2 months ago
JSON representation
Angular 2 debug output of objects. Contains a pipe similar to JsonPipe but adds support for spacing and handling of circular structures
- Host: GitHub
- URL: https://github.com/matiboy/angular2-prettyjson
- Owner: matiboy
- License: mit
- Created: 2016-05-27T01:35:44.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-25T04:55:21.000Z (almost 7 years ago)
- Last Synced: 2024-04-15T04:22:39.861Z (8 months ago)
- Language: JavaScript
- Size: 399 KB
- Stars: 41
- Watchers: 4
- Forks: 10
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
- awesome-angular-components - angular2-prettyjson - Angular 2 debug output of objects. Contains a pipe similar to JsonPipe but adds support for spacing and handling of circular structures. (Uncategorized / Uncategorized)
- awesome-angular-components - angular2-prettyjson - A module for Angular 2 debug output of objects. Contains a pipe similar to JsonPipe but adds support for spacing and handling of circular structures. (Uncategorized / Uncategorized)
- awesome-angular-components - angular2-prettyjson - Angular 2 debug output of objects. Contains a pipe similar to JsonPipe but adds support for spacing and handling of circular structures. (Uncategorized / Uncategorized)
README
# Angular 2 Pretty Json v3.0.0
A 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.
Also contains a component that outputs any object with syntax highlight.
**Warning**: just as the `JsonPipe`, this is an impure pipe and should be used only for debugging purposes.
**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.
## Install
```
npm install angular2-prettyjson
```
## ES2015 / UMD
Two 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.
If you are using the Angular Quickstart template (or other SystemJS based compilation), please point to the bundle `angular2-prettyjson.umd.min.js` file
e.g. `systemjs.config.js`:
```
map: {
...
// other libraries
'rxjs': 'npm:rxjs',
'angular2-prettyjson': 'npm:angular2-prettyjson'
},
packages: {
...,
'angular2-prettyjson': {
defaultExtension: 'js',
main: './bundles/angular2-prettyjson.umd.min.js'
}
```
## Usage
Import PrettyJsonModule to have access to the component and pipes
```js
import {PrettyJsonModule} from 'angular2-prettyjson';
@NgModule({
declarations: [
AppComponent,
],
imports: [
PrettyJsonModule,
],
providers: [
],
bootstrap: [AppComponent]
})
export class AppModule {
}
```
### Safe Pipe
The `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.
```js
@Component({
....
template: `
{{ circularObj | json }}
{{ circularObj | json:4 }}
` // make sure to use a surrounding element with white-space: pre; for best results
})
...
```
outputs
2 spaces (default):
4 spaces:
### Pretty (and safe) Pipe
The `PrettyJsonPipe` stringifies the object and then adds spans around properties, `null`, arrays etc. You can bind it to the innerHtml of other elements.
```js
@Component({
....
template: `
`
})
...
```
A good set of styles to use is
```css
pre span {white-space: normal;}
.string { color: green; }
.number { color: darkorange; }
.boolean { color: blue; }
.null { color: magenta; }
.key { color: red; }
```
If you wish to use the `styles` property of the parent component, please prefix each class selector with `:host /deep/`
e.g.
```js
@Component({
....
template: `
`,
styles: [`:host /deep/ .string {color:green} ...`]
})
...
```
See output under component below.
### Component
Creates a `pre` element into which the Pretty Json pipe'd object is dumped as HTML. Takes care of styling.
Takes an input `[obj]` that can be data bound to any object.
Make sure `PrettyJsonModule` is imported in your own module.
```js
@Component({
....
template: `
`
})
export class MyComponent {
ngOnInit() {
this.theForm = this.formBuilder.group({
...
```
outputs
