Hide translation labels until language file is loaded

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

[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));
    });
  });
}

[luzanovdm]

Has anyone found a solution to this issue?