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
- Install package
# install ngx-router
npm i ngx-router-
Declare Injection Token to hold route param, query param, or route data
-
Use
routeParamFactory,routeParamSnapshotFactoryto get value from route param as an Observable or as a snapshotqueryParamFactory,queryParamSanpshotFactoryto get value from query param as an Observable or as a snapshotrouteDataFactory,routeDataSnapshotFactoryto get value from routedataas 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>) {}
}