CODEWITHSUNDEEP
angular
Noam
Noam

Reputation: 5266

Angular routing with dynamic part in it

I have an angular site with many routes, for example:

/orders
/products
/customers

etc... Now I want to make my project handle multiple companies, where the url should be:

/companyA/orders
/companyB/orders
etc...

I can change the routes to be:

:company/orders

But I would prefer to just tell angular that its route root is /:company (where the company is determined by the first url I used).

Any tips on how to do that? I have many routes and I don't want to change them all manually

Upvotes: 1

Views: 70

Answers (2)

Noam
Noam

Reputation: 5266

With a help from a friend I reached this solution: https://angular.io/api/common/APP_BASE_HREF

import {Component, NgModule} from '@angular/core';
import {APP_BASE_HREF} from '@angular/common';

@NgModule({
  providers: [{provide: APP_BASE_HREF, useValue: '/my/app'}]
})
class AppModule {}

Which has solved my problem

Upvotes: 1

skolldev
skolldev

Reputation: 1197

You can simply nest the routes like this:

{
    path: ':company',
    component: DummyComponent, // You'll need some dummy component here
    children: [
        {
            path: '',
            redirectTo: 'orders',
            pathMatch: 'full'
        },
        {
            path: 'orders',
            component: OrderComponent,
        },
        {
            path: 'products',
            component: ProductsComponent,
        },
        {
            path: 'customers',
            component: CustomersComponent,
        }
    ]
}

This will cover all routes like companyA/orders or companyB/products

Upvotes: 0

Related Questions