Angular Router Store

Bindings to connect Angular router to Akita store.

To get started, install the @datorama/akita-ng-router-store package and add to the AppModule the Akita’s devtools modules:

app.module.ts
import { AkitaNgDevtools } from '@datorama/akita-ngdevtools';
import {
AkitaNgRouterStoreModule
} from '@datorama/akita-ng-router-store';
​@NgModule({
imports: [
AkitaNgRouterStoreModule,
environment.production ? [] : AkitaNgDevtools.forRoot()
})
export class AppModule {
}

With this setup, you'll get two things:

  1. You'll see the Router actions in Redux devtools.
  2. A unique queries selectors to query the router state:

selectParams

import { RouterQuery } from '@datorama/akita-ng-router-store';
export class ArticlesQuery extends QueryEntity<ArticlesState> {
constructor(protected store: ArticlesStore,
private routerQuery: RouterQuery) {
routerQuery.selectParams().subscribe();
routerQuery.selectParams('id').subscribe();
routerQuery.selectParams(['id', 'type']).subscribe();
}
}

getParams

import { RouterQuery } from '@datorama/akita-ng-router-store';
export class ArticlesQuery extends QueryEntity<ArticlesState> {
constructor(protected store: ArticlesStore,
private routerQuery: RouterQuery) {
const params = routerQuery.getParams();
}
}

selectQueryParams

import { RouterQuery } from '@datorama/akita-ng-router-store';
export class ArticlesQuery extends QueryEntity<ArticlesState> {
constructor(protected store: ArticlesStore,
private routerQuery: RouterQuery) {
routerQuery.selectQueryParams().subscribe();
routerQuery.selectQueryParams('id').subscribe();
routerQuery.selectQueryParams(['id', 'type']).subscribe();
}
}

getQueryParams

import { RouterQuery } from '@datorama/akita-ng-router-store';
export class ArticlesQuery extends QueryEntity<ArticlesState> {
constructor(protected store: ArticlesStore,
private routerQuery: RouterQuery) {
const params = routerQuery.getQueryParams();
}
}

selectFragment

import { RouterQuery } from '@datorama/akita-ng-router-store';
export class ArticlesQuery extends QueryEntity<ArticlesState> {
constructor(protected store: ArticlesStore,
private routerQuery: RouterQuery) {
routerQuery.selectFragment().subscribe();
routerQuery.selectFragment('id').subscribe();
routerQuery.selectFragment(['id', 'type']).subscribe();
}
}

getFragment

import { RouterQuery } from '@datorama/akita-ng-router-store';
export class ArticlesQuery extends QueryEntity<ArticlesState> {
constructor(protected store: ArticlesStore,
private routerQuery: RouterQuery) {
const fragment = routerQuery.getFragment();
}
}

selectData

import { RouterQuery } from '@datorama/akita-ng-router-store';
export class ArticlesQuery extends QueryEntity<ArticlesState> {
constructor(protected store: ArticlesStore,
private routerQuery: RouterQuery) {
routerQuery.selectData().subscribe();
routerQuery.selectData('id').subscribe();
routerQuery.selectData(['id', 'type']).subscribe();
}
}

getData

import { RouterQuery } from '@datorama/akita-ng-router-store';
export class ArticlesQuery extends QueryEntity<ArticlesState> {
constructor(protected store: ArticlesStore,
private routerQuery: RouterQuery) {
const data = routerQuery.getData();
}
}

selectNavigationExtras

import { RouterQuery } from '@datorama/akita-ng-router-store';
export class ArticlesQuery extends QueryEntity<ArticlesState> {
constructor(protected store: ArticlesStore,
private routerQuery: RouterQuery) {
routerQuery.selectNavigationExtras().subscribe();
}
}

getNavigationExtras

import { RouterQuery } from '@datorama/akita-ng-router-store';
export class ArticlesQuery extends QueryEntity<ArticlesState> {
constructor(protected store: ArticlesStore,
private routerQuery: RouterQuery) {
const extras = routerQuery.getNavigationExtras();
}
}

selectNavigationCancel

import { RouterQuery } from '@datorama/akita-ng-router-store';
export class ArticlesQuery extends QueryEntity<ArticlesState> {
constructor(protected store: ArticlesStore,
private routerQuery: RouterQuery) {
routerQuery.selectNavigationCancel().subscribe();
}
}

selectNavigationError

import { RouterQuery } from '@datorama/akita-ng-router-store';
export class ArticlesQuery extends QueryEntity<ArticlesState> {
constructor(protected store: ArticlesStore,
private routerQuery: RouterQuery) {
routerQuery.selectNavigationError().subscribe();
}
}

For example, we can create a query that maps an id from the URL to an entity in the store:

articles.query.ts
export class ArticlesQuery extends QueryEntity<ArticlesState> {
selectArticle$ = this.routerQuery.selectParams('id').pipe(
switchMap(id => this.selectEntity(id))
);
constructor(protected store: ArticlesStore,
private routerQuery: RouterQuery) {
super(store);
}
}

And use it in the component:

articles.component.ts
@Component()
export class ArticleComponent {
article$ = this.articlesQuery.selectArticle$;
constructor(private articlesQuery: ArticlesQuery) {}
}

Lazy Load Modules

To get the lazy modules routing params, add the following option to the RouterModule.forRoot method:

main.ts
{
imports: [
RouterModule.forRoot(routes, {
paramsInheritanceStrategy: 'always'
})
]
}