translate

package.json

@@ -33,6 +33,8 @@
     "@ks89/angular-modal-gallery": "^10.0.1",
     "@ng-select/ng-select": "^11.0.0",
     "@ngrx/store": "^16.0.1",
+    "@ngx-translate/core": "^17.0.0",
+    "@ngx-translate/http-loader": "^17.0.0",
     "@swimlane/ngx-charts": "^20.4.1",
     "@syncfusion/ej2-angular-base": "^29.2.4",
     "@syncfusion/ej2-angular-charts": "^29.2.4",

src/app/app.component.html

-<router-outlet></router-outlet>
+<router-outlet></router-outlet>
\ No newline at end of file

src/app/app.component.ts

 import { Component, Renderer2 } from '@angular/core';
+import { TranslationService } from './shared/services/translation.service';
 
 @Component({
   selector: 'app-root',
@@ -6,7 +7,8 @@ import { Component, Renderer2 } from '@angular/core';
   styleUrls: ['./app.component.scss'],
 })
 export class AppComponent {
-  constructor(private renderer: Renderer2) {}
+  constructor(private renderer: Renderer2) {
+  }
 
   ngOnInit() {
     // Use Renderer2 to append an element to the html element

src/app/app.module.ts

@@ -16,21 +16,37 @@ import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
 import { LeafletModule } from '@asymmetrik/ngx-leaflet';
 import { environment } from 'src/environments/environment';
 import { ColorPickerModule } from 'ngx-color-picker';
-import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
+import { provideHttpClient, withInterceptorsFromDi, HttpClient, HttpClientModule } from '@angular/common/http';
+import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
+import { TranslateJsonLoader } from './translate-json.loader';
 
-@NgModule({ declarations: [AppComponent, CustomLayoutComponent, ContentLayoutComponent],
-    schemas: [CUSTOM_ELEMENTS_SCHEMA],
-    bootstrap: [AppComponent], imports: [BrowserModule,
-        AppRoutingModule,
-        SharedModule,
-        BrowserAnimationsModule,
-        StoreModule.forRoot({ data: dataReaducer }),
-        ToastrModule.forRoot(),
-        // AngularFireModule,
-        AngularFireDatabaseModule,
-        AngularFirestoreModule,
-        AngularFireAuthModule,
-        LeafletModule,
-        // AngularFireModule.initializeApp(environment.firebase),
-        ColorPickerModule], providers: [provideHttpClient(withInterceptorsFromDi())] })
+@NgModule({
+  declarations: [AppComponent, CustomLayoutComponent, ContentLayoutComponent],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA],
+  bootstrap: [AppComponent],
+  imports: [
+    BrowserModule,
+    AppRoutingModule,
+    SharedModule,
+    BrowserAnimationsModule,
+    StoreModule.forRoot({ data: dataReaducer }),
+    ToastrModule.forRoot(),
+    // AngularFireModule,
+    AngularFireDatabaseModule,
+    AngularFirestoreModule,
+    AngularFireAuthModule,
+    LeafletModule,
+    // AngularFireModule.initializeApp(environment.firebase),
+    ColorPickerModule,
+    HttpClientModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useClass: TranslateJsonLoader,
+        deps: [HttpClient]
+      }
+    })
+  ],
+  providers: [provideHttpClient(withInterceptorsFromDi())]
+})
 export class AppModule {}

src/app/shared/components/header/header.component.html

@@ -55,28 +55,31 @@
               data-hs-dropdown-placement="bottom-right">
               <button id="dropdown-flag" type="button"
                 class="hs-dropdown-toggle ti-dropdown-toggle p-0 flex-shrink-0 h-[2.375rem] w-[2.375rem] border-0 rounded-full shadow-none focus:ring-gray-400 text-xs dark:focus:ring-white/10">
-                <i class="flag-icon flag-icon-th h-[1.375rem] w-[1.375rem]"></i>
+                <i class="flag-icon flag-icon-active flag-icon-th h-[1.375rem] w-[1.375rem]"
+                  [class.active]="translationService.getCurrentLang()=='th'"></i>
+                <i class="flag-icon flag-icon-active flag-icon-us h-[1.375rem] w-[1.375rem]"
+                  [class.active]="translationService.getCurrentLang()=='en'"></i>
               </button>
               <div class="hs-dropdown-menu ti-dropdown-menu min-w-[10rem]" aria-labelledby="dropdown-flag">
                 <div class="ti-dropdown-divider divide-y divide-gray-200 dark:divide-white/10">
                   <div class="py-2 first:pt-0 last:pb-0">
-                    <div class="ti-dropdown-item">
-                      <div class="flex items-center space-x-2 rtl:space-x-reverse w-full">
+                    <div class="ti-dropdown-item cursor-pointer" (click)="switchLang('th')">
+                      <div class="flex items-center space-x-2 rtl:space-x-reverse w-full ">
                         <div class="h-[1.375rem] w-[1.375rem] rounded-sm">
                           <i class="flag-icon flag-icon-th"></i>
                         </div>
                         <div>
-                          <p class="text-xs font-medium">ไทย (TH)</p>
+                          <p class="text-xs font-medium">{{'ไทย (TH)' | translate}}</p>
                         </div>
                       </div>
                     </div>
-                    <div class="ti-dropdown-item">
+                    <div class="ti-dropdown-item cursor-pointer" (click)="switchLang('en')">
                       <div class="flex items-center space-x-2 rtl:space-x-reverse w-full">
                         <div class="h-[1.375rem] w-[1.375rem] rounded-sm">
                           <i class="flag-icon flag-icon-us"></i>
                         </div>
                         <div>
-                          <p class="text-xs font-medium">English (US)</p>
+                          <p class="text-xs font-medium">{{'English (US)' | translate}}</p>
                         </div>
                       </div>
                     </div>
@@ -681,14 +684,16 @@
               <button id="dropdown-profile" type="button"
                 class="hs-dropdown-toggle ti-dropdown-toggle gap-2 p-0 flex-shrink-0 rounded-full shadow-none focus:ring-gray-400 text-xs">
                 <img class="avatar shadow-none rounded-full !ring-transparent object-cover h-8 w-8"
-                  [src]="getTokenImg()?getImg(getTokenImg()):'./assets/img/users/defaultperson.jpg'" (error)="onImageError($event)">
+                  [src]="getTokenImg()?getImg(getTokenImg()):'./assets/img/users/defaultperson.jpg'"
+                  (error)="onImageError($event)">
               </button>
 
               <div class="hs-dropdown-menu ti-dropdown-menu border-0 w-[20rem]" aria-labelledby="dropdown-profile">
                 <div class="ti-dropdown-header !bg-primary flex items-center space-x-3">
                   <div class="flex-shrink-0">
                     <img class="avatar shadow-none rounded-full !ring-transparent object-cover"
-                      [src]="getTokenImg()?getImg(getTokenImg()):'./assets/img/users/defaultperson.jpg'" (error)="onImageError($event)">
+                      [src]="getTokenImg()?getImg(getTokenImg()):'./assets/img/users/defaultperson.jpg'"
+                      (error)="onImageError($event)">
                   </div>
                   <div>
                     <p class=" ti-dropdown-header-title !text-white">

src/app/shared/components/header/header.component.scss

+.flag-icon-active {
+  position: absolute;       /* วางซ้อนกัน */
+  transition: opacity 0.5s ease; /* ความนุ่มของการเปลี่ยน */
+  opacity: 0;
+}
+
+.flag-icon-active.active {
+  opacity: 1;
+}
\ No newline at end of file

src/app/shared/components/header/header.component.ts

@@ -9,6 +9,7 @@ import { ActivatedRoute, Router } from '@angular/router';
 import { environment } from 'src/environments/environment';
 import { HttpClient } from '@angular/common/http';
 import { FileService } from '../../services/file.service';
+import { TranslationService } from '../../services/translation.service';
 
 @Component({
   selector: 'app-header',
@@ -26,12 +27,16 @@ export class HeaderComponent {
     public router: Router,
     private route: ActivatedRoute,
     private fileService: FileService,
-    private navService: NavService, private http: HttpClient) {
+    private navService: NavService,
+    private http: HttpClient,
+    public translationService: TranslationService) {
     this.getEvaluatee();
+
+    this.translationService.setDefaultLang('th');
+    this.translationService.useLang('th');
   }
   imageUrl = ''
 
-
   getEvaluatee() {
     this.employeeProfile = new MyEmployeeModel(JSON.parse(sessionStorage.getItem('employeeProfile') || '{}'));
     if (this.employeeProfile?.employeeId == undefined || this.employeeProfile?.employeeId == null || this.employeeProfile?.employeeId == '') {
@@ -163,4 +168,8 @@ export class HeaderComponent {
   getTokenImg() {
     return this.tokenService.getUserData().picture
   }
+
+  switchLang(lang: string) {
+    this.translationService.useLang(lang);
+  }
 }

src/app/shared/services/translation.service.ts

+import { Injectable } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class TranslationService {
+
+  constructor(private translate: TranslateService) { }
+
+  setDefaultLang(lang: string) {
+    this.translate.setDefaultLang(lang);
+  }
+
+  useLang(lang: string) {
+    this.translate.use(lang);
+  }
+
+  get(key: string) {
+    return this.translate.get(key);
+  }
+
+  getCurrentLang() {
+    return this.translate.getCurrentLang()
+  }
+}

src/app/shared/sharedmodule.ts

@@ -16,10 +16,13 @@ import { HoverEffectSidebarDirective } from './directives/hover-effect-sidebar.d
 import { SidemenuToggleDirective } from './directives/sidemenuToggle';
 import { AuthService } from './services/auth.service';
 import { ToggleThemeDirective } from './directives/toggle-theme.directive';
-import { HTTP_INTERCEPTORS } from '@angular/common/http';
+import { HTTP_INTERCEPTORS, HttpClient } from '@angular/common/http';
 import { ConfigPermissionService } from './services/config-permission.service';
 import { HttpRequestInterceptor } from './services/http-request.interceptor';
 import { FileService } from './services/file.service';
+import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
+import { TranslateJsonLoader } from '../translate-json.loader';
+
 
 @NgModule({
   declarations: [
@@ -40,7 +43,14 @@ import { FileService } from './services/file.service';
     RouterModule,
     SimplebarAngularModule,
     ColorPickerModule,
-    FormsModule
+    FormsModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useClass: TranslateJsonLoader,
+        deps: [HttpClient]
+      }
+    })
   ],
 
   exports: [

src/app/translate-json.loader.ts

+import { HttpClient } from '@angular/common/http';
+import { TranslateLoader } from '@ngx-translate/core';
+import { Observable } from 'rxjs';
+
+export class TranslateJsonLoader implements TranslateLoader {
+  constructor(private http: HttpClient, private prefix = './assets/i18n/', private suffix = '.json') {}
+
+  public getTranslation(lang: string): Observable<any> {
+    return this.http.get(`${this.prefix}${lang}${this.suffix}`);
+  }
+}

src/assets/i18n/en.json

+{
+  "Thai (TH)": "ไทย (TH)",
+  "English (US)": "อังกฤษ (US)"
+}
\ No newline at end of file

src/assets/i18n/th.json

+{
+  "Thai (TH)": "ไทย (TH)",
+  "English (US)": "อังกฤษ (US)"
+}
\ No newline at end of file