CODEWITHSUNDEEP
javascriptangular
mx_code
mx_code

Reputation: 2517

Is there a way to add multiple dynamic routes in angular?

Is there a way to add multiple dynamic routes in angular?

Like this:

  {
    path: ':product',
    loadChildren: () =>
      import('./pages/product/product.module').then((m) => m.ProductModule),
  },
  {
    path: ':category',
    loadChildren: () =>
      import('./pages/category/category.module').then((m) => m.CategoryModule),
  },

Cause If I do the above one of them replaces the other.

Upvotes: 0

Views: 102

Answers (2)

N.F.
N.F.

Reputation: 4184

To tell Angular whether the path is product or category, you have to write like this.

  {
    path: 'product/:product',
    loadChildren: () =>
      import('./pages/product/product.module').then((m) => m.ProductModule),
  },
  {
    path: 'category/:category',
    loadChildren: () =>
      import('./pages/category/category.module').then((m) => m.CategoryModule),
  },

To access product, https://(yourserver)/product/(product id). To access category, https://(yourserver)/category/(category id).

Upvotes: 1

Anders
Anders

Reputation: 700

Since :product and category are simply placeholders, Angular doesn't know the difference between them, instead consider the following.

I'd create a path binding for product (to a static path), and then let the module itself do the various bindings, etc.:

In the "root" routing configuration:

{
  path 'products',
  loadChildren: () => 
    import('./pages/product/product.module').then((m) => m.ProductModule),
}

... and in the ProductModule's routing:

{
  path: '',
  component: ProductListings,
},
{
  path: ':productId',
  component: ProductDetails,
}

Upvotes: 0

Related Questions