Angular4 routing: append string to dynamic parameter in path

Question

I have created routes like this

/home/display-cityname/

Right now I hardcoded all the city names I have and made different routes for all the cities, If I want to pass the city name dynamically, I can do something like this

/home/:cityname/

but I want that 'display' string to be appended for every city. Is there any approach where I can append the city name to that string itself? Something like this /home/display-{cityname}. I didn't find any solution where we can append a string to dynamic values in the route itself.

mbojko · Accepted Answer · 2022-07-14 07:45:53Z

2

You can use a matcher: instead of "path" in the route properties, you do something like this:

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

export const routes = [{ matcher: displayCities, component: CityComponent }];

https://angular.io/api/router/Route#matcher

https://angular.io/api/router/UrlMatcher

edited Jul 14, 2022 at 7:45

answered Jul 13, 2022 at 8:08

mbojko

14.8k2 gold badges21 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular4 routing: append string to dynamic parameter in path

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related