Skip to content

ngneat/elf-ng-router-store

Folders and files

NameName
Last commit message
Last commit date

Latest commit

2edd660 · Jan 25, 2023

History

71 Commits
Jun 6, 2022
Dec 15, 2021
Mar 20, 2022
Jan 25, 2023
Dec 15, 2021
Dec 15, 2021
Dec 16, 2021
Dec 15, 2021
Dec 15, 2021
Dec 15, 2021
Dec 7, 2022
Feb 12, 2022
Dec 20, 2021
Dec 16, 2021
Dec 15, 2021
Dec 15, 2021
Dec 15, 2021
Dec 15, 2021
Jun 2, 2022
Jun 2, 2022
Dec 15, 2021
Oct 14, 2022

Repository files navigation

Angular Router Store

Bindings to connect Angular router to Elf store.

To get started, install the @ngneat/elf-ng-router-store package and add to the AppModule the Elf’s devtools modules:

import { ElfNgRouterStoreModule } from '@ngneat/elf-ng-router-store';

@NgModule({
imports: [
  ElfNgRouterStoreModule
})
export class AppModule {
}

With this setup, you'll get two things:

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

selectParams

import { RouterRepository } from '@ngneat/elf-ng-router-store';

export class UsersRepository {
   constructor(private routerRepository: RouterRepository) {
     routerRepository.selectParams().subscribe();
     routerRepository.selectParams('id').subscribe();
     routerRepository.selectParams(['id', 'type']).subscribe();
   }
}

getParams

import { RouterRepository } from '@ngneat/elf-ng-router-store';

export class UsersRepository {
   constructor(private routerRepository: RouterRepository) {
     const params = routerRepository.getParams()
   }
}

selectQueryParams

import { RouterRepository } from '@ngneat/elf-ng-router-store';

export class UsersRepository {
   constructor(private routerRepository: RouterRepository) {
     routerRepository.selectQueryParams().subscribe();
     routerRepository.selectQueryParams('redirectTarget').subscribe();
     routerRepository.selectQueryParams(['redirectTarget', 'type']).subscribe();
   }
}

getQueryParams

import { RouterRepository } from '@ngneat/elf-ng-router-store';

export class UsersRepository {
   constructor(private routerRepository: RouterRepository) {
     const redirectTarget = routerRepository.getQueryParams().redirectTarget
   }
}

selectFragment

import { RouterRepository } from '@ngneat/elf-ng-router-store';

export class UsersRepository {
   constructor(private routerRepository: RouterRepository) {
     routerRepository.selectFragment().subscribe();
   }
}

getFragment

import { RouterRepository } from '@ngneat/elf-ng-router-store';

export class UsersRepository {
   constructor(private routerRepository: RouterRepository) {
     const fragment = routerRepository.getFragment()
   }
}

selectData

import { RouterRepository } from '@ngneat/elf-ng-router-store';

export class UsersRepository {
   constructor(private routerRepository: RouterRepository) {
     routerRepository.selectData().subscribe();
     routerRepository.selectData('id').subscribe();
     routerRepository.selectData(['id', 'type']).subscribe();
   }
}

getData

import { RouterRepository } from '@ngneat/elf-ng-router-store';

export class UsersRepository {
   constructor(private routerRepository: RouterRepository) {
     const data = routerRepository.getData()
   }
}

selectNavigationExtras

import { RouterRepository } from '@ngneat/elf-ng-router-store';

export class UsersRepository {
   constructor(private routerRepository: RouterRepository) {
     routerRepository.selectNavigationExtras().subscribe();
     routerRepository.selectNavigationExtras('id').subscribe();
     routerRepository.selectNavigationExtras(['id', 'type']).subscribe();
   }
}

getNavigationExtras

import { RouterRepository } from '@ngneat/elf-ng-router-store';

export class UsersRepository {
   constructor(private routerRepository: RouterRepository) {
     const extras = routerRepository.getNavigationExtras()
   }
}

selectNavigationCancel

import { RouterRepository } from '@ngneat/elf-ng-router-store';

export class UsersRepository {
   constructor(private routerRepository: RouterRepository) {
     routerRepository.selectNavigationCancel().subscribe();
   }
}

selectNavigationError

import { RouterRepository } from '@ngneat/elf-ng-router-store';

export class UsersRepository {
   constructor(private routerRepository: RouterRepository) {
     routerRepository.selectNavigationError().subscribe();
   }
}

Use case

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

export class ArticlesRepository {
  selectArticle$ = this.routerRepository.selectParams('id').pipe(
     switchMap(id => this.selectEntity(id))
  );

  constructor(private routerRepository: RouterRepository) {}
}

And use it in the component:

@Component()
export class ArticleComponent {
  article$ = this.articlesRepository.selectArticle$;

  constructor(private articlesRepository: ArticlesRepository) {}
}

Lazy Load Modules

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

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