@ngrx/store-log-monitor

@ngrx/devtools

Devtools for @ngrx projects.

Devtools have not yet been updated for @ngrx/store v2.0. An update is forthcoming.

Installation

npm install @ngrx/devtools --save-dev

Available Devtools

@ngrx/store Instrumentation

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{ ... }

Customization

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{ ... }

Contributing

Please read contributing guidelines here.