angular2-prettyjson
v3.0.1
Published
Angular2 json utils. Includes a pipe to replace Angular's built in json pipe which implements spacing, avoids circular references. Also includes a component that will pretty print json with syntax highlight
Downloads
8,191
Maintainers
Readme
Angular 2 Pretty Json v3.0.0
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.
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 following component and pipes
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.
@Component({
....
template: `
<pre>
{{ circularObj | json }}
{{ circularObj | json:4 }}
</pre>
` // make sure to use a surrounding element with white-space: pre; for best results
})
...
outputs
2 spaces (default):
4 spaces:
Overriding JsonPipe throughout the app
If you want the Safe Pipe to be used throughout the app:
import {PrettyJsonModule, SafeJsonPipe} from 'angular2-prettyjson';
import {JsonPipe} from '@angular/common';
@NgModule({
declarations: [
AppComponent,
],
imports: [
PrettyJsonModule,
],
providers: [
{ provide: JsonPipe, useClass: SafeJsonPipe }
],
bootstrap: [AppComponent]
})
export class AppModule {
}
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.
@Component({
....
template: `
<pre [innerHtml]="circularObj | prettyjson:3"></pre>
`
})
...
A good set of styles to use is
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.
@Component({
....
template: `
<pre [innerHtml]="circularObj | prettyjson:3"></pre>
`,
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.
import {PrettyJsonComponent} from 'angular2-prettyjson';
@Component({
....
entryComponents: [PrettyJsonComponent], // Add to entry components
template: `
<prettyjson [obj]="theForm.value"></prettyjson>
`
})
export class MyComponent {
ngOnInit() {
this.theForm = this.formBuilder.group({
...
outputs