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

1. Install package

# install ngx-router
npm i ngx-router

2. Declare Injection Token to hold route param, query param, or route data

3. Use

   • routeParamFactory, routeParamSnapshotFactory to get value from route param as an Observable or as a snapshot
   • queryParamFactory, queryParamSanpshotFactory to get value from query param as an Observable or as a snapshot
   • routeDataFactory, routeDataSnapshotFactory to get value from route data as an Observable or as a snapshot

4. 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>) {}
}