URL-UI-BINDER

This project let you connect your ui with url directly

HOW TO USE

If you have a component let say DashboardComponent and you want to use a variable date in it , then

@RouteParams({{key}}) {{variableName}} : {{variable-type}} = {{varaible-initial-value}}; constructor( override route: ActivatedRoute, override router: Router, ) { super(router, route) }

export class DashboardComponent extends RouteUtils { @RouteParams('date') dateValue : number = 1;
constructor( override route: ActivatedRoute, override router: Router, ) { super(router, route) }`` }`

Here RouteUtils and RouteParams are imports from this package On dateValue = 3 , url will have ?date = 3 on reload also dateValue will have auto value assigned to dateValue if date is present in url.

Note that constructor with ActivatedRoute , Router is neccessary

Uniquness over route

If you want to use same queryParam date for different routes then like

• For DashboardComponent and OverlayComponent want to use date then add a paramPrefix with each route in routing.module such as:

• E.g. ->

  const routes: Routes = [
{
path: "dashboard",
loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardPageModule),
data: { paramPrefix: "d" } // added for uniqueness
}
];

  this will add the paramPrefix to each queryParam as prefix before variable i.e

  @RouteParams('date') dateValue : number = 1; will reflect as d_date in url

Uniquness over component

If you have same instance of mutiple component and want to add different queryParam for each variable then

{{varaibleName}} : {{type}} = {{Value}}
@RouteParams({{key}} , {{uniqueKey-variable-name}} ) {{variableName}} : {{variable-type}} = {{varaible-initial-value}};

e.g. Lets say you have a component Widgets which render two times for diffrent data lets say one for Activity-Widget and one for Source-Widget now if a value is updated in any of then you want to keep it to that instance only then use

uniqueid :number = '0' // this can be defined by index of component from data this is rendered
@RouteParams('date' , 'uniqueid') dateValue : number;

this will add querParams as ?0_date

Note : in case of using uniqueid intial value assigned is not possible i.e.

@RouteParams('date' , 'uniqueid') dateValue : number = 1 not possible but if you use input it works i.e.

@Input() @RouteParams('date' , 'uniqueid') dateValue : number

OnChange event listenser

You can use onRouteParamChange(params : any) which emits changes on queryParams

Help

Reach me out at github piyush-hack