partially working translation

package.json

@@ -18,6 +18,9 @@
     "@angular/platform-browser": "^17.3.0",
     "@angular/platform-browser-dynamic": "^17.3.0",
     "@angular/router": "^17.3.0",
+    "@jsverse/transloco": "^7.4.2",
+    "@ngx-translate/core": "^15.0.0",
+    "@ngx-translate/http-loader": "^8.0.0",
     "rxjs": "~7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"

src/app/app.component.css

@@ -11,6 +11,13 @@ nav {
 
     li {
       list-style: none;
+
+      a {
+        color: inherit;
+        text-decoration: none;
+        font-weight: bold;
+        font-size: 1.3rem;
+      }
     }
   }
 }

src/app/app.component.html

@@ -1,7 +1,13 @@
 <nav>
   <ul>
-    <li><a routerLink="/" routerLinkActive="active" ariaCurrentWhenActive="page">Home</a></li>
-    <li><a routerLink="/recipe/add" routerLinkActive="active" ariaCurrentWhenActive="page">Add Recipe</a></li>
+    <li><a routerLink="/" routerLinkActive="active" ariaCurrentWhenActive="page">{{ 'title' | transloco }}</a></li>
+    <li><a routerLink="/recipe/add" routerLinkActive="active" ariaCurrentWhenActive="page">{{ 'recipe.add.link' |
+        transloco }}</a></li>
+    <select (change)="changeLanguage($event)">
+      <option value="en">🇬🇧 English</option>
+      <option value="fr">🇫🇷 French</option>
+      <option value="ru">🇷🇺 Russian</option>
+    </select>
   </ul>
 </nav>
 

src/app/app.component.ts

@@ -4,6 +4,7 @@ import { RecipeFormComponent } from './components/recipe-form/recipe-form.compon
 import { RecipeService } from './services/recipe.service';
 import { Recipe } from './model/recipe.model';
 import { RecipeListComponent } from './components/recipe-list/recipe-list.component';
+import { TranslocoPipe, TranslocoService } from '@jsverse/transloco';
 
 @Component({
   selector: 'app-root',
@@ -13,17 +14,27 @@ import { RecipeListComponent } from './components/recipe-list/recipe-list.compon
     RouterLink,
     RecipeFormComponent,
     RecipeListComponent,
+    TranslocoPipe,
   ],
-  providers: [RecipeService],
+  providers: [RecipeService, TranslocoService],
   templateUrl: './app.component.html',
   styleUrl: './app.component.css'
 })
 export class AppComponent {
   title = 'bromista-nisqa-receta';
 
-  constructor(protected recipeService: RecipeService){}
+  constructor(protected recipeService: RecipeService, private translocoService: TranslocoService){}
 
   addRecipe($event: Recipe): void {
     this.recipeService.addRecipe($event);
   }
+
+  changeLanguage(event: Event) {
+    if (event.target && event.target instanceof HTMLSelectElement) {
+      const lang = event.target.value;
+      this.translocoService.setActiveLang(lang);
+    } else {
+      console.log('Error on language option value')
+    }
+  }
 }

src/app/app.config.ts

@@ -1,11 +1,23 @@
-import { ApplicationConfig } from '@angular/core';
+import { ApplicationConfig, isDevMode } from '@angular/core';
 import { provideRouter, withComponentInputBinding } from '@angular/router';
 
 import { routes } from './app.routes';
+import { provideHttpClient } from '@angular/common/http';
+import { TranslocoHttpLoader } from './transloco-loader';
+import { provideTransloco } from '@jsverse/transloco';
 
 export const appConfig: ApplicationConfig = {
   providers: [
-    provideRouter(routes, withComponentInputBinding()),
+    provideRouter(routes, withComponentInputBinding()), provideHttpClient(), provideTransloco({
+        config: { 
+          availableLangs: ['en', 'fr', 'ru'],
+          defaultLang: 'en',
+          // Remove this option if your application doesn't support changing language in runtime.
+          reRenderOnLangChange: true,
+          prodMode: !isDevMode(),
+        },
+        loader: TranslocoHttpLoader
+      }),
   ]
 };
 

src/app/components/recipe-detail/recipe-detail.component.html

@@ -3,5 +3,5 @@
   <h1>{{ recipe.name }}</h1>
   <p>{{ recipe.description }}</p>
 
-  <h2>Ingredients</h2>
+  <h2>{{ 'recipe.ingredients' | transloco }}</h2>
 </div>

src/app/components/recipe-detail/recipe-detail.component.ts

@@ -2,11 +2,12 @@ import { Component} from '@angular/core';
 import { Recipe } from '../../model/recipe.model';
 import { RecipeService } from '../../services/recipe.service';
 import { Router, ActivatedRoute } from '@angular/router';
+import { TranslocoPipe } from '@jsverse/transloco';
 
 @Component({
   selector: 'app-recipe-detail',
   standalone: true,
-  imports: [],
+  imports: [TranslocoPipe],
   templateUrl: './recipe-detail.component.html',
   styleUrl: './recipe-detail.component.css'
 })

src/app/components/recipe-form/recipe-form.component.html

@@ -1,4 +1,4 @@
-<h1>New Recipe</h1>
+<h1>{{ 'recipe.add.link' | transloco }}</h1>
 <form [formGroup]="recipeForm" (ngSubmit)="onSubmit()">
   <label for="name">Name:</label>
   <input id="name" formControlName="name">
@@ -14,7 +14,7 @@
 
   <div formArrayName="ingredients">
     <h3>Ingredients</h3>
-    <button type="button" (click)="addIngredient()">Add Ingredient</button>
+    <button type="button" (click)="addIngredient()">{{ 'recipe.add.button-ingredients' | transloco }}</button>
     <div *ngFor="let ingredient of ingredients.controls; let i = index" [formGroupName]="i">
       <label for="ingredientName">Ingredient:</label>
       <select id="ingredientName" formControlName="name">
@@ -28,5 +28,5 @@
     </div>
   </div>
 
-  <button type="submit">Add Recipe</button>
+  <button type="submit">{{ 'recipe.add.button-recipe' | transloco }}</button>
 </form>

src/app/components/recipe-form/recipe-form.component.ts

@@ -5,13 +5,15 @@ import { Ingredient } from '../../model/ingredient.model';
 import { CommonModule } from '@angular/common';
 import { ReactiveFormsModule } from '@angular/forms';
 import { RecipeService } from '../../services/recipe.service';
+import { TranslocoPipe } from '@jsverse/transloco';
 
 @Component({
   selector: 'app-recipe-form',
   standalone: true,
   imports: [
     CommonModule,
-    ReactiveFormsModule
+    ReactiveFormsModule,
+    TranslocoPipe
   ],
   templateUrl: './recipe-form.component.html',
   styleUrls: ['./recipe-form.component.css']

src/app/components/recipe-list/recipe-list.component.html

@@ -1,4 +1,4 @@
-<h1>Recipe List</h1>
+<h1>{{ 'recipe.list' | transloco }}</h1>
 
 <div id="recipe-list">
   <app-recipe-mini *ngFor="let recipe of recipes" [recipe]="recipe"></app-recipe-mini>

src/app/components/recipe-list/recipe-list.component.ts

@@ -3,11 +3,12 @@ import { Recipe } from '../../model/recipe.model';
 import { RecipeService } from '../../services/recipe.service';
 import { NgFor } from '@angular/common';
 import { RecipeMiniComponent } from '../recipe-mini/recipe-mini.component';
+import { TranslocoPipe } from '@jsverse/transloco';
 
 @Component({
   selector: 'app-recipe-list',
   standalone: true,
-  imports: [NgFor, RecipeMiniComponent],
+  imports: [NgFor, RecipeMiniComponent, TranslocoPipe],
   templateUrl: './recipe-list.component.html',
   styleUrl: './recipe-list.component.css'
 })

src/app/components/recipe-mini/recipe-mini.component.html

@@ -6,6 +6,6 @@
   <div class="recipe-details">
     <h2>{{ recipe.name }}</h2>
     <p>{{ recipe.description | truncate:50:false }}</p>
-    <a href="/recipe/{{ recipe.id }}">Voir la recette</a>
+    <a href="/recipe/{{ recipe.id }}">{{ 'recipe.see' | transloco }}</a>
   </div>
 </div>

src/app/components/recipe-mini/recipe-mini.component.ts

@@ -2,11 +2,12 @@ import { Component } from '@angular/core';
 import { Recipe } from '../../model/recipe.model';
 import { Input } from '@angular/core';
 import { TruncatePipe } from '../../pipes/truncate.pipe';
+import { TranslocoPipe } from '@jsverse/transloco';
 
 @Component({
   selector: 'app-recipe-mini',
   standalone: true,
-  imports: [TruncatePipe],
+  imports: [TruncatePipe, TranslocoPipe],
   templateUrl: './recipe-mini.component.html',
   styleUrl: './recipe-mini.component.css'
 })

src/app/transloco-loader.ts

@@ -0,0 +1,12 @@
+import { inject, Injectable } from "@angular/core";
+import { Translation, TranslocoLoader } from "@jsverse/transloco";
+import { HttpClient } from "@angular/common/http";
+
+@Injectable({ providedIn: 'root' })
+export class TranslocoHttpLoader implements TranslocoLoader {
+    private http = inject(HttpClient);
+
+    getTranslation(lang: string) {
+        return this.http.get<Translation>(`../assets/i18n/${lang}.json`);
+    }
+}

src/assets/i18n/en.json

@@ -0,0 +1,13 @@
+{
+   "title": "Home",
+   "recipe": {
+      "add": {
+         "link": "Add Recipe",
+         "button-ingredients": "Add Ingredients",
+         "button-recipe": "Add Recipe"
+      },
+      "see": "View Recipe",
+      "list": "Recipe List",
+      "ingredients": "Ingredients"
+   }
+}

src/assets/i18n/fr.json

@@ -0,0 +1,13 @@
+{
+   "title": "Accueil",
+   "recipe": {
+      "add": {
+         "link": "Ajouter une recette",
+         "button-ingredients": "Ajouter des ingrédients",
+         "button-recipe": "Ajouter la recette"
+      },
+      "see": "Voir la recette",
+      "list": "Liste de recettes",
+      "ingredients": "Ingrédients"
+   }
+}

src/assets/i18n/ru.json

@@ -0,0 +1,13 @@
+{
+   "title": "Домой",
+   "recipe": {
+      "add": {
+         "link": "Добавить рецепт",
+         "button-ingredients": "Добавить ингредиенты",
+         "button-recipe": "Добавить рецепт"
+      },
+      "see": "Посмотреть рецепт",
+      "list": "Список рецептов",
+      "ingredients": "Ингредиенты"
+   }
+}

transloco.config.js

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