translate configuration implemented using @ngneat/transloco #13

package.json

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "scripts": {
     "ng": "ng",
-    "cypress-record":"npx cypress run --record --key b88452a5-7bd1-4b5e-873e-301699605f72",
+    "cypress-record": "npx cypress run --record --key b88452a5-7bd1-4b5e-873e-301699605f72",
     "start": "set NG_PERSISTENT_BUILD_CACHE=1 && ng serve",
     "build": "ng build",
     "watch": "ng build --watch --configuration development",
@@ -22,6 +22,7 @@
     "@angular/platform-browser": "^14.2.9",
     "@angular/platform-browser-dynamic": "^14.2.9",
     "@angular/router": "^14.2.9",
+    "@ngneat/transloco": "^4.1.1",
     "rxjs": "~7.4.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

src/app/app-routing.module.ts

@@ -3,10 +3,6 @@ import { RouterModule, Routes } from '@angular/router';
 import { AppComponent } from './app.component';
 
 const routes: Routes = [
-  {
-    path: '/',
-    component: AppComponent
-  },
   {
     path: '**',
     component: AppComponent

src/app/app.component.html

@@ -1,9 +1,30 @@
-<div class="h-screen flex justify-center items-center">
-  <h1 class="text-5xl font-bold">
-    This is
+<div class="absolute top-1 right-1 space-x-4">
+  <label for="language" class="text-white font-semibold">Translate in :</label>
+  <select
+    data-cy="language"
+    name="language"
+    id="language"
+    class="p-2 outline-none"
+    [(ngModel)]="selectedLanguage"
+    (change)="onLanguageChange($event)"
+  >
+    <option data-cy="en" value="en">English 🇺🇸</option>
+    <option data-cy="es" value="es">Spanish 🇪🇸</option>
+    <option data-cy="bn" value="bn">বাংলা 🇧🇩</option>
+  </select>
+</div>
+<div
+  class="h-screen flex justify-center items-center bg-slate-800"
+  *transloco="let translate"
+>
+  <h1
+    class="text-5xl font-bold text-white shadow-md shadow-slate-900 rounded-md p-4"
+  >
+    {{ translate('title') }}
     <span
       class="bg-gradient-to-r text-transparent from-violet-600 to-red-600 bg-clip-text"
-      >nixng</span
-    >
+      >nixng
+    </span>
+    🚀
   </h1>
 </div>

src/app/app.component.ts

@@ -1,10 +1,20 @@
 import { Component, OnInit } from '@angular/core';
+import { TranslocoService } from '@ngneat/transloco';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
 export class AppComponent implements OnInit {
+  selectedLanguage: 'en' | 'es' | 'bn' = 'bn';
+
+  constructor(private translocoService: TranslocoService) {}
+
   ngOnInit(): void {}
+
+  onLanguageChange($event: Event) {
+    this.selectedLanguage = $event.target['value'];
+    this.translocoService.setActiveLang($event.target['value']);
+  }
 }

src/app/app.module.ts

@@ -3,16 +3,20 @@ import { BrowserModule } from '@angular/platform-browser';
 
 import { AppRoutingModule } from './app-routing.module';
 import { AppComponent } from './app.component';
+import { HttpClientModule } from '@angular/common/http';
+import { TranslocoRootModule } from './transloco-root.module';
+import { FormsModule } from '@angular/forms';
 
 @NgModule({
-  declarations: [
-    AppComponent
-  ],
+  declarations: [AppComponent],
   imports: [
-       BrowserModule,
-        AppRoutingModule
+    BrowserModule,
+    AppRoutingModule,
+    HttpClientModule,
+    TranslocoRootModule,
+    FormsModule
   ],
   providers: [],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {}