Introduce I18nService as translation wrapper

src/app/app.component.ts

@@ -1,7 +1,8 @@
 import { Component, OnInit } from '@angular/core';
-import { TranslocoService } from '@ngneat/transloco';
 import { NGXLogger } from 'ngx-logger';
 import { Title } from '@angular/platform-browser';
+import { I18nService } from './i18n/i18n.service';
+import { firstValueFrom } from 'rxjs';
 
 @Component({
   selector: 'app-root',
@@ -10,14 +11,14 @@ import { Title } from '@angular/platform-browser';
 })
 export class AppComponent implements OnInit {
   constructor(
-    private i18nService: TranslocoService,
+    private i18nService: I18nService,
     private logger: NGXLogger,
     private title: Title
   ) {
     this.logger.info('Active lang: ' + this.i18nService.getActiveLang());
   }
 
   ngOnInit(): void {
-    this.i18nService.selectTranslate('header.title').subscribe(value => this.title.setTitle(value));
+    firstValueFrom(this.i18nService.translate('header.title')).then(value => this.title.setTitle(value));
   }
 }

src/app/header/header.component.ts

@@ -1,6 +1,6 @@
 import { Component } from '@angular/core';
-import { TranslocoService } from '@ngneat/transloco';
 import { NGXLogger } from 'ngx-logger';
+import { I18nService } from '../i18n/i18n.service';
 
 @Component({
   selector: 'app-header',
@@ -9,7 +9,7 @@ import { NGXLogger } from 'ngx-logger';
 })
 export class HeaderComponent {
   constructor(
-    private i18nService: TranslocoService,
+    private i18nService: I18nService,
     private logger: NGXLogger
   ) {}
 

src/app/i18n/i18n.module.ts

@@ -3,6 +3,7 @@ import { isDevMode, NgModule } from '@angular/core';
 import { I18nHttpLoaderService } from './i18n-http-loader.service';
 import { provideHttpClient } from '@angular/common/http';
 import { provideTranslocoPreloadLangs } from '@ngneat/transloco-preload-langs';
+import { I18nService } from './i18n.service';
 
 @NgModule({
   exports: [TranslocoModule],
@@ -17,7 +18,8 @@ import { provideTranslocoPreloadLangs } from '@ngneat/transloco-preload-langs';
       },
       loader: I18nHttpLoaderService
     }),
-    provideTranslocoPreloadLangs(['en', 'de'])
+    provideTranslocoPreloadLangs(['en', 'de']),
+    I18nService
   ]
 })
 export class I18nModule {

src/app/i18n/i18n.service.ts

@@ -0,0 +1,19 @@
+import { Injectable } from '@angular/core';
+import { TranslocoService } from '@ngneat/transloco';
+
+@Injectable()
+export class I18nService {
+  constructor(private readonly translocoService: TranslocoService) {}
+
+  getActiveLang() {
+    return this.translocoService.getActiveLang();
+  }
+
+  translate(key: string) {
+    return this.translocoService.selectTranslate<string>(key);
+  }
+
+  setActiveLang(languageCode: string) {
+    this.translocoService.setActiveLang(languageCode);
+  }
+}

src/app/map/map.service.ts

@@ -17,15 +17,15 @@ export class MapService {
   private readonly euBordersLayer: Promise<GeoJSON>;
 
   constructor(
-    private http: HttpClient,
-    private log: NGXLogger,
-    private notificationService: NotificationService
+    private readonly http: HttpClient,
+    private readonly log: NGXLogger,
+    private readonly notificationService: NotificationService
   ) {
     this.euBordersLayer = this.initEuBordersLayer();
   }
 
   private async initEuBordersLayer() {
-    return firstValueFrom(this.http.get<GeoJsonObject>('./assets/geo-data/european-borders.json2'))
+    return firstValueFrom(this.http.get<GeoJsonObject>('./assets/geo-data/european-borders.json'))
       .then(jsonResponse => {
         this.log.debug('Loaded borders json', jsonResponse);
         return geoJson(jsonResponse, { style: euBorderStyle });

src/app/notifications/notification.service.ts

@@ -1,9 +1,9 @@
 import { Injectable } from '@angular/core';
 import { ToastrService } from 'ngx-toastr';
-import { TranslocoService } from '@ngneat/transloco';
 import { NGXLogger } from 'ngx-logger';
 import { HttpErrorResponse } from '@angular/common/http';
 import { firstValueFrom } from 'rxjs';
+import { I18nService } from '../i18n/i18n.service';
 
 export const options = {
   timeOut: 5000,
@@ -15,15 +15,15 @@ export const options = {
 @Injectable()
 export class NotificationService {
   constructor(
-    private toastr: ToastrService,
-    private i18nService: TranslocoService,
-    private log: NGXLogger
+    private readonly toastrService: ToastrService,
+    private readonly i18nService: I18nService,
+    private readonly log: NGXLogger
   ) {}
 
   async showError(message: string, error: HttpErrorResponse) {
     this.log.error(message, error);
-    firstValueFrom(this.i18nService.selectTranslate('notifications.error-title')).then(title =>
-      this.toastr.error(error.message, title, options)
+    firstValueFrom(this.i18nService.translate('notifications.error-title')).then(title =>
+      this.toastrService.error(error.message, title, options)
     );
   }
 }