ajout de transloco i18n et flag icons

Author: Alain BOUDARD

apps/todosws/src/app/app.component.html

@@ -1,25 +1,23 @@
 <todosws-navbar></todosws-navbar>
-<div class="container">
-  <h1>Welcome to todosws!</h1>
-  <div class="row">
-    <div class="col-md-3">
-      <todosws-counter></todosws-counter>
-      <todosws-counter-active></todosws-counter-active>
-      <img
-        src="../assets/img/ngrx-data-nestjs.png"
-        class="img-fluid"
-        alt="NgRx Data & NestJS"
-      />
-    </div>
-    <div class="col-md-9">
-      <p>
-        This is an Angular app built with <a href="https://nx.dev">Nx</a>,
-        <a href="https://docs.nestjs.com/">Nest Server</a> and
-        <a href="https://ngrx.io/guide/data">NgRx Data</a> in monorepo.
-      </p>
-      <todosws-todo-list></todosws-todo-list>
+<ng-container *transloco="let t">
+  <div class="container">
+    <h1>{{ t.title }}</h1>
+    <div class="row">
+      <div class="col-md-3">
+        <todosws-counter></todosws-counter>
+        <todosws-counter-active></todosws-counter-active>
+        <img
+          src="../assets/img/ngrx-data-nestjs.png"
+          class="img-fluid"
+          alt="NgRx Data & NestJS"
+        />
+      </div>
+      <div class="col-md-9">
+        <p [innerHTML]="t.baseline"></p>
+        <todosws-todo-list></todosws-todo-list>
 
-      <div>Message: {{ hello$ | async | json }}</div>
+        <div>Message: {{ hello$ | async | json }}</div>
+      </div>
     </div>
   </div>
-</div>
+</ng-container>

apps/todosws/src/app/app.module.ts

@@ -14,6 +14,8 @@ import { TodoListComponent } from './comp/todo-list/todo-list.component';
 import { FontAwesomeModule } from '@fortawesome/angular-fontawesome';
 import { UtilsService } from './services/utils.service';
 import { CounterActiveComponent } from './comp/counter-active/counter-active.component';
+import { translocoLoader } from './transloco.loader';
+import { TranslocoModule, TRANSLOCO_CONFIG, TranslocoConfig } from '@ngneat/transloco';
 
 // font awesome icons
 UtilsService.initFaIcons();
@@ -33,9 +35,19 @@ UtilsService.initFaIcons();
     StoreModule.forRoot([]),
     EffectsModule.forRoot([]),
     !environment.production ? StoreDevtoolsModule.instrument() : [],
-    EntityDataModule.forRoot(entityConfig)
+    EntityDataModule.forRoot(entityConfig),
+    TranslocoModule
+  ],
+  providers: [{
+      provide: TRANSLOCO_CONFIG,
+      useValue: {
+        listenToLangChange: true,
+        defaultLang: 'en',
+        prodMode: environment.production
+      } as TranslocoConfig
+    },
+    translocoLoader
   ],
-  providers: [],
   bootstrap: [AppComponent]
 })
 export class AppModule {}

apps/todosws/src/app/comp/navbar/navbar.component.html

@@ -10,11 +10,24 @@
   <div class="collapse navbar-collapse" [ngClass]="{ show: navbarOpen }">
     <ul class="navbar-nav mr-auto">
       <li class="nav-item">
-        <a class="nav-link" href="#">Item 1</a>
-      </li>
-
-      <li class="nav-item">
-        <a class="nav-link" href="#">Item 2</a>
+        <div class="btn-group btn-group-sm" role="group">
+          <button
+            [disabled]="transService.getActiveLang() == 'fr'"
+            type="button"
+            (click)="setLang('fr')"
+            class="btn btn-sm btn-outline-light"
+          >
+            <span class="flag-icon flag-icon-fr"></span>
+          </button>
+          <button
+            [disabled]="transService.getActiveLang() == 'en'"
+            type="button"
+            (click)="setLang('en')"
+            class="btn btn-sm btn-outline-light"
+          >
+            <span class="flag-icon flag-icon-gb"></span>
+          </button>
+        </div>
       </li>
     </ul>
   </div>

apps/todosws/src/app/comp/navbar/navbar.component.ts

@@ -1,21 +1,23 @@
 import { Component, OnInit } from '@angular/core';
+import { TranslocoService } from '@ngneat/transloco';
 
 @Component({
   selector: 'todosws-navbar',
   templateUrl: './navbar.component.html',
   styleUrls: ['./navbar.component.css']
 })
 export class NavbarComponent implements OnInit {
-
   navbarOpen = false;
 
-  constructor() { }
-  
+  constructor(public transService: TranslocoService) {}
+
   toggleNavbar() {
     this.navbarOpen = !this.navbarOpen;
   }
 
-  ngOnInit() {
-  }
+  ngOnInit() {}
 
+  setLang(lang: string): void {
+    this.transService.setActiveLang(lang);
+  }
 }

apps/todosws/src/app/transloco.loader.ts

@@ -0,0 +1,15 @@
+import { HttpClient } from '@angular/common/http';
+import { Translation, TRANSLOCO_LOADER, TranslocoLoader } from '@ngneat/transloco';
+import { Injectable } from '@angular/core';
+
+@Injectable({ providedIn: 'root' })
+export class HttpLoader implements TranslocoLoader {
+  constructor(private http: HttpClient) {}
+
+  getTranslation(langPath: string) {
+    return this.http.get<Translation>(`/assets/i18n/${langPath}.json`);
+  }
+}
+
+export const translocoLoader = { provide: TRANSLOCO_LOADER, useClass: HttpLoader };
+

apps/todosws/src/assets/i18n/en.json

@@ -0,0 +1,4 @@
+{
+  "title": "Angular and Nest JS with NgRx Data",
+  "baseline": "This is an Angular app built with <a href=\"https://nx.dev\">Nx</a>, <a href=\"https://docs.nestjs.com/\">Nest Server</a> and <a href=\"https://ngrx.io/guide/data\">NgRx Data</a> in monorepo."
+}

apps/todosws/src/assets/i18n/fr.json

@@ -0,0 +1,4 @@
+{
+  "title": "Angular et Nest JS avec NgRx Data",
+  "baseline": "Ceci est une application Angular générée avec <a href=\"https://nx.dev\">Nx</a>, <a href=\"https://docs.nestjs.com/\">Nest Server</a> et <a href=\"https://ngrx.io/guide/data\">NgRx Data</a> dans un monorepo."
+}

apps/todosws/src/assets/vendor.scss

@@ -1,2 +1,3 @@
 @import 'variables';
 @import '~bootstrap/scss/bootstrap';
+@import '~flag-icon-css/css/flag-icon.min.css';