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.