Synchronize language between shell and microfrontend

Author: xkons

projects/bookings/src/micro-frontend/entry.component.ts

@@ -1,17 +1,26 @@
 import { Component, Input, OnChanges, SimpleChanges } from '@angular/core';
 import { Router } from '@angular/router';
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   template: '<mf-booking></mf-booking>',
 })
 export class EntryComponent implements OnChanges {
   @Input() route?: string;
 
-  constructor(private router: Router) {}
+  @Input() language?: 'en' | 'de';
+
+  constructor(
+    private router: Router,
+    private translateService: TranslateService
+  ) {}
 
   ngOnChanges(changes: SimpleChanges) {
     if (changes.route && this.route) {
       this.router.navigateByUrl(this.route, { state: { fromPlatform: true } });
     }
+    if (changes.language && this.language) {
+      this.translateService.use(this.language);
+    }
   }
 }

projects/train-platform/src/micro-frontends/bookings-host.component.ts

@@ -2,6 +2,11 @@ import { Component } from '@angular/core';
 
 @Component({
   selector: 'app-bookings-host',
-  template: ` <mf-bookings-entry microFrontendRouting></mf-bookings-entry> `,
+  template: `
+    <mf-bookings-entry
+      microFrontendRouting
+      microFrontendLanguage
+    ></mf-bookings-entry>
+  `,
 })
 export class BookingsHostComponent {}

projects/train-platform/src/micro-frontends/bookings-host.module.ts

@@ -2,10 +2,15 @@ import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { BookingsHostComponent } from './bookings-host.component';
 import { LoadMicroFrontendGuard } from './load-micro-frontend.guard';
+import { MicroFrontendLanguageDirective } from './micro-frontend-language.directive';
 import { MicroFrontendRoutingDirective } from './micro-frontend-routing.directive';
 
 @NgModule({
-  declarations: [BookingsHostComponent, MicroFrontendRoutingDirective],
+  declarations: [
+    BookingsHostComponent,
+    MicroFrontendRoutingDirective,
+    MicroFrontendLanguageDirective,
+  ],
   imports: [
     RouterModule.forChild([
       {

projects/train-platform/src/micro-frontends/micro-frontend-language.directive.ts

@@ -0,0 +1,35 @@
+import { Directive, ElementRef, OnDestroy, OnInit } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+import { Subject } from 'rxjs';
+import { map, startWith, takeUntil } from 'rxjs/operators';
+
+@Directive({
+  // eslint-disable-next-line @angular-eslint/directive-selector
+  selector: '[microFrontendLanguage]',
+})
+export class MicroFrontendLanguageDirective implements OnInit, OnDestroy {
+  private destroyed$ = new Subject<void>();
+
+  constructor(
+    private element: ElementRef,
+    private translateService: TranslateService
+  ) {}
+
+  ngOnInit(): void {
+    this.translateService.onLangChange
+      .pipe(
+        map((event) => event.lang),
+        startWith(
+          this.translateService.currentLang ?? this.translateService.defaultLang
+        ),
+        takeUntil(this.destroyed$)
+      )
+      .subscribe((language) => {
+        this.element.nativeElement.language = language;
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroyed$.next();
+  }
+}