Skip to content

Utility to get Angular route and query params by using dependency injection

License

Notifications You must be signed in to change notification settings

phhien203/ngx-router

Repository files navigation

ngx-router

angular-open-source-starter GitHub Workflow Status npm bundle size

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
  1. Declare Injection Token to hold route param, query param, or route data

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

About

Utility to get Angular route and query params by using dependency injection

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published