ngx-router
v1.2.1
Published
A utility to get route params, query params from Activated Route by using dependency injection
Downloads
31
Maintainers
Readme
ngx-router
What's ngx-router
ngx-router
is a utility that allows Angular users to get route param, query param, or route data from ActivatedRoute
by using dependency injection. It's fully tree-shakable. Supported Angular version >= 9.
More information in the indepth article
Usage
- Install package
# install ngx-router
npm i ngx-router
Declare Injection Token to hold route param, query param, or route data
Use
routeParamFactory
,routeParamSnapshotFactory
to get value from route param as an Observable or as a snapshotqueryParamFactory
,queryParamSanpshotFactory
to get value from query param as an Observable or as a snapshotrouteDataFactory
,routeDataSnapshotFactory
to get value from routedata
as an Observable or as a snapshot
Inject the token in step 2 and use it.
// Suppose you have route config as following
export const appRoutes: Routes = [
{
path: ':someId',
component: SomeComponent,
}
]
import { routeParamFactory } from 'ngx-router/route-param';
import { ActivatedRoute } from '@angular/router';
export const APP_SOME_ID = new InjectionToken<Observable<string>>('stream of :someId route param');
@Component({
template: `<p>someId value: {{ someId$ | async }} </p>`,
selecttor: 'app-some-component',
providers: [
{
provide: APP_SOME_ID,
useFactory: routeParamFactory('someId'),
deps: [ActivatedRoute]
}
]
})
export class SomeComponent {
constructor(@Inject(APP_SOME_ID) public readonly someId$: Observable<string>) {}
}