translation in breadcrumb angular 5

Question

I have following routes and want to add translation for breadcrumb labels.

const appRoutes: Routes = [
{ path: 'crisis-center', data: {breadcrumb: 'crisis center'}, component: CrisisListComponent },
{ path: 'hero/:id',     data: {breadcrumb: 'hero'}, component: HeroDetailComponent },
{
  path: 'heroes',
  component: HeroListComponent,
  data: { breadcrumb: 'Heroes List' }
},
{ path: '',
  redirectTo: '/heroes',
  data: {breadcrumb: 'Heros'},
  pathMatch: 'full'
},
{ path: '**',       data: {breadcrumb: 'Page not found'}, component: PageNotFoundComponent }
];

I searched around and haven't found any thing. I guess I probably can use i18n en.json file, but all examples for templates. Is there a way to translate breadcrumb into other language?

Answer 1

You can use ngx-translate/core. Just import it, define en.json file and in your breadcrumb component you can do it by injecting

constructor(private translate: TranslateService) {}

and translate it in your component (notice it's synchronous method, you can check how to make it asynchronous in clear documentation):

this.translate.instant(breadcrumbTitle)

or in a template like this:

<span>{{ breadcrumbTitle | translate }}</span>