Angular 6 - Get current route and its data

Question

How to get the current route you're in and its data, children and parent?

If this is the route structure:

const routes: Routes = [
  {path: 'home', component: HomeComponent, data: {title: 'Home'}},
  {
    path: 'about', 
    component: AboutComponent, 
    data: {title: 'About'},
    children: [
      {
        path: 'company',
        component: 'CompanyComponent',
        data: {title: 'Company'}
      },
      {
        path: 'mission',
        component: 'MissionComponent',
        data: {title: 'Mission'}
      },
      ...
    ]
  },
  ...
]

If I am currently in CompanyComponent, how do I get my current route w/c is Company, get its parent w/c is about, its data and its siblings such as mission, etc.?

Siddharth Kaushik · Accepted Answer · 2018-08-03T23:29:07.503

20

@Component({...})
export class CompanyComponent implements OnInit {

constructor(
  private router: Router,
  private route: ActivatedRoute
) {}

ngOnInit() {

  // Parent:  about 
  this.route.parent.url.subscribe(url => console.log(url[0].path));

  // Current Path:  company 
  this.route.url.subscribe(url => console.log(url[0].path));

  // Data:  { title: 'Company' } 
  this.route.data.subscribe(data => console.log(data));

  // Siblings
  console.log(this.router.config);
}
}

edited Aug 03 '18 at 23:29

answered Jul 31 '18 at 21:42

Siddharth Kaushik

326
2
10

1

I'm getting an empty object in `this.route.data.subscribe(data => console.log(data));` any idea what could be the problem? – ps0604 Oct 15 '18 at 16:14
5

`ActivatedRoute` provides data (resolved or static) for components loaded in an outlet; [more here](https://angular.io/api/router/ActivatedRoute). My best guess is that you might be accessing the ActivateRoute-data from outside of `router-outlet`. I am just second-guessing here. I created a simple [StackBlitz](https://stackblitz.com/edit/angular-sngosq?file=src%2Fapp%2Fapp.component.html). If you can recreate the issue, I might be of better help. – Siddharth Kaushik Oct 16 '18 at 00:13
3

It's empty for me as well – jeanl May 09 '19 at 10:13
getting empty object – Saad Abbasi Oct 26 '20 at 07:38

score 5 · Answer 2 · answered Mar 11 '19 at 11:14

  constructor(
    private router: Router,
    private route: ActivatedRoute,
  ) {
  }

  ngOnInit() {
    this.router.events.pipe(
        filter(event => event instanceof NavigationEnd),
        map(() => {
          return this.getHeaderClasses();
        }),
      )
      .subscribe((headerClasses: string | null) => {
        this.headerClasses = headerClasses;
      });
    this.headerClasses = this.getHeaderClasses();
  }


  getHeaderClasses(): string | null {
    let child = this.route.firstChild;
    while (child) {
      if (child.firstChild) {
        child = child.firstChild;
      } else if (child.snapshot.data && child.snapshot.data['headerClasses']) {
        return child.snapshot.data['headerClasses'];
      } else {
        return null;
      }
    }
    return null;
  }

routing

{
  path: 'list',
  component: DialogListComponent,
  data: {
    headerClasses: 'col-lg-8',
  },
},

score 2 · Answer 3 · answered Aug 23 '19 at 10:51

You can access the route's data property from the snapshot like this:

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';

@Component({
    templateUrl: './app/home/welcome.component.html'
})
export class WelcomeComponent implements OnInit {
    public pageTitle: string;

    constructor( private route: ActivatedRoute) {
    } 

    ngOnInit(): void {
     this.pageTitle = this.route.snapshot.data['title'];
  }

}

score 0 · Answer 4 · edited Sep 18 '22 at 17:37

0

@Component({...})
@UntilDestroy()
    
export class CompanyComponent implements OnInit {
  constructor(private router: Router) {}
    
  ngOnInit() {
    this.router.events
      .pipe(
        untilDestroyed(this),
        filter((event): event is NavigationEnd => event instanceof NavigationEnd),
        map((event: NavigationEnd) => event.url)
      )
      .subscribe(url=> {
        console.log(url);
      });
  }
}

edited Sep 18 '22 at 17:37

Tyler2P

2,324
26
22
31

answered Sep 13 '22 at 07:50

mehrnaz nazari

13
4

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Sep 18 '22 at 17:36

Angular 6 - Get current route and its data

4 Answers4

Linked