diff --git a/src/app/core/utils/i18n-utils.ts b/src/app/core/utils/i18n-utils.ts new file mode 100644 index 00000000..6cf6899c --- /dev/null +++ b/src/app/core/utils/i18n-utils.ts @@ -0,0 +1,12 @@ +export interface AvailableLanguage { + code: string; + name: string; +} + +export const supportedLanguages: AvailableLanguage[] = [ + {code: 'en', name: 'English'}, + {code: 'de', name: 'Deutsch'}, +]; + +export const isLanguageSupported = (value: unknown): value is string => + supportedLanguages.map((it) => it.code).includes(value as string); diff --git a/src/app/routes/connector-ui/connector-ui.component.ts b/src/app/routes/connector-ui/connector-ui.component.ts index 03dce9a6..80952b8e 100644 --- a/src/app/routes/connector-ui/connector-ui.component.ts +++ b/src/app/routes/connector-ui/connector-ui.component.ts @@ -6,6 +6,8 @@ import {map, shareReplay} from 'rxjs/operators'; import {TranslateService} from '@ngx-translate/core'; import {NavItemGroup} from 'src/app/core/services/models/nav-item-group'; import {NavItemsBuilder} from 'src/app/core/services/nav-items-builder'; +import {isLanguageSupported} from 'src/app/core/utils/i18n-utils'; +import {LocalStoredValue} from 'src/app/core/utils/local-stored-value'; import {APP_CONFIG, AppConfig} from '../../core/config/app-config'; import {LoginPollingService} from '../../core/services/login-polling.service'; @@ -24,6 +26,12 @@ export class ConnectorUiComponent implements OnInit { navItemGroups: NavItemGroup[] = []; + selectedLanguage = new LocalStoredValue( + 'en', + 'selectedLanguage', + isLanguageSupported, + ); + constructor( @Inject(APP_CONFIG) public config: AppConfig, public titleService: Title, @@ -34,7 +42,7 @@ export class ConnectorUiComponent implements OnInit { ) { this.navItemGroups = this.navItemsBuilder.buildNavItemGroups(); this.translateService.setDefaultLang('en'); - this.translateService.use(localStorage.getItem('selectedLanguage') || 'en'); + this.translateService.use(this.selectedLanguage.value); } ngOnInit() { diff --git a/src/app/shared/common/language-selector/language-selector.component.ts b/src/app/shared/common/language-selector/language-selector.component.ts index fbb69771..eb2da2ad 100644 --- a/src/app/shared/common/language-selector/language-selector.component.ts +++ b/src/app/shared/common/language-selector/language-selector.component.ts @@ -1,29 +1,25 @@ import {Component, OnInit} from '@angular/core'; import {TranslateService} from '@ngx-translate/core'; +import { + AvailableLanguage, + isLanguageSupported, + supportedLanguages, +} from 'src/app/core/utils/i18n-utils'; import {LocalStoredValue} from '../../../core/utils/local-stored-value'; -interface AvailableLanguage { - code: string; - name: string; -} - @Component({ selector: 'app-language-selector', templateUrl: './language-selector.component.html', }) export class LanguageSelectorComponent implements OnInit { - supportedLanguages: AvailableLanguage[] = [ - {code: 'en', name: 'English'}, - {code: 'de', name: 'Deutsch'}, - ]; - selectedLanguage = new LocalStoredValue( 'en', 'selectedLanguage', - (value): value is string => - this.supportedLanguages.map((it) => it.code).includes(value as string), + isLanguageSupported, ); + supportedLanguages = supportedLanguages; + constructor(private translateService: TranslateService) {} ngOnInit(): void { diff --git a/src/app/shared/common/translate-with-slot/translate-with-slot.component.ts b/src/app/shared/common/translate-with-slot/translate-with-slot.component.ts index fbba3630..f84f543d 100644 --- a/src/app/shared/common/translate-with-slot/translate-with-slot.component.ts +++ b/src/app/shared/common/translate-with-slot/translate-with-slot.component.ts @@ -22,9 +22,13 @@ export class TranslateWithSlotComponent implements OnChanges, OnDestroy { textAfter = ''; constructor(private translationService: TranslateService) { + this.splitText(); + } + + splitText() { this.key$ .pipe( - switchMap(() => this.translationService.get(this.key)), + switchMap(() => this.translationService.stream(this.key)), takeUntil(this.ngOnDestroy$), ) .subscribe((text) => {