ngx-router
TypeScript icon, indicating that this package has built-in type declarations

1.2.1 • Public • Published

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

Package Sidebar

Install

npm i ngx-router

Weekly Downloads

5

Version

1.2.1

License

Apache-2.0

Unpacked Size

98.1 kB

Total Files

132

Last publish

Collaborators

  • hienpham