Feature/21 implement ngx-translate

frontend/package.json

@@ -24,6 +24,8 @@
     "@angular/forms": "^20.2.1",
     "@angular/platform-browser": "^20.2.1",
     "@angular/router": "^20.2.1",
+    "@ngx-translate/core": "^17.0.0",
+    "@ngx-translate/http-loader": "^17.0.0",
     "@puzzleitc/puzzle-shell": "^5.1.0",
     "bootstrap": "^5.3.7",
     "rxjs": "~7.8.0",

frontend/public/i18n/de.json

@@ -0,0 +1,8 @@
+{
+  "PCTS_LOGO_ALT": "Puzzle PCTS Logo",
+  "LOGOUT": "Abmelden",
+  "EXAMPLE": {
+    "NO_EXAMPLES": "Keine Beispiele!",
+    "CREATE": "Ich will ein Beispiel erstellen!"
+  }
+}

frontend/src/app/app.component.css

@@ -4,4 +4,5 @@ pzsh-menu {
 
 .pcts-logo {
   height: 32px;
+  color: white;
 }

frontend/src/app/app.component.html

@@ -2,7 +2,7 @@
   <pzsh-topbar class="position-sticky top-0">
     <img
       src="/images/pcts-logo.svg"
-      alt="Puzzle PCTS Logo"
+      alt="{{'PCTS_LOGO_ALT' | translate}}"
       class="pcts-logo"
     />
   </pzsh-topbar>
@@ -16,7 +16,7 @@
         <div slot="items">
           <pzsh-menu-dropdown-item href="#">
             <pzsh-icon name="sign-out-alt"></pzsh-icon>
-            Logout
+            {{ "LOGOUT" | translate }}
           </pzsh-menu-dropdown-item>
         </div>
       </pzsh-menu-dropdown>

frontend/src/app/app.component.spec.ts

@@ -1,12 +1,14 @@
 import { TestBed } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 import { RouterModule } from '@angular/router';
+import { TranslateModule } from '@ngx-translate/core';
 jest.mock('@puzzleitc/puzzle-shell', () => jest.fn());
 
 describe('AppComponent', () => {
   beforeEach(async() => {
     await TestBed.configureTestingModule({
       imports: [AppComponent,
+        TranslateModule.forRoot(),
         RouterModule.forRoot([])]
     })
       .compileComponents();

frontend/src/app/app.component.ts

@@ -1,10 +1,12 @@
 import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 import '@puzzleitc/puzzle-shell';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-root',
-  imports: [RouterOutlet],
+  imports: [RouterOutlet,
+    TranslatePipe],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css',
   schemas: [CUSTOM_ELEMENTS_SCHEMA]

frontend/src/app/app.config.ts

@@ -7,12 +7,22 @@ import { provideRouter } from '@angular/router';
 
 import { routes } from './app.routes';
 import { provideHttpClient } from '@angular/common/http';
+import { provideTranslateService } from '@ngx-translate/core';
+import { provideTranslateHttpLoader } from '@ngx-translate/http-loader';
 
 export const appConfig: ApplicationConfig = {
   providers: [
     provideBrowserGlobalErrorListeners(),
     provideZonelessChangeDetection(),
     provideRouter(routes),
-    provideHttpClient()
+    provideHttpClient(),
+    provideTranslateService({
+      lang: 'de',
+      fallbackLang: 'de',
+      loader: provideTranslateHttpLoader({
+        prefix: '/i18n/',
+        suffix: '.json'
+      })
+    })
   ]
 };

frontend/src/app/example/example.component.html

@@ -2,9 +2,9 @@ <h1>{{ (example()| async)?.text }}</h1>
 <input type="number" [(ngModel)]="exampleId"/>
 
 @for (example of this.examples(); track example.id) {
-<p>{{ example.text }}</p>
+  <p>{{ example.text }}</p>
 } @empty {
-<p>No examples!</p>
+  <p>{{ "EXAMPLE.NO_EXAMPLES" | translate }}</p>
 }
 
-<button type="button" (click)="createNewExample()">I want to create a new example!</button>
+<button type="button" (click)="createNewExample()">{{ "EXAMPLE.CREATE" | translate }}</button>

frontend/src/app/example/example.component.spec.ts

@@ -3,6 +3,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ExampleComponent } from './example.component';
 import { provideHttpClient } from '@angular/common/http';
 import { provideHttpClientTesting } from '@angular/common/http/testing';
+import { TranslateModule } from '@ngx-translate/core';
 
 describe('Example', () => {
   let component: ExampleComponent;
@@ -12,7 +13,8 @@ describe('Example', () => {
     await TestBed.configureTestingModule({
       providers: [provideHttpClient(),
         provideHttpClientTesting()],
-      imports: [ExampleComponent]
+      imports: [ExampleComponent,
+        TranslateModule.forRoot()]
     })
       .compileComponents();
 

frontend/src/app/example/example.component.ts

@@ -3,11 +3,13 @@ import { ExampleService } from './example.service';
 import { ExampleDto } from './dto/example.dto';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
+import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
   selector: 'app-example',
   imports: [CommonModule,
-    FormsModule],
+    FormsModule,
+    TranslatePipe],
   templateUrl: './example.component.html',
   styleUrl: './example.component.css'
 })