Hide translation labels until language file is loaded

[micobarac]

I'm submitting a ... (check one with "x")

[x] bug report
[ ] support request
[ ] feature request

Question How do I hide translation labels until language file is loaded? I assume this would involve some kind of cloak directive.

Current behavior Problem is when I have something like {{ Section.Title | translate }}, Section.Title is visible until language file is loaded.

• ngx-translate version: latest
• Angular version: 4.0

[AlexAlexGoTO]

Same question...

[helgus]

may be should make it hidden by default and in ts make listener and in this listener activate this block ?

[MJomaa]

Is there an update on this matter?

[bautistaaa]

bump**

[lifenautjoe]

This is such a basic thing to have.. Any update on this?

[AlexAlexGoTO]

Hi guys. I fix it in my situation but I'm not sure that it help you

TranslatePipe.prototype.updateValue = function (key, interpolateParams, translations) {
  var _this = this;
  var onTranslation = function (res) {
      **_this.value = res !== undefined ? res != key ? res: "" : key;** //_rewrited line_
      _this.lastKey = key;
      _this._ref.markForCheck();
  };
  if (translations) {
      var res = this.translate.getParsedResult(translations, key, interpolateParams);
      if (typeof res.subscribe === 'function') {
          res.subscribe(onTranslation);
      }
      else {
          onTranslation(res);
      }
  }
  this.translate.get(key, interpolateParams).subscribe(onTranslation);
}

_this.value = res !== undefined ? res != key ? res: "" : key;

In my situation I just skip value in pipe if pipe-value == translation key.

For example

{{Labels.Name | translation }}

in my code if res == Labels.Name i just set empty string - but if value != Labels.Name I just set Value. So pipe waiting for value that not equeal translation key Labels.Name

I add thit prototype in app.module. But i think You can add it anywhere

[luzanovdm]

Has anyone found a solution to this issue?

[Maryna-Yelakova]

Any updates on this?

[MJomaa]

@endless-shining @Maryna-Yelakova Not 100% sure if it fixed it for me, but I don't see the keys anymore when I initialize the translation stuff within APP_INITIALIZER.

[Maryna-Yelakova]

@MJomaa it does not work for me

[lazabazsa]

@MJomaa Could you please share your code snippet? I tried it, but couldn't make it work. Thanks!

[micobarac]

This is still an issue, with 2 Angular versions up and one year later :(

[MJomaa]

@lazabazsa

That's what I do. (LocalSettingsService= custom service, Store = ngrx store)

providers: [
    {
      provide: APP_INITIALIZER,
      useFactory: appInitializerFactory,
      deps: [TranslateService, LocalSettingsService, Store, Injector],
      multi: true
    }
 ]

and

export function appInitializerFactory(translateService: TranslateService, localSettingsService: LocalSettingsService, store: Store<AppState>, injector: Injector): () => Promise<any> {
  return () => new Promise<any>((resolve: any) => {
    const locationInitialized = injector.get(LOCATION_INITIALIZED, Promise.resolve(null));
    locationInitialized.then(() => {
      translateService.addLangs(['en', 'de']);
      translateService.setDefaultLang('en');
      let selectedLanguage = localSettingsService.getSelectedLanguage();
      if (!selectedLanguage) {
        const browserLang = translateService.getBrowserLang();
        selectedLanguage = browserLang.match(/en|de/) ? browserLang : 'en';
      }
      translateService.use(selectedLanguage).pipe(take(1)).subscribe(() => store.dispatch(new HydrateSelectedLanguageAction(selectedLanguage)),
        err => console.error(err), () => resolve(null));
    });
  });
}

[errorstudent]

thanks @MJomaa, it's works

[psmyrdek]

Just in case:

this.translated = await this.translateService.get('key.to.label').toPromise();

[haskelcurry]

Any updates on this issue? It's the basic thing to have..

[SeaweedbrainCY]

I know it's a pretty old issue but since it's still interesting people (like me 5y later), here is another workaround :

To avoid the glitch, instead of loading the translation json with HttpLoad, we can import them directly in the angular application.

To do so, modify the app.module.ts to import and use the json file :

import defaultLanguage from "./../assets/i18n/en.json";
[...]
translate.setTranslation('en', defaultLanguage);

And tsconfig.json:

"compilerOptions": {
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports": true
}

Disclaimer : this is a good solution if you have few supported languages. If not, at least the default language can be imported this way and the little glitch will continue for other languages.

Be careful to not include 'en' in your translate.addLangs(...), you will load the en.json file for nothing through an http request