Devtools for @ngrx projects.
To instrument your @ngrx/store and use the devtools, simply call instrumentStore()
after you call provideStore()
then use the Devtools
component:
import {Devtools, instrumentStore} from '@ngrx/devtools';
@Component({
selector: 'app',
providers: [
provideStore(reducer),
instrumentStore()
],
directives: [ Devtools ],
template: `
<ngrx-devtools></ngrx-devtools>
`
})
export class App{ ... }
To customize the default layout for the devtools, import the devtoolsConfig
function, add it to providers with an object with position
(top, bottom, left, right), size
(0.3) and visible
(true).
To set different commands for toggling dock visibility and position, use the toggle-command
(ctrl-h) and position-command
(ctrl-m) inputs on the ngrx-devtools
component:
import {Devtools, instrumentStore, devtoolsConfig} from '@ngrx/devtools';
@Component({
providers: [
instrumentStore(),
devtoolsConfig({
position: 'bottom',
visible: false,
size: 0.3
})
],
directives: [ Devtools ],
template: `
<ngrx-devtools toggle-command="ctrl-k" position-command="ctrl-e"></ngrx-devtools>
`
})
export class App{ ... }
Please read contributing guidelines here.