Commit 252a2311 authored by Lisa Nagl's avatar Lisa Nagl
Browse files

language selection functionality added

parent 92689e4e
......@@ -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",
......
......@@ -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>
......@@ -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: [],
......
{
"routingTest": "Hallo, ich spreche Deutsch."
}
\ No newline at end of file
{
"routingTest": "Hello, I'm speaking German."
}
\ No newline at end of file
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
<p>routing-test works!</p>
<h1><p>{{'routingTest' | translate}}</p></h1>
<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
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();
});
});
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
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment