用ngx-translate翻译Kendo-UI网格

Question

I've got a problem with translating Kendo-UI grid component by ngx-translate.

There's part of my code. I created a grid component which just contains basic showcase of our grid component.

Then I added into assets/i18n/en.json our translations. And I wrote a service which extends MessageService from Kendo-UI: code

export class CustomMessageService extends MessageService {

  constructor(@Injectable() private translateService: TranslateService) {
    super();
  }

  get(key: string): string {
    return (this.translateService.instant(key) as any).value;
  }
}

and inside app.module I used this service instead of their service (same as in docs)

  providers: [
    {
      provide: MessageService,
      useClass: CustomMessageService
    }],

And there's a problem. Just get method inside CustomMessageService doesn't see my translates.

Stackblitz: https://stackblitz.com/edit/angular-u7aeks

I don't know why I cannot translate it properly. Any solutions?

Answer 1

TLTR: load locales before use instant

translateService.instant is sync but you need to be sure that your translations already loaded.

I've fix your example here. https://stackblitz.com/edit/angular-pcipfd

It's based on this comment https://github.com/ngx-translate/core/issues/517#issuecomment-299637956