How to define a Route which takes optional parameter in Angular?

Question

After doing lot of research on internet and going through Offical Angular Doc on Routing, I haven't found one working solution so posting this question here, I don't know if I am asking it wrong way or completely out of sync here so bear with me I am new to Angular.

Basically I want to define a route which takes multiple optional parameter.

In my Routing module I am defining a route like this

const appRoutes: Routes = [
  {path: 'game/:width/:height',component: GameComponent
}];

which works fine, if I am Naviagte to https://localhost:4200/game/50/80

but gives "Cannot match any routes Exception" for https://localhost:4200/game/50/

How do I define a route which works either ways ( with/without height )

even a solution using query parameter would also do, something like https://localhost:4200/?width=50&height=80

this.router.navigate(['/products'], { queryParams: { order: 'popular' } }); use this — bhaumik shah, Oct 25 '18 at 12:31
https://alligator.io/angular/query-parameters/ this link may help you — bhaumik shah, Oct 25 '18 at 12:39
See accepted answer in https://stackoverflow.com/a/44865817/10046738 — jmdavalos, Oct 25 '18 at 12:45
you can try and make a new path for route `{path: 'game/:width',component: GameComponent}` — Sarthak Aggarwal, Oct 25 '18 at 12:49
@jmdavalos thanks that link was helpful, so the final solution is I need not to do any changes in defining routing. Just sending the params in router link like ['/game',{width: 50, height:70}] will send the param, to which I can subscribe in my routed application like ActivatedRoute.params.subscribe(params => {}) which will give me the params and the final link will be https://localhost:4200/game;width=50;height=80 — himanshu goyal, Oct 25 '18 at 14:21

benfr · Answer 1 · 2018-10-25T15:45:09.707

Not really sure if it would work and if it would be a good path to go, but I would try to create some child routes to the same GameComponent, like this :

const appRoutes: Routes = [
{
  path: 'game',
  children: [
     { path: '', component: GameComponent },
     { path: ':width', component: GameComponent },
     { path: ':width/:height', component: GameComponent }
  ]
}];

So I can use /game /game/50 and /game/50/80 and I would manage the logic in the GameComponent ngOnInit with some conditions on params depending on the situation :

width: number;
height: number;

ngOnInit() {

   this.route.paramMap.subscribe(params => {
         if (params['width'] && params['height']) {
          this.width = +params['width'];  // + converts string 'width' to a number
          this.height = +params['height'];
          // /game/50/80 - do something
        } else if (params['width']) {
          this.width = +params['width'];
          // /game/50 - do something
        } else {
          // /game - do something
        }
   }

}

Then I could work around this.width !this.width and this.height !this.height to handle different scenario in my component

Otherwise I would also explore the queryParamMap path the same way, or also the ActivatedRoute with Snapshot system like this :

this.width = this.route.snapshot.paramMap.get('width');
this.height = this.route.snapshot.paramMap.get('height');

if (this.width && this.height) {
  // do something
} else if (this.width && !this.height) {
  // do something
} else {
  // /game
}

Link : Angular Routing: Route Parameters

How to define a Route which takes optional parameter in Angular?

1 Answers1