fix title, translate with slot

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

src/app/core/utils/local-storage-utils.ts

@@ -19,7 +19,12 @@ export class LocalStorageUtils {
     const storedItem = localStorage.getItem(key);
 
     try {
-      return storedItem == null ? defaultValue : JSON.parse(storedItem);
+      if (storedItem == null) {
+        this.saveData(key, defaultValue);
+        return defaultValue;
+      } else {
+        return JSON.parse(storedItem);
+      }
     } catch (e) {
       console.warn('Error parsing local storage value', key, storedItem);
       return defaultValue;

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<string>(
+    '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() {

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<string>(
     '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 {

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) => {