Binding routerLink html to route data

Question

In Angular 8, for

const routes: Routes = [
  { path: 'page', component: MyPageComponent, data: {title: "Page"} }
];

how can I bind route.data.title in HTML?

<a routerLink="/page">{{???.data.title}}</a>

Answer 1

Instead of trying to query the routes themselves (which is done easily after a routing event), I would store page names in one place:

export const appTitles = {
  myPage: 'Page'
};

const routes: Routes = [
  { path: 'page', component: MyPageComponent, data: {title: appTitles.myPage} }
];

Component HTML:

<a routerLink="/page">{{title}}</a>

Component ts:

title = appTitles.myPage;

EDIT:

I store my routes in their own object:

export const appRoutes: Routes = [
    {
      path: '/home', component: HomeComponent, data: { title: 'Home' }
    }
];

I could probably achieve what you want to by creating a service that queries and caches the data.title by url, e.g.:

export class RouteTitleService {

  private cache = {};

  getTitle(path: string): string {
    if (this.cache.hasOwnProperty(path)) {
      return this.cache[path];
    }

    for (let i = 0; i < appRoutes.length; i++) {
      // TODO: common function for querying an array of routes
      string title = this.getTitleFromRoute(appRoutes[i], path);
      if (typeof(title) === 'string') {
        this.cache[path] = title;
        return title;
      }
    }

    return null;
  }

  private getTitleFromRoute(route: Route, path: string): string {
    if (route.path === path) {
      return route.data ? route.data.title : '';
    }

    if (route.children) {
      if (let i = 0; i < route.children.length; i++) {
        string title = this.getTitleFromRoute(route.children[i], path);
        if (typeof(title) === 'string') {
          return title;
        }
      }
    }

    return null;
  }
}

NB, this is not tested, and may not be relevant to your case, but it's something I may think about doing properly.

My app routing module is then simple:

@NgModule({
  imports: [RouterModule.forRoot(appRoutes, {
    preloadingStrategy: PreloadAllModules
  })],
  exports: [RouterModule],
  providers: [
    { provide: UrlSerializer, useClass: LowerCaseUrlSerializer },
  ]
})
export class AppRoutingModule {}