Documentation

 

Slow downloading of translation files

If the downloading of the translation files is too slow at the startup of the application, then the translation keys will not be refreshed on the view. This effect can be prevented by watching the state change of the translation service:

// app-component.ts
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class AppComponent {

  initialized = false;

  constructor(
    private  cdRef: ChangeDetectorRef,
    private translate: TranslationService
  ) {
    this.translate.statusChange.subscribe( this.ngtChanges.bind( this ) );
  }

  private ngtChanges(
    change: TranslationChange
  ): void {

    console.log( change.description );
    if (change.context === 'app' && change.action === 'finish') {
      this.initialized = true;
      this.cdRef.detectChanges();
    }
  }
}

The initialized property can be used to hide the splash screen.