NgxRouteParamsInput
NgxRouteParamsInput allows to use angular router params and query params as component @Input() without need to subscribe to router events in each component, e.g.
Works with Angular 9 (and some of latest 8.X.X versions, older - not guaranteed)
Instruction:
Install lib:
npm install --save ngx-route-params-input
or via yarn:
yarn add ngx-route-params-input
Import NgxRouteParamsInputModule to your module
import { NgModule } from ' @angular/core ' ;
import { UserRoutingModule } from ' ./user-routing.module ' ;
import { NgxRouteParamsInputModule } from ' ngx-route-params-input ' ;
@ NgModule ( {
... ,
imports : [
...
NgxRouteParamsInputModule ,
]
} )
export class UserModule { }
In routing module, change the component you want to get router params as @Inputs()
to NgxRouteParamsInputComponent and pass component and data you want to transfer as route data config's special parameter ngxRouteParamsInput :
import { NgModule } from ' @angular/core ' ;
import { Routes , RouterModule } from ' @angular/router ' ;
import { NgxRouteParamsInputComponent } from ' ngx-route-params-input ' ;
import { UserComponent } from ' ./components/user/user.component ' ;
const routes : Routes = [ {
path : ' :userId ' ,
component : NgxRouteParamsInputComponent ,
data : {
ngxRouteParamsInput : {
component : UserComponent ,
routeParams : {
userId : ' userIdInput '
} ,
queryParams : {
content : ' content '
}
}
}
} ] ;
@ NgModule ( {
imports : [ RouterModule . forChild ( routes ) ] ,
exports : [ RouterModule ]
} )
export class UserRoutingModule { }
import { Component , Input } from ' @angular/core ' ;
@ Component ( {
selector : ' app-user ' ,
templateUrl : ' ./user.component.html '
} )
export class UserComponent {
@ Input ( )
public userIdInput : string ;
@ Input ( )
public content : string ;
}
Documentation:
Route data field 'ngxRouteParamsInput ' structure:
export interface IRouteParamsComponentData {
component : any ;
routeParams ? : any ;
queryParams ? : any ;
}
routeParams and queryParams has the following schema:
{
[paramName: string]: [inputName: string]
},
e.g. the following code:
const routes : Routes = [ {
path : ' :userId ' ,
component : NgxRouteParamsInputComponent ,
data : {
ngxRouteParamsInput : {
component : UserComponent ,
routeParams : {
userId : ' userIdInput ' ,
iAmRouteParam : ' iAmInputParam '
} ,
queryParams : {
content : ' content '
}
}
}
} ] ;
will pass "userId" , iAmRouteParam route params and "content" query param as
@ Input ( )
userIdInput : string ;
@ Input ( )
content : string
@ Input ( ' iAmInputParam ' )
componentPropertyWithOtherName : string
If there query and route params refers to the same input param, the route param will be passed and the query param will be ignored
Example (Demo):
https://stackblitz.com/edit/angular-v8hdug?embed=1&file=src/app/user/user-routing.module.ts