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' 
    })
  ]
}