Package Exports

ng2-redux-select

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ng2-redux-select) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Select

Standalone-version of the @select decorator from ng2-redux. Experiment to see if I can make it work with ngrx too.

Credit to Evan Schultz and Cosmin Ronnin for the original decorator implementation.

Setup

Ng2-Redux:

import { NgModule } from '@angular/core';
import { NgRedux } from 'ng2-redux';
import { NgSelect } from '../../../src';
import { IAppState, rootReducer, INITIAL_STATE } from '../store/index';

@NgModule({
  /* ... */
  providers: [
    NgRedux,
    NgSelect,
    /* ... */
  ]
})
export class AppModule {
  constructor(ngRedux: NgRedux<IAppState>, ngSelect: NgSelect) {
    ngRedux.configureStore(rootReducer, INITIAL_STATE);
    ngSelect.connect(ngRedux);
  }
}

@ngrx/store:

import { NgModule } from '@angular/core';
import { Store, StoreModule } from '@ngrx/store';
import { NgSelect } from '../../../src';
import { IAppState, rootReducer, INITIAL_STATE } from '../store/index';

@NgModule({
  imports: [
    StoreModule.provideStore(rootReducer, INITIAL_STATE),
    /* ... */
  ],
  providers: [
    NgSelect,
    /* ... */
  ],
  /* ... */
})
export class AppModule {
  constructor(store: Store<IAppState>, ngSelect: NgSelect) {
    ngSelect.connect(store);
  }
}

Usage

Usage is exactly the same with both store implementations:

import { Component } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { CounterActions } from '../actions/counter.actions';
import { select } from '../../../src';

@Component({
  selector: 'counter',
  template: `
  <p>
    Clicked: {{ count$ | async }} times
    <button (click)="actions.increment()">+</button>
    <button (click)="actions.decrement()">-</button>
  </p>
  `
})
export class Counter {
  @select() count$: Observable<number>;
  @select(['path', 'to', 'a', 'prop']) deepProperty$: Observable<any>;
  @select(s => s.count) functionValue$: Observable<any>;

  constructor(private actions: CounterActions) {}
}