open-index/open-npm huggingface dataset:
npm package: @ngrx-ducks/schematics
Description: Schematics for @co-it/ngrx-ducks
Latest version: 12.4.4

## @ngrx-ducks/schematics

You get this package automatically if you install [@co-it/ngrx-ducks](https://www.npmjs.com/package/@co-it/ngrx-ducks).

## Commands

| Command                                            | Description                            |
| -------------------------------------------------- | -------------------------------------- |
| ng generate @co-it/ngrx-ducks:**duck** <path/duck> | Create a duck in the desired directory |

## Parameter

| Parameter  | Description                                                                  |
| ---------- | ---------------------------------------------------------------------------- |
| project    | The name of the project.                                                     |
| barrel     | When true (the default) and not flat, creates a index.ts barrel file.        |
| flat       | When true, creates files at the top level of the project.                    |
| spec       | When true (the default), generates a \"spec.ts\" test file for the new Duck. |
| effects    | When true (the default), generates an \"effects.ts\" file for the new Duck.  |
| module     | The declaring NgModule for the effect (or nearest NgModule if omitted).      |
| skipImport | When true, does not import the effect into the owning NgModule.              |
| selectors  | When true (the default), generates a \"selectors.ts\" file for the new Duck. |
npm package: @ngrx/core
Description: Core operators and utiliies for the ngrx platform
Latest version: 1.2.0

# @ngrx/core
### Core operators and utilities for the ngrx platform
[![Join the chat at https://gitter.im/ngrx/store](https://badges.gitter.im/ngrx/store.svg)](https://gitter.im/ngrx/store?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
npm package: @ngrx/devtools
Description: Developer tools for @ngrx projects
Latest version: 1.4.0

# @ngrx/devtools

[![Join the chat at https://gitter.im/ngrx/store](https://badges.gitter.im/ngrx/store.svg)](https://gitter.im/ngrx/store?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[ ![Codeship Status for ngrx/devtools](https://img.shields.io/codeship/888d1230-c7dd-0133-9ded-4eb1cc5240c5/master.svg)](https://codeship.com/projects/121789)
[![npm version](https://badge.fury.io/js/%40ngrx%2Fdevtools.svg)](https://badge.fury.io/js/%40ngrx%2Fdevtools)

Devtools for @ngrx projects.

## 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:

```ts
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:

```ts
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](https://github.com/ngrx/devtools/blob/master/CONTRIBUTING.md).
npm package: @ngrx/notify
Description: Web Notifications Powered by RxJS for Angular 2
Latest version: 1.0.0

# @ngrx/notify
### Web Notifications Powered by RxJS for Angular 2
[![Join the chat at https://gitter.im/ngrx/notify](https://badges.gitter.im/ngrx/notify.svg)](https://gitter.im/ngrx/notify?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

Easily create and handle desktop notifications in Angular 2

### Installation
Install @ngrx/notify from npm:
```bash
npm install @ngrx/notify --save
```

Setup the providers, optionally providing global notification options:
```ts
import { NOTIFY_PROVIDERS, NOTIFY_GLOBAL_OPTIONS } from '@ngrx/notify';

bootstrap(App, [
  NOTIFY_PROVIDERS,
  { provide: NOTIFY_GLOBAL_OPTIONS, multi: true, useValue: { /* global options here */ } }
])
```

## Usage
### Requesting Notification Permission
Before creating notifications, you must resolve the app's notification permission:

```ts
class AppComponent {
  constructor(notify: Notify) {
    notify.requestPermission().subscribe(permission => {
      if (permission) {
        // continue
      }
    });
  }
}
```

### Creating a Notification
To create a notification observable, call the `open()` method with a title and optional config. The notification will be opened when you subscribe to the observable and will close after you unsubscribe from it. The observable will emit the instance of the notification every time it is clicked on:

```ts
notify.open('Hello world!', options)
  // Automatically close the notification after 5 seconds
  .takeUntil(Observable.timer(5000))
  // Close the notification after it has been clicked once
  .take(1)
  .subscribe(notification => {

  });
```

See the [documentation on MDN](https://developer.mozilla.org/en-US/docs/Web/API/Notification/Notification) for available options.
npm package: @ngrx/router
Description: A reactive router for Angular 2
Latest version: 1.0.0-beta.2

# @ngrx/router
### Reactive Router for Angular 2
[![Join the chat at https://gitter.im/ngrx/router](https://badges.gitter.im/ngrx/router.svg)](https://gitter.im/ngrx/router?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
[![npm version](https://badge.fury.io/js/%40ngrx%2Frouter.svg)](https://badge.fury.io/js/%40ngrx%2Frouter)

This is an alternative router for Angular 2 focused on providing a simple, reactive API built to scale for large applications.

Please note that we are currently in _beta_. We believe the core of the router is solid and we do not expect anymore breaking changes to the API.

### Installation
Install @ngrx/router and @ngrx/core into your Angular 2 project via npm:

```
npm install @ngrx/router @ngrx/core --save
```

### Routing Setup

1. Create your application components:

  ```ts
  import { Component } from '@angular/core';

  @Component({
    selector: 'app',
    template: `
      <h1>My Blog</h1>
      <nav>
        <a linkTo="/">Home</a>
        <a linkTo="/blog">Blog</a>
      </nav>

      <route-view></route-view>
    `
  })
  class App { }

  @Component({
    selector: 'home-page',
    template: `
      <h2>Home Page</h2>
    `
  })
  class HomePage { }

  @Component({
    selector: 'blog-page',
    template: `
      <h2>Blog</h2>
      <nav>
        <a *ngFor="let post of posts" [linkTo]="'/blog/' + post.id">{{ post.title }}</a>
      </nav>

      <route-view></route-view>
    `
  })
  class BlogPage { }

  @Component({
    selector: 'post-page',
    template: `
      <h3>Post</h3>
    `
  })
  class PostPage { }
  ```
2. Configure your application routes:

  ```ts
  import { Routes } from '@ngrx/router';

  const routes: Routes = [
    {
      path: '/',
      component: HomePage
    },
    {
      path: '/blog',
      component: BlogPage,
      children: [
        {
          path: ':id',
          component: PostPage
        }
      ]
    }
  ]
  ```

3. Register router in application bootstrap.

  ```ts
  import { provideRouter } from '@ngrx/router';

  bootstrap(App, [
    provideRouter(routes)
  ]);
  ```

That's it! You are ready to begin taking advantage of reactive routing!

### Documentation

* [Location Strategy](./docs/overview/location-strategy.md)
* [Route Configuration](./docs/overview/route.md)
* [Route Links](./docs/overview/links.md)
* [Router Navigation](./docs/overview/navigation.md)
* [Redirects](./docs/overview/redirect.md)
* [Code Splitting](./docs/overview/code-splitting.md)
* [Route and Query Parameters](./docs/overview/params.md)
* [Guarding Routes](./docs/overview/guards.md)
* [SystemJS Configuration](./docs/overview/systemjs.md)
* [Webpack Configuration](./docs/overview/webpack.md)
* [Angular CLI Configuration](./docs/overview/angular-cli.md)
npm package: @ngrx/store-log-monitor
Description: Store log monitor for @ngrx/store-devtools
Latest version: 3.0.2

# @ngrx/store-log-monitor

[![Join the chat at https://gitter.im/ngrx/store](https://badges.gitter.im/ngrx/store.svg)](https://gitter.im/ngrx/store?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)


Port of [redux-devtools-log-monitor](https://github.com/gaearon/redux-devtools-log-monitor) for Angular 2 and [@ngrx/store-devtools](https://github.com/ngrx/store-devtools)


### Setup

*Install @ngrx/store-log-monitor from npm*
```bash
npm install @ngrx/store-log-monitor --save
```

*Configure the monitor when instrumenting store*
```ts
import { StoreDevtoolsModule } from '@ngrx/store-devtools';
import { StoreLogMonitorModule, useLogMonitor } from '@ngrx/store-log-monitor';

@NgModule({
  imports: [
    StoreDevtoolsModule.instrumentStore({
      monitor: useLogMonitor({
        visible: true,
        position: 'right'
      })
    }),
    StoreLogMonitorModule
  ]
})
export class AppModule { }
```

*Use the StoreLogMonitor component in your app*

```ts
@Component({
  selector: 'app',
  template: `
    <ngrx-store-log-monitor toggleCommand="ctrl-h" positionCommand="ctrl-m"></ngrx-store-log-monitor>
  `
})
export class AppComponent { }
```