NGRX Router

Router bindings for NGRX Effects. It allows you to bind to route activation to fetch data along with some common route actions such as go, back, foward.

This is different from ngrx-router-store in the fact this doesn't actually add anything to your store, it just emits events.

For more information, checkout this blog post.

Getting Started

To get started, lets install the package thru npm:

npm i ngrx-router --S

then include the effect in your module:

import { RouterEffects } from 'ngrx-router';
 
@NgModule({
    imports: [
        EffectsModule.forRoot([
            ...effects, // < Your other effects
            RouterEffects
        ]),
    ]
})
export class MyModule {}

Bindings

In an effect, you can do bind to route activations like:

import { ofRoute, RouteNavigation } from 'ngrx-router';
 
@Injectable()
export class MyEffect {
    constructor(private update$: Actions) {}
 
    @Effect()
    navigate$ = this.update$.pipe(
        ofRoute('pizza/:id'),
        map((action: RouteNavigation) => action.payload.params.id),
        map(id => new LoadPizza(id))
    );
}

The operator ofRoute supports the following syntax:

• a simple match against a string ofRoute('pizza/:id')
• a match against an array of strings ofRoute(['pizza/:id', 'burger/:id', 'burgers'])
• a match against a regular expression ofRoute(/pizza|burger/)

Actions

You can also do navigation events with this library.

this.store.dispatch(new RouterGo({ path: ['pizza'] }))
this.store.dispatch(new RouterBack())
this.store.dispatch(new RouterForward())

Data

The RouteNavigation event also contains data which is defined in the Routes:

RouterModule.forRoot([
  {
    path: 'example',
    component: DummyComponent,
    data: { message: 'hello' },
  }
])

map((action: RouteNavigation) => action.payload.data.message),

To get data aggregated from parent routes use the configuration parameter paramsInheritanceStrategy:

RouterModule.forRoot(routes, { paramsInheritanceStrategy: 'always' });