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 app module the Akita’s devtools modules:

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:

import { RouterQuery } from '@datorama/akita-ng-router-store';
export class ArticlesQuery extends QueryEntity<ArticlesState> {
constructor(protected store: ArticlesStore,
private routerQuery: RouterQuery) {
this.routerQuery.selectParams().subscribe(..);
this.routerQuery.selectParams('id').subscribe(..);
this.routerQuery.selectParams([...]).subscribe(..);
this.routerQuery.getParam();
this.routerQuery.selectQueryParams(..).subscribe(..);
this.routerQuery.getQueryParams();
this.routerQuery.selectFragment().subscribe(..)
this.routerQuery.getFragment();
this.routerQuery.selectData(..).subscribe(..)
this.routerQuery.getData(..);
this.routerQuery.selectNavigationCancel().subscribe();
this.routerQuery.selectNavigationError().subscribe();
}
}

So for example, you can do:

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:

export class ArticleComponent {
this.article$ = this.articlesQuery.selectArticle$;
constructor(private articlesQuery: ArticlesQuery) {}
}