Skip to content
This repository has been archived by the owner on Jul 27, 2018. It is now read-only.
/ router-store Public archive

Bindings to connect the Angular Router to @ngrx/store

License

Notifications You must be signed in to change notification settings

ngrx/router-store

Repository files navigation


This repository is for version 1.x of of @ngrx/router-store.


@ngrx/router-store

Bindings to connect angular/router to ngrx/store

Join the chat at https://gitter.im/ngrx/store

Installation

npm install @ngrx/[email protected] --save

Setup

  1. Use the routerReducer when providing the StoreModule.provideStore and add the RouterStoreModule.connectRouter to the @NgModule.imports:
import { StoreModule } from '@ngrx/store';
import { routerReducer, RouterStoreModule } from '@ngrx/router-store';

@NgModule({
  imports: [
    BrowserModule,
    StoreModule.provideStore({ router: routerReducer }),
    RouterStoreModule.connectRouter()
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}
  1. Add RouterState to main application state:
import { RouterState } from '@ngrx/router-store';

export interface AppState {
  router: RouterState;
};
  1. (Optional) Set the initial value for the router state:
StoreModule.provideStore({ router: routerReducer }, {
  router: {
    path: window.location.pathname + window.location.search
  }
})

Dispatching Actions

import { go, replace, search, show, back, forward } from '@ngrx/router-store';

Navigation with a new state into history

store.dispatch(go(['/path', { routeParam: 1 }], { query: 'string' }));

Navigation with replacing the current state in history

store.dispatch(replace(['/path'], { query: 'string' }));

Navigation without pushing a new state into history

store.dispatch(show(['/path'], { query: 'string' }));

Navigation with only changing query parameters

store.dispatch(search({ query: 'string' }));

Navigating back

store.dispatch(back());

Navigating forward

store.dispatch(forward());

Navigation Extras

The Angular Router Navigation Extras are supported with each router action.

import { NavigationExtras } from '@angular/router';

let extras: NavigationExtras = {
  relativeTo: ActivatedRoute,
  fragment: string,
  preserveQueryParams: boolean,
  preserveFragment: boolean,
  skipLocationChange: boolean,
  replaceUrl: boolean
};

store.dispatch(go(['path', { routeParam: 1 }], { query: 'string' }, extras));