feat: add language selector to header and detect browser default language

src/app/app.component.ts

@@ -1,50 +1,37 @@
-import {Component, OnInit} from '@angular/core';
+import { Component, OnInit } from '@angular/core';
+import { NavigationEnd, Router } from '@angular/router';
 import { initFlowbite } from 'flowbite';
-import { TranslateService } from '@ngx-translate/core';
-import {LocalStorageService} from "./services/local-storage.service";
-import {Category} from "./models/interfaces";
-import {EventMessageService} from "./services/event-message.service";
-import { ActivatedRoute, NavigationEnd } from '@angular/router';
-import { Router } from '@angular/router';
+import * as moment from 'moment';
+import { filter } from 'rxjs';
 import { LoginInfo } from 'src/app/models/interfaces';
-import { ApiServiceService } from 'src/app/services/product-service.service';
 import { RefreshLoginServiceService } from "src/app/services/refresh-login-service.service";
-import * as moment from 'moment';
-import {ThemeService} from "./services/theme.service";
-import {environment} from "../environments/environment";
-import { filter } from 'rxjs'; 
+import { environment } from "../environments/environment";
+import { EventMessageService } from "./services/event-message.service";
+import { LocalStorageService } from "./services/local-storage.service";
+import { LocaleService } from './services/locale.service';
+import { ThemeService } from "./services/theme.service";
 
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css'], 
+  styleUrls: ['./app.component.css'],
 })
 export class AppComponent implements OnInit {
   title = 'BAE Marketplace';
   showPanel = false;
-  providerThemeName=environment.providerThemeName;
-  isProduction:boolean = environment.isProduction;
+  providerThemeName = environment.providerThemeName;
+  isProduction: boolean = environment.isProduction;
   showHeaderAndFooter = false;
 
-  constructor(private translate: TranslateService,
-              private localStorage: LocalStorageService,
-              private eventMessage: EventMessageService,
-              private route: ActivatedRoute,
-              private router: Router,
-              private api: ApiServiceService,
-              private themeService: ThemeService,
-              private refreshApi: RefreshLoginServiceService) {
-    this.translate.addLangs(['en', 'es']);
-    this.translate.setDefaultLang('es');
-    let currLang = this.localStorage.getItem('current_language')
-    if(!currLang || currLang == null) {
-      this.localStorage.setItem('current_language', '');
-      this.translate.use('es');
-    } else {
-      this.translate.use(currLang);
-    }
-    if(!this.localStorage.getObject('selected_categories'))
+  constructor(private localeService: LocaleService,
+    private localStorage: LocalStorageService,
+    private eventMessage: EventMessageService,
+    private router: Router,
+    private themeService: ThemeService,
+    private refreshApi: RefreshLoginServiceService) {
+    this.localeService.init().subscribe();
+    if (!this.localStorage.getObject('selected_categories'))
       this.localStorage.setObject('selected_categories', []);
 
     /*this.eventMessage.messages$.subscribe(ev => {
@@ -60,34 +47,34 @@ export class AppComponent implements OnInit {
     this.themeService.initializeProviderTheme(providerThemeName);
 
     initFlowbite();
-    if(!this.localStorage.getObject('selected_categories'))
+    if (!this.localStorage.getObject('selected_categories'))
       this.localStorage.setObject('selected_categories', []);
-    if(!this.localStorage.getObject('cart_items'))
+    if (!this.localStorage.getObject('cart_items'))
       this.localStorage.setObject('cart_items', []);
-    if(!this.localStorage.getObject('login_items'))
+    if (!this.localStorage.getObject('login_items'))
       this.localStorage.setObject('login_items', {});
-    if(!this.localStorage.getObject('feedback'))
+    if (!this.localStorage.getObject('feedback'))
       this.localStorage.setObject('feedback', {});
     //this.checkPanel();
     this.eventMessage.messages$.subscribe(ev => {
-      if(ev.type === 'LoginProcess') {
+      if (ev.type === 'LoginProcess') {
         this.refreshApi.stopInterval();
         let info = ev.value as LoginInfo;
 
-        this.refreshApi.startInterval(((info.expire - moment().unix())-4)*1000, ev);
+        this.refreshApi.startInterval(((info.expire - moment().unix()) - 4) * 1000, ev);
         initFlowbite();
         //this.refreshApi.startInterval(3000, ev.value);
       }
     })
     let aux = this.localStorage.getObject('login_items') as LoginInfo;
-    if(JSON.stringify(aux) === '{}'){
+    if (JSON.stringify(aux) === '{}') {
       //this.siopInfo.getSiopInfo().subscribe((data)=>{
       //  environment.SIOP_INFO = data
       //})
     }
-    else if (((aux.expire - moment().unix())-4) > 0) {
+    else if (((aux.expire - moment().unix()) - 4) > 0) {
       this.refreshApi.stopInterval();
-      this.refreshApi.startInterval(((aux.expire - moment().unix())-4)*1000, aux);
+      this.refreshApi.startInterval(((aux.expire - moment().unix()) - 4) * 1000, aux);
       initFlowbite();
     }
     this.router.events
@@ -112,5 +99,5 @@ export class AppComponent implements OnInit {
     }
   }*/
 
- 
+
 }

src/app/app.module.ts

@@ -6,7 +6,6 @@ import { BrowserModule } from '@angular/platform-browser';
 import { PickerComponent } from '@ctrl/ngx-emoji-mart';
 import { FaIconComponent, FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { TranslateHttpLoader } from "@ngx-translate/http-loader";
 import { NgxFileDropModule } from 'ngx-file-drop';
 import { NotificationComponent } from './shared/notification/notification.component';
 import { MarkdownModule } from 'ngx-markdown';
@@ -71,6 +70,11 @@ import { UserProfileComponent } from "./pages/user-profile/user-profile.componen
 import { AppInitService } from './services/app-init.service';
 import { ThemeAwareTranslateLoader } from './services/theme-aware-translate.loader';
 import { ThemeService } from './services/theme.service';
+
+export function createThemeAwareLoader(http: HttpClient, themeService: ThemeService) {
+  return new ThemeAwareTranslateLoader(http, themeService);
+}
+
 import { BadgeComponent } from "./shared/badge/badge.component";
 import { BillingAccountFormComponent } from "./shared/billing-account-form/billing-account-form.component";
 import { CardComponent } from "./shared/card/card.component";
@@ -86,10 +90,6 @@ import { PricePlanDrawerComponent } from "./shared/price-plan-drawer/price-plan-
 import { RevenueReportComponent } from './shared/revenue-report/revenue-report.component';
 import { SharedModule } from "./shared/shared.module";
 
-// Función Factory requerida para crear el cargador con sus dependencias
-export function createThemeAwareLoader(http: HttpClient, themeService: ThemeService) {
-  return new ThemeAwareTranslateLoader(http, themeService);
-}
 
 import { QuotesModule } from "src/app/features/quotes/quotes.module";
 import { AboutDomeComponent } from "src/app/pages/about-dome/about-dome.component";
@@ -179,10 +179,9 @@ import { RequestValidationModalComponent } from './pages/seller-offerings/offeri
     QuotesModule,
     MarkdownModule.forRoot(),
     TranslateModule.forRoot({
-      defaultLanguage: 'en',
       loader: {
         provide: TranslateLoader,
-        useFactory: (createThemeAwareLoader),
+        useFactory: createThemeAwareLoader,
         deps: [HttpClient, ThemeService]
       }
     }),
@@ -222,6 +221,3 @@ import { RequestValidationModalComponent } from './pages/seller-offerings/offeri
 })
 export class AppModule { }
 
-export function HttpLoaderFactory(http: HttpClient) {
-  return new TranslateHttpLoader(http, './assets/i18n/');
-}