Solvedangular ActivatedRoute doesn't carry data

UPD: Given discussion below, apparently the behavior is what it supposed to be. I am not closing, as there might be some more discussion.

I'm submitting a ... [x ] bug report

Current behavior
I created a couple of routes with data which I want to use when a router link is clicked:

const routes: Routes = 
[
    {path: 'run', data: {title: "Runner"}, component: RunComponent},
    {path: 'walk', data: {title: "Walker"}, component: WalkComponent}
];

Then in my app I subscribed for ActivatedRoute data to extract the data defined on each route:

  constructor(private route: ActivatedRoute) {
  }
 public ngOnInit() {
     this.routeData= this.route.data.subscribe((data) => {
       this.name = data.title;
     });
  }

When I click on the link the data object is empty

Expected behavior
I expect the ActivatedRoute to provide data that is defined on the currently active link

Reproduction of the problem
See Plunker http://plnkr.co/edit/I62gnvThO0nGN2jk9xhX?p=preview

  • Angular version: 2.0.0
  • Router version: 3.0.0
34 Answers

✔️Accepted Answer

It doesn't work @vsavkin , why is it closed.
this.activatedRoute.data.subscribe(res => console.log(res));
It's logging blank object while I'm passing in data prop in my routes configuration.

Other Answers:

You could listen on the router state events.

  constructor(private route: Router) {
  }

  public ngOnInit() {
     this.routeData= this.route.events.subscribe((data) => {
       if (data instanceof RoutesRecognized) {
        this.name = data.state.root.firstChild.data.title;
       }
     });
  }

I am facing the same issue as @paramsingh88 but in difference to the plunker from @lroitman I want to subscribe to this.activatedRoute.data not in the component which is registered in the routes config but in a shared component. This component is included in every page by adding the component selector tag in my layout html. For some reason the observable never get a next result. When I listen to the router events of type NavigationEnd I can get the routes data... but sadly this is not working (at least for me) when the webapp loads for the first time.

This is the router event based approach:

this.router.events
            .filter((event) => event instanceof NavigationEnd)
            .map(() => this.route)
            .map((route) => {
                while (route.firstChild) route = route.firstChild;
                return route;
            })
            .filter((route) => route.outlet === 'primary')
            .mergeMap((route) => route.data)
            .subscribe((event) => {
                this.updateTitle(event["title"])
            });

And this is what is currently not working for me:

@Component({
    moduleId: module.id,
    selector: 'navbar-cmp',
    templateUrl: 'navbar.component.html'
})
export class NavbarComponent implements OnInit {
    ...
    constructor(private route: ActivatedRoute){}
    ...
    ngOnInit(){
        this.route.data.subscribe(data => {
            this.updateTitle(data['title'])
        });
    }
}

As well as console.log(this.route.snapshot.data); prints an empty object for me.

This is the corresponding part from my route config (notice that it will instantiate the UserEditComponent and not the NavbarComponent):

           {
                path: 'users/:id/edit',
                component: UserEditComponent,
                data: {
                    title: "Edit user"
                }
            }

Occurred with angular 4.3.3.

@rainerpl your shared component isn't going to get the current activated route because its not in the route tree. Every component used in routing gets its own ActivatedRoute and the specific data that goes along with it. Injecting ActivatedRoute into a common service or your root application template is going to get the root ActivatedRoute, which doesn't contain any component specific data.

You inject the ActivatedRoute in a shared component, you use the same approach used @danielclasen with the router.events, traversing down the route children and get the route data from the route at the bottom of the tree.

Here is an example plunker: http://plnkr.co/edit/6iVjZcnqKBi7Dpp3KrFX?p=preview

Same problem here.

I was trying to make a generic

component that is shown on all pages.
the header is supposed to grab a title attribute from route.data, but, it is always {}

More Issues: