How to handle angular 5 recursive unknown exact number router parameters?


Is there a way to handle recursively unknown exact number of router parameters?

For example:

We have products categories, which can have subcategories, subcategories can have it’s own subcategories and so on. There are a few main conditions:

  • if a such category has no subcategories we redirect to /categories/{id}/items that will open items list component.
  • if category has subcategory it should be redirected to next nested tree level /categories/{id}/{id}/.../{id} which should open the last categoryId subcategories list component.
  • after getting to the last category which doesn’t has subcategories items list component will be shown /categories/{id}/{id}/.../{id}/items.

The solutions to check and redirect is to have router resolver. But how track those urls in routing module ?

From my perspective the routes should look something like this:

  path: '/categories/:id',
  component: SubcategoriesListComponent
  path: '/categories/:id/**/:id',
  component: SubcategoriesListComponent,
  path: '/categories/:id/**/:id/items',
  component: CategoryItemsListComponent

Is it possible implement it in a such way ?


Possible solution with componentless routes:
in routes config

    path: 'categories/:id', children: [
    {path: '**', component: SubcategoriesListComponent}

in component file:

export class SubcategoriesListComponent {

  constructor(aroute: ActivatedRoute) {
    aroute.url.subscribe((data) => {
      console.log('params ', data); //contains all the segments so put logic here of determining what to do according to nesting depth



Here is the output example (i tested on my project ErrorComponent so don’t be confused)

Answered By – Alexander Poshtaruk

Answer Checked By – Mildred Charles (AngularFixing Admin)

Leave a Reply

Your email address will not be published.