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

Folders and files

NameName
Last commit message
Last commit date
Feb 1, 2017
Feb 1, 2017
Aug 26, 2016
Apr 20, 2017
May 13, 2016
Jul 18, 2017
Aug 26, 2016
Sep 15, 2016
Apr 20, 2017
Apr 20, 2017
Sep 15, 2016
Sep 15, 2016
Apr 20, 2017
Sep 15, 2016
May 13, 2016
Apr 20, 2017

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));