transate

package.json

@@ -24,6 +24,8 @@
     "@angular/platform-browser-dynamic": "",
     "@angular/router": "",
     "@ng-bootstrap/ng-bootstrap": "",
+    "@ngx-translate/core": "14.0.0",
+    "@ngx-translate/http-loader": "7.0.0",
     "angular-oauth2-oidc": "",
     "bootstrap": "",
     "bootstrap-icons": "",
@@ -64,4 +66,4 @@
     "ts-node": "",
     "typescript": ""
   }
-}
+}

src/app/app.module.ts

@@ -1,6 +1,6 @@
 import { BrowserModule }       from '@angular/platform-browser';
 import { NgModule }            from '@angular/core';
-import { HttpClientModule }    from '@angular/common/http';
+import { HttpClientModule, HttpClient }    from '@angular/common/http';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { OAuthModule }         from 'angular-oauth2-oidc';
 
@@ -26,6 +26,12 @@ import { ConfigComponent }               from './components/config/config.compon
 import { UsersComponent }                from './components/user/user.component';
 import { ClientComponent }               from './components/client/client.component';
 import { InputfieldComponent }           from './components/inputfield/inputfield.component';
+import {TranslateModule, TranslateLoader} from '@ngx-translate/core';
+import {TranslateHttpLoader} from '@ngx-translate/http-loader';
+
+export function HttpLoaderFactory(http: HttpClient) {
+  return new TranslateHttpLoader(http);
+}
 
 @NgModule({
   declarations: [
@@ -52,6 +58,14 @@ import { InputfieldComponent }           from './components/inputfield/inputfiel
     FormsModule,
     ReactiveFormsModule,
     OAuthModule.forRoot(),
+    TranslateModule.forRoot({
+      defaultLanguage: 'en',
+      loader: {
+        provide: TranslateLoader,
+        useFactory: HttpLoaderFactory,
+        deps: [HttpClient]
+      }
+    }),
   ],
   providers: [
     SettingsService,

src/app/components/app/app.component.css

@@ -14,6 +14,8 @@ div.img-container{
     display: flex;
     justify-content: center;
     align-items: center;
+    margin-left: 5px;
+    margin-right: 5px;
 }
 
 .active { 

src/app/components/app/app.component.html

@@ -23,39 +23,44 @@
             class="nav-link {{ currentRoute == 'user' ? 'active' : '' }}"
             href="./user"
             (click)="isMenuCollapsed = true"
-            >User</a
+            translate
+            >App.Menus.User</a
           >
         </li>
         <li class="nav-item" *ngIf="isAdmin()">
           <a
             class="nav-link {{ currentRoute == 'client' ? 'active' : '' }}"
             href="./client"
             (click)="isMenuCollapsed = true"
-            >Client</a
+            translate
+            >App.Menus.Client</a
           >
         </li>
         <li class="nav-item" *ngIf="isAdmin()">
           <a
             class="nav-link {{ currentRoute == 'config' ? 'active' : '' }}"
             href="./config"
             (click)="isMenuCollapsed = true"
-            >Config</a
+            translate
+            >App.Menus.Config</a
           >
         </li>
         <li class="nav-item" *ngIf="isAdmin()">
           <a
             class="nav-link {{ currentRoute == 'webfinger' ? 'active' : '' }}"
             href="./webfinger"
             (click)="isMenuCollapsed = true"
-            >Webfinger</a
+            translate
+            >App.Menus.Webfinger</a
           >
         </li>
         <li class="nav-item">
           <a
             class="nav-link {{ currentRoute == 'endpoints' ? 'active' : '' }}"
             href="./endpoints"
             (click)="isMenuCollapsed = true"
-            >Endpoints</a
+            translate
+            >App.Menus.Endpoints</a
           >
         </li>
       </ul>
@@ -90,6 +95,7 @@
           ngbDropdownItem
           class="border-0 d-flex flex-row justify-content-start align-items-center py-2 btn btn-outline-primary bg-transparent px-0"
           (click)="changelLanguage('en')"
+          translate
         >
           <img
             src="assets/img/english-icon.png"
@@ -98,12 +104,13 @@
             alt="english-icon"
           />
           <div class="p-1"></div>
-          English
+          Langs.en
         </button>
         <button
           ngbDropdownItem
           class="border-0 d-flex flex-row justify-content-start align-items-center py-2 btn btn-outline-primary bg-transparent px-0"
           (click)="changelLanguage('tw')"
+          translate
         >
           <img
             src="assets/img/taiwan-icon.svg"
@@ -112,7 +119,7 @@
             alt="english-icon"
           />
           <div class="p-1"></div>
-          Taiwan
+          Langs.tw
         </button>
       </div>
     </div>
@@ -128,7 +135,7 @@
         class="btn-logout btn btn-outline-primary border-0 d-flex flex-row justify-content-center align-items-center"
         ngbDropdownToggle
       >
-        <div class="p-3 bg-secondary rounded-circle"></div>
+        <!-- <div class="p-3 bg-secondary rounded-circle"></div> -->
         <div class="p-1"></div>
         <div class="label-username">{{ getId() }}</div>
       </button>
@@ -142,16 +149,17 @@
           [routerLink]="['/selfservice']"
           *ngIf="isLoggedIn()"
         >
-          <div class="avatar-small bg-secondary rounded-circle"></div>
+          <!-- <div class="avatar-small bg-secondary rounded-circle"></div> -->
           <div class="p-1"></div>
           {{ getId() }}
         </button>
         <button
           class="btn btn-primary btn-lg py-3 d-flex align-items-center justify-content-center"
           ngbDropdownItem
           (click)="isLoggedIn() ? logout() : login()"
+          translate
         >
-          {{ isLoggedIn() ? "Log Out" : "Login" }}
+          {{ isLoggedIn() ? "App.Menus.Logout" : "Login" }}
         </button>
       </div>
     </div>

src/app/components/app/app.component.ts

@@ -6,6 +6,7 @@ import { SettingsService } from "../../services/settings.service";
 import { UserService } from "../../services/user.service";
 import { User } from "../../interfaces/user";
 import jwt_decode from "jwt-decode";
+import { TranslateService } from '@ngx-translate/core';
 
 @Component({
   selector: "app-root",
@@ -28,7 +29,8 @@ export class AppComponent {
     private router: Router,
     private location: Location,
     private settings: SettingsService,
-    private userService: UserService
+    private userService: UserService,
+    private translate: TranslateService,
   ) {
     // Configure OAuth
     this.oauthService.configure({
@@ -70,6 +72,10 @@ export class AppComponent {
         this.breadcrumbs = event.url.split('/').filter(route => route);
       }
     });
+
+    this.translate.onLangChange.subscribe((event) => {
+      this.currentLanguage = event.lang as typeof this.currentLanguage;
+    })
   }
 
   setActive(route: string) {
@@ -162,13 +168,13 @@ export class AppComponent {
   }
 
   currentLanguageLabel() {
-    switch (this.currentLanguage) {
+    switch (this.translate.currentLang) {
       case "en":
-        return "English";
+        return this.translate.get('Langs.en');
       case "tw":
-        return "Taiwan";
+        return this.translate.get('Langs.tw');
       default:
-        return "English";
+        return this.translate.get('Langs.en');
     }
   }
 
@@ -184,7 +190,7 @@ export class AppComponent {
   }
 
   changelLanguage(value: "en" | "tw") {
-    this.currentLanguage = value;
+    this.translate.use(value);
   }
 
 }