20

I was wondering if there is a way to name my routes in Angular7 so I could just call [routerLink]="myRouteName" instead of [routerLink]="/my/route/path".

If so, how can I achieve this?

3
  • 3
    Use constants values.
    – Rohit.007
    Dec 4, 2018 at 14:18
  • There's nothing directly available to assign a name to a route. However, you can workaround by creating a route that is same as the name you indend to use (/myRouteName) and that can redirect to the deep route (/my/route/path).
    – Aragorn
    Dec 4, 2018 at 14:21
  • How do you decide the routeName? Want to hard code while creating route config? Dec 4, 2018 at 14:28

5 Answers 5

18

Considering you want to configure the routes names while you are creating the route configuration.

Lets leverage routes' data property to add names to routes. (A small extra data in every route should not affect any performance).

But first, let's create a class which conatains a static property for holding route names and their actual paths.

export class RouteNames {
  public static routeNamesObject = {}
}

Now in your routing component where you have defined the routes, let's have it like:

const routes: Routes = [
  {path: "hello/:id", component: HelloComponent, data: {routeName: "Hello1"}},
  {path: "hello", component: HelloComponent, data: { routeName: "Hello2" }}
]

Just after this variable initialization set the RouteNames class's static prop

routes.forEach((eachRoute) => {
  RouteNames.routeNamesObject[eachRoute.data.routeName] = eachRoute.path;    // now all route paths are added to this prop
})

Make a public variable in your component to access the static class

Like in app.component.ts: (You don't need injection)

public routeNames = RouteNames;

Then the app.component.html will be something like:

<button [routerLink]="routeNames.routeNamesObject['Hello2']">Click to Navigate to Hello</button>
5
  • 2
    I thought about this approach, but I just wanted to make sure there was no other option. I guess I'll have to stick with something like this. Your solution is good, but I wonder if it doesn't bring too much complexity for this issue. Wouldn't it be better to just setup a .ts file with a constant and use it inside the routing modules and components?
    – RafaelTSCS
    Dec 4, 2018 at 14:53
  • Oh yeah.. having a seperate file with constants having path names is much cooler! I think that is better! Using the constants both while configuring the routes and while using them in your components Dec 4, 2018 at 14:57
  • 1
    A clean alternative for having to type "routeNames.routeNamesObject['...']" would be to define a pipe (say url) that does this, e.g. routerLink="{{ 'Hello2' | url }}". This way you avoid having to define the route names locally in every component that needs them.
    – Safron
    May 1, 2020 at 17:49
  • Also, instead of adding the name to the data property, you could consider creating an interface NamedRoute implements Route { name: string} and type NamedRoutes = NamedRoute[] and use those interfaces instead. A route would then simply look like {path: "hello", component: HelloComponent, name: "Hello2" }.
    – Safron
    May 1, 2020 at 18:01
  • Creating a NamedRouterModule that registers the names in the forRoot/forChild method, can also get rid of the overhead of registering the names yourself with routes.forEach(...). Maybe I should create package...
    – Safron
    May 1, 2020 at 18:05
7
<a [routerLink]="routerLinkVariable"></a>

So this variable (routerLinkVariable) could be defined inside your class and it should have a value like below

export class myComponent {

     public routerLinkVariable = "/my/route/path"; // the value of the variable is string!
}
7

I managed to do this like this (bonus if someone can tell me how to remove the Array loop):

custom-route.interface.ts -- this is to add name to our route object


export interface ICustomRoute extends Route {

  name?: string;

}

In routing.module.ts (or wherever you have stored your routes):

const routes: ICustomRoute[] = [
  { path: 'some/random/page1', component: TestComponent, name: 'page1'  },
  { path: 'some/random/page2', component: Test2Component, name: 'page2'  },
  { path: 'page3', component: Test3Component, name: 'page3'  },
];

Now the name is being passed into your routing module so now you have to catch the name and handle it. You can do this in a number of ways, I ended up using a directive (I saw @Safron mentioned a pipe as well)

named-routerlink.directive.ts

@Directive({
  selector: 'a[namedRouterLink]'
})
export class NamedRouterLinkDirective extends RouterLinkWithHref{
  @Input('namedRouterLink')

  set namedRouterLink(val: any) {
    const selectedRoute = this.myRoute.config.filter( x => x['name'] == val)[0];
    this.routerLink = "/" + selectedRoute['path']
  };

  constructor(router: Router, route: ActivatedRoute, locationStrategy: LocationStrategy, private myRoute: Router){
    super(router, route, locationStrategy)
  }

}

And then obviously use like this:

 <a namedRouterLink="page1">Page 1</a>

Pipe Version:

@Pipe({name: 'getRoute' })
export class RoutePipe implements PipeTransform {

  constructor(private router: Router){}

  transform(routeName: string): string {
    const selectedRoute = this.router.config.filter( x => x['name'] == routeName)[0];
    return "/" + selectedRoute['path']
  }

}

Pipe Example:

 <a namedRouterLink="{{ 'page1' | getRoute }}">Page 1</a>
3
  • 2
    Okay, I like the directive solution even better than a pipe :)
    – Safron
    Jun 25, 2020 at 7:21
  • Late, but I liked those solutions very much!
    – RafaelTSCS
    Sep 25, 2020 at 12:22
  • Also late, but the speed could be slightly improved by using Array.find() instead of Array.filter() I like this approach
    – Kyoss
    Feb 10 at 23:31
4

You can use constant file for that so that it can be reusable in other components too.

export const ROUTE_URL = {
    myRouteName: '/my/route/path',
};

As many as you have.

then use that constant on .TS and use it in the view.

View:

<a [routerLink]="routerUrls.myRouteName"></a>

.TS:

public routerUrls= ROUTE_URL;

Even on your route file

 { path: 'xyz', loadChildren:  ROUTE_URL.myRouteName},
3
  • Same setup we are using in our application to load routes from the backend API. we can use constant directly in the .TS in a variable and then that variable can be used in the view. We are using constant file for usability of code, otherwise that url can also be in that variable directly.
    – Rohit.007
    Dec 4, 2018 at 14:29
  • 1
    I've seen this approach, but I didn't feel much comfortable using it. So I was looking for a possible "out of the box" way of doing it. I guess I'll have to stick around with this one.
    – RafaelTSCS
    Dec 4, 2018 at 14:54
  • How would the constant for a path with an id like this look like? /my/contract/<id>/details/foo ?
    – Datz
    Jun 30, 2021 at 6:28
3

In your class

public routeName = '/customRoute/myExample'

Then in your template

[routerLink]="routeName"

This should pull that value through, i think thats what you are asking for. This will only work if the customRoute is actually a valid route name you have made.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.