ngrx / Router Store
Licence: mit
Bindings to connect the Angular Router to @ngrx/store
Stars: ✭ 187
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Router Store
ngrx-signalr-core
A library to handle realtime SignalR (.NET Core) events using @angular, rxjs and the @ngrx library
Stars: ✭ 18 (-90.37%)
Mutual labels: rxjs, ngrx
Angularfire
The official Angular library for Firebase.
Stars: ✭ 7,029 (+3658.82%)
Mutual labels: rxjs, ngrx
Store
RxJS powered state management for Angular applications, inspired by Redux
Stars: ✭ 3,959 (+2017.11%)
Mutual labels: rxjs, ngrx
angular2-instagram
🔥Instagram like photo filter playground built with Angular2 (Web | Desktop)
Stars: ✭ 91 (-51.34%)
Mutual labels: rxjs, ngrx
Angular Learning Resources
Curated chronological list of learning resources for Angular, from complete beginner to advanced level
Stars: ✭ 615 (+228.88%)
Mutual labels: rxjs, ngrx
ts-action-operators
TypeScript action operators for NgRx and redux-observable
Stars: ✭ 34 (-81.82%)
Mutual labels: rxjs, ngrx
Angular Ngrx Data
Angular with ngRx and experimental ngrx-data helper
Stars: ✭ 954 (+410.16%)
Mutual labels: rxjs, ngrx
kanban-project-management
Web Application to manage software development projects.
Stars: ✭ 39 (-79.14%)
Mutual labels: rxjs, ngrx
Example App
Example app showcasing the ngrx platform
Stars: ✭ 1,361 (+627.81%)
Mutual labels: rxjs, ngrx
community-events-angular
Community Events App built with ❤️ using Angular, NgRx, Rxjs to do thrill in #hacktoberfest21
Stars: ✭ 20 (-89.3%)
Mutual labels: rxjs, ngrx
Keyist-Ecommerce
🔑 A simple ecommerce site powered with Spring Boot + Angular 10 + Ngrx + OAuth2
Stars: ✭ 220 (+17.65%)
Mutual labels: rxjs, ngrx
streamkit
My streaming overlay platform for YouTube https://bit.ly/3AvaoFz and Twitch https://bit.ly/37xUPAM
Stars: ✭ 15 (-91.98%)
Mutual labels: rxjs, ngrx
Soundcloud Ngrx
SoundCloud API client with Angular • RxJS • ngrx/store • ngrx/effects
Stars: ✭ 438 (+134.22%)
Mutual labels: rxjs, ngrx
Taskmgr
a team collaboration tutorial app like teambition/worktile
Stars: ✭ 95 (-49.2%)
Mutual labels: rxjs, ngrx
Angular Rpg
RPG game built with Typescript, Angular, ngrx/store and rxjs
Stars: ✭ 120 (-35.83%)
Mutual labels: rxjs, ngrx
This repository is for version 1.x of of @ngrx/router-store.
Click here for the latest version (4.x)
@ngrx/router-store
Bindings to connect angular/router to ngrx/store
Installation
npm install @ngrx/[email protected] --save
Setup
- Use the
routerReducer
when providing theStoreModule.provideStore
and add theRouterStoreModule.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 {
}
- Add
RouterState
to main application state:
import { RouterState } from '@ngrx/router-store';
export interface AppState {
router: RouterState;
};
- (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));
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].