Merge pull request #30 from nixgram/13-global-translate-configuration

13 global translate configuration

cypress/e2e/spec.cy.ts → cypress/e2e/title.cy.ts

@@ -1,6 +1,6 @@
 describe('App Component Init - Check Nixng title', () => {
   it('Should contain heading', () => {
     cy.visit('http://localhost:4200/')
-    cy.contains("This is nixng")
+    cy.contains("এটা হলো nixng")
   })
 })

cypress/e2e/translate.cy.ts

@@ -0,0 +1,19 @@
+describe('App Component - Translation Check', () => {
+
+    beforeEach(() => {
+        cy.visit('http://localhost:4200/')
+    })
+
+    it('Should contain english title', () => {
+        cy.get('[data-cy="language"]').select('en')
+        cy.contains("This is nixng")
+    })
+    it('Should contain spanish title', () => {
+        cy.get('[data-cy="language"]').select('es')
+        cy.contains("Esto es nixng")
+    })
+    it('Should contain Bangla title', () => {
+        cy.get('[data-cy="language"]').select('bn')
+        cy.contains("এটা হলো nixng")
+    })
+})

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 {}

src/app/transloco-root.module.ts

@@ -0,0 +1,38 @@
+import { HttpClient } from '@angular/common/http';
+import {
+  TRANSLOCO_LOADER,
+  Translation,
+  TranslocoLoader,
+  TRANSLOCO_CONFIG,
+  translocoConfig,
+  TranslocoModule
+} from '@ngneat/transloco';
+import { Injectable, NgModule } from '@angular/core';
+import { environment } from '../environments/environment';
+
+@Injectable({ providedIn: 'root' })
+export class TranslocoHttpLoader implements TranslocoLoader {
+  constructor(private http: HttpClient) {}
+
+  getTranslation(lang: string) {
+    return this.http.get<Translation>(`/assets/i18n/${lang}.json`);
+  }
+}
+
+@NgModule({
+  exports: [TranslocoModule],
+  providers: [
+    {
+      provide: TRANSLOCO_CONFIG,
+      useValue: translocoConfig({
+        availableLangs: ['en', 'es', 'bn'],
+        defaultLang: 'bn',
+        // Remove this option if your application doesn't support changing language in runtime.
+        reRenderOnLangChange: true,
+        prodMode: environment.production
+      })
+    },
+    { provide: TRANSLOCO_LOADER, useClass: TranslocoHttpLoader }
+  ]
+})
+export class TranslocoRootModule {}

src/assets/i18n/bn.json

@@ -0,0 +1,3 @@
+{
+    "title":"এটা হলো"
+}

src/assets/i18n/en.json

@@ -0,0 +1,3 @@
+{
+    "title":"This is"
+}

src/assets/i18n/es.json

@@ -0,0 +1,3 @@
+{
+    "title":"Esto es"
+}

transloco.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  rootTranslationsPath: 'src/assets/i18n/',
+  langs: ['en', 'es', 'bn'],
+  keysManager: {}
+};