How to add custom data to a route?

Question

I want to add some custom data to route when I define the routes.

How can I do that?

like:

{
  path: 'department',
  component: DepartmentComponent,

  customdata: {
    name: 'foo',
    age: '23'
  }
}

I don't want the custom data to display in URL. I just use it internally.

Possible duplicate of [Angular 2: Passing Data to Routes?](https://stackoverflow.com/questions/37157838/angular-2-passing-data-to-routes) — The Hungry Dictator, Aug 02 '17 at 04:49

score 6 · Accepted Answer · edited Dec 06 '18 at 04:09

6

You can define the custom data to the route like this:

[
   {path: 'inbox', data: {name: 'foo', age: 23}},
]

and read like this:

class ConversationCmp {
    constructor(r: ActivateRoute) {
         r.data.subscribe((p) => {
              console.log(p);
         });
    }
}

It's defined on the Route interface:

export interface Route {
  path?: string;
  ...
  data?: Data;
}

edited Dec 06 '18 at 04:09

Lin Du

answered Aug 02 '17 at 03:30

Max Koretskyi

the `params` is an route property of `angular`, or is customized? Can I replace it with any property name I want? – Lin Du Aug 02 '17 at 03:34
yes, it's the property of the route. you can specify any object there the way I showed. – Max Koretskyi Aug 02 '17 at 03:37
It seems it's not `Route` interface property. – Lin Du Aug 02 '17 at 03:38
@DuLin, yeah, sorry, it's `data` property. I've updated the answer – Max Koretskyi Aug 02 '17 at 03:41
Where is this documented? – Aug 02 '17 at 04:17
@torazaburo, not sure if there's any documention, but [this book](https://leanpub.com/router) shows that – Max Koretskyi Aug 02 '17 at 06:31

score 2 · Answer 2 · edited Dec 06 '18 at 04:10

2

I do it in the following way:

{ path: 'admin', canActivate: [RoleGuard], data: { roles: ['admin'] } }

I use it to add roles custom property to the route to be able to enable access only to users with a particular role, that I'm setting in Routes.

edited Dec 06 '18 at 04:10

Lin Du

answered Aug 02 '17 at 03:46

filipows

1

That's a good use case! Just something you might be interested in: Cucumber tag-expressions, so you could add roles like '(admin and super) not (guest)' and process an array of roles associated with the user – Drenai May 04 '19 at 10:14

2 Answers2