CODEWITHSUNDEEP
javascriptangular
anthonyroberts
anthonyroberts

Reputation: 217

Angular Router - how do you create a dynamic route without a forward slash

Here is my routes array. I want any route with the- to use the first component, and any other to use the second component.

[
    { 
        path: 'the-:param',
        component: MyComponent
    },
    { 
        path: ':param',
        component: MyOtherComponent
    }
]

Any ideas how to achieve this. Using angular 7.

Upvotes: 3

Views: 725

Answers (1)

Mahmoud Fawzy
Mahmoud Fawzy

Reputation: 1675

A custom URL matcher can be provided when a combination of path and pathMatch isn't expressive enough.

function leadingtThe(url: UrlSegment[]) {
  return url.length === 1 && url[0].path.startsWith('the-') ? ({consumed: url}) : null;
}

const routes: Routes = [{ matcher: leadingtThe, component: MyComponent }];

this should match any leading the- in the incoming path.

the url.length === 1 this here to make sure that the url only one segment, if its more than one then the function return null and will not match.

if you want to match any url that starts with the- even if its more than one segment like for example localhost:4200/the-anything/segment/someothersegment then it should be:

function leadingtThe(url: UrlSegment[]) {
  return url[0].path.startsWith('the-') ? ({consumed: url}) : null;
}

const routes: Routes = [{ matcher: leadingtThe, component: MyComponent }];

Upvotes: 4

Related Questions