Core: 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

[dmitry-lz]

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();

[mtuzinskiy]

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