I want to display the name of the route in the appponent.html template. I'm looking for a simple solution, something that can be written like this:

{{router.currentRoute.name}}

My current router config:

export const routes: RouterConfig = [
    {
        path: '',
        redirectTo: '/catalog',
        pathMatch: 'full'
    },
    {
        path: 'catalog',
        name: 'Catalog', // Is this property deprecated?
        component: CatalogComponent
    },
    {
        path: 'summary',
        name: 'Summary',
        component: SummaryComponent
    }
];

I want to display the name of the route in the app.component.html template. I'm looking for a simple solution, something that can be written like this:

{{router.currentRoute.name}}

My current router config:

export const routes: RouterConfig = [
    {
        path: '',
        redirectTo: '/catalog',
        pathMatch: 'full'
    },
    {
        path: 'catalog',
        name: 'Catalog', // Is this property deprecated?
        component: CatalogComponent
    },
    {
        path: 'summary',
        name: 'Summary',
        component: SummaryComponent
    }
];

• javascript
• angular
• angular-ui-router

• 1 There are no route names in the new router. – Günter Zöchbauer Commented Aug 4, 2016 at 9:45
• So if I want to display route name I have to code my own solution? – Adrian Moisa Commented Aug 4, 2016 at 9:46
• 1 The data parameter could be used for that. angular.io/docs/ts/latest/api/router/index/… – Günter Zöchbauer Commented Aug 4, 2016 at 9:47
• Is this proper usage? {path: 'catalog', data: 'Test data for catalog', component: CatalogComponent} + import { Router, ActivatedRoute } from '@angular/router'; + constructor(private _route: ActivatedRoute) {this.route = this._route;} + log() {console.log(this.route);};. I can't find the test data string in the object outputed by the console. Can you provide an example? – Adrian Moisa Commented Aug 4, 2016 at 10:02
• I don't have time just yet but something along angular.io/docs/ts/latest/api/router/index/… – Günter Zöchbauer Commented Aug 4, 2016 at 10:13

2 Answers 2

If your routes are configured with your route name in the data property like this:

{
    path: 'somepath',
    component: SomeComponent,
    data: {
        name: 'My Route Name'
    }
}

In your app.component.ts you can import 'rxjs/add/operator/filter'; + import { ActivatedRoute, Router, NavigationEnd } from '@angular/router'; and do the following:

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

ngOnInit() {
  this.router.events
    .filter(event => event instanceof NavigationEnd)
    .subscribe(event => {
      let currentRoute = this.route.root;
      while (currentRoute.children[0] !== undefined) {
        currentRoute = currentRoute.children[0];
      }
      console.log(currentRoute.snapshot.data);
    })
}

This will listen for NavigationEnd events and then traverse down to the current route so that you can access the data of that route.

If you are on /somepage using the code above, it should print { name="My Route Name"} in your console.

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

ngOnInit() {
this.router.events.pipe(
 .filter(event => event instanceof NavigationEnd)).subscribe(event => {
   let currentRoute = this.route.root;
   while (currentRoute.children[0] !== undefined) {
     currentRoute = currentRoute.children[0];
   }
   console.log(currentRoute.snapshot.data);
 });
}```


 try this if anybody facing issue with filter