language selection functionality added

package-lock.json

@@ -1705,6 +1705,22 @@
       "integrity": "sha512-8ptz2WqEeqFLOMbiYJ6x6XARjzWIrCHzRzpGwvKS28L5iMWeYuvX2EB48uKkMFy/8RJ0SkwyAJkFClPNJvDfrQ==",
       "dev": true
     },
+    "@ngx-translate/core": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/core/-/core-14.0.0.tgz",
+      "integrity": "sha512-UevdwNCXMRCdJv//0kC8h2eSfmi02r29xeE8E9gJ1Al4D4jEJ7eiLPdjslTMc21oJNGguqqWeEVjf64SFtvw2w==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
+    "@ngx-translate/http-loader": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/@ngx-translate/http-loader/-/http-loader-7.0.0.tgz",
+      "integrity": "sha512-j+NpXXlcGVdyUNyY/qsJrqqeAdJdizCd+GKh3usXExSqy1aE9866jlAIL+xrfDU4w+LiMoma5pgE4emvFebZmA==",
+      "requires": {
+        "tslib": "^2.3.0"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -7234,6 +7250,11 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "ngx-translate-cache": {
+      "version": "9.0.2",
+      "resolved": "https://registry.npmjs.org/ngx-translate-cache/-/ngx-translate-cache-9.0.2.tgz",
+      "integrity": "sha512-DHIIJMw1KaDSwwAvBVMVWS6LQHKwNGJpXyFEh/j5Yohh5sLNvD/dUD3X7UF1qmlGnGoeuBjlDh9NEmKYbkywcQ=="
+    },
     "nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",

package.json

@@ -20,6 +20,9 @@
     "@angular/platform-browser": "~12.2.0",
     "@angular/platform-browser-dynamic": "~12.2.0",
     "@angular/router": "~12.2.0",
+    "@ngx-translate/core": "^14.0.0",
+    "@ngx-translate/http-loader": "^7.0.0",
+    "ngx-translate-cache": "^9.0.2",
     "rxjs": "~6.6.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.11.4"

src/app/app.component.html

@@ -314,8 +314,8 @@
 </div>
 
 <div class="content" role="main">
-
   <h3><a [routerLink]="['routing-test']">test</a></h3>
   <h3><a [routerLink]="['news']">News</a></h3>
 
+<app-select-language></app-select-language>
 <router-outlet></router-outlet>

src/app/app.module.ts

@@ -6,12 +6,16 @@ import { AppComponent } from './app.component';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 
 import { MatToolbarModule } from '@angular/material/toolbar';
+import {MatGridListModule} from '@angular/material/grid-list'
+
 import { RoutingTestComponent } from './routing-test/routing-test.component';
 import { RouterModule } from '@angular/router';
 import { StartComponent } from './start/start.component';
 import { NavigationComponent } from './navigation/navigation.component';
 import { EventsComponent } from './events/events.component';
 import { NewsComponent } from './news/news.component';
+import { I18nModule } from './i18n/i18n.module';
+import { SelectLanguageComponent } from './select-language/select-language.component';
 
 @NgModule({
   declarations: [
@@ -20,7 +24,8 @@ import { NewsComponent } from './news/news.component';
     StartComponent,
     NavigationComponent,
     EventsComponent,
-    NewsComponent
+    NewsComponent,
+    SelectLanguageComponent
   ],
   imports: [
     BrowserModule,
@@ -30,7 +35,8 @@ import { NewsComponent } from './news/news.component';
     RouterModule.forRoot([
       { path: 'routing-test', component: RoutingTestComponent },
       { path: 'news', component: NewsComponent },
-    ])
+    ]),
+    I18nModule
     
   ],
   providers: [],

src/app/i18n/de.json

+{
+    "routingTest": "Hallo, ich spreche Deutsch."
+}
\ No newline at end of file

src/app/i18n/en.json

+{
+    "routingTest": "Hello, I'm speaking German."
+}
\ No newline at end of file

src/app/i18n/i18n.module.ts

+import { NgModule } from '@angular/core';
+import { HttpClient, HttpClientModule } from '@angular/common/http';
+import { TranslateLoader, TranslateModule, TranslateService } from '@ngx-translate/core';
+import { TranslateCacheModule, TranslateCacheSettings, TranslateCacheService } from 'ngx-translate-cache';
+import { TranslateHttpLoader } from '@ngx-translate/http-loader';
+
+@NgModule({
+  imports: [
+    HttpClientModule,
+    TranslateModule.forRoot({
+      loader: {
+        provide: TranslateLoader,
+        useFactory: translateLoaderFactory,
+        deps: [HttpClient]
+      }
+    }),
+    TranslateCacheModule.forRoot({
+      cacheService: {
+        provide: TranslateCacheService,
+        useFactory: translateCacheFactory,
+        deps: [TranslateService, TranslateCacheSettings]
+      },
+      cacheMechanism: 'Cookie'
+      })
+    ],
+    exports: [TranslateModule]   
+})
+export class I18nModule {
+  constructor(translate: TranslateService) {
+    translate.addLangs(['en', 'de']);
+    const browserLang = translate.getBrowserLang();
+    translate.use(browserLang.match(/en|de/) ? browserLang : 'en');
+  }
+}
+
+export function translateLoaderFactory(httpClient: HttpClient) {
+  return new TranslateHttpLoader(httpClient);
+}
\ No newline at end of file

src/app/routing-test/routing-test.component.html

-<p>routing-test works!</p>
+
+<h1><p>{{'routingTest' | translate}}</p></h1>

src/app/select-language/select-language.component.html

+<p>select-language works!</p>
+<mat-form-field appearance="fill">
+    <mat-label>{{langView}}</mat-label>
+    <mat-select #langSelect (selectionChange)="changeLanguage($event.value)">
+    <mat-option *ngFor="let lang of languages" [value]="lang.value"
+    [attr.selected]="lang === translate.currentLang ? '' : null"
+    >
+    {{lang.viewValue}}
+    </mat-option>
+    </mat-select>
+    </mat-form-field>
+    
\ No newline at end of file

src/app/select-language/select-language.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SelectLanguageComponent } from './select-language.component';
+
+describe('SelectLanguageComponent', () => {
+  let component: SelectLanguageComponent;
+  let fixture: ComponentFixture<SelectLanguageComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SelectLanguageComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SelectLanguageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/select-language/select-language.component.ts

+import { Component } from '@angular/core';
+import { TranslateService } from '@ngx-translate/core';
+
+@Component({
+  selector: 'app-select-language',
+  template: `
+    <select #langSelect (change)="translate.use(langSelect.value)">
+      <option
+        *ngFor="let lang of translate.getLangs()"
+        [value]="lang"
+        [attr.selected]="lang === translate.currentLang ? '' : null"
+      >{{lang}}</option>
+    </select>
+  `,
+})
+
+interface Languages {
+  value: string;
+  viewValue: string;
+  langView: string;
+  }
+  
+export class SelectLanguageComponent implements OnInit {
+  constructor(public translate: TranslateService) { }
+  ngOnInit(): void {}
+  languages: Languages[] = [
+    { value: 'en', viewValue: 'EN', langView: 'Language' },
+    { value: 'de', viewValue: 'DE', langView: 'Sprache' }
+  ];
+  changeLanguage(l) {
+    this.translate.use(l);
+    console.log("changeLanguage: " + l);
+    switch (l) {
+      case 'de': this.langView = 'Sprache'; break;
+      default: this.langView = 'Language'
+    }
+  }
+}
+  
\ No newline at end of file