Commit 1c37c51b authored by Lisa Nagl's avatar Lisa Nagl
Browse files

language selector

parent 252a2311
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { EventsComponent } from'./events/events.component';
import { NavigationComponent } from'./navigation/navigation.component';
import { StartComponent } from './start/start.component';
import { NavigationComponent } from './navigation/navigation.component';
const routes: Routes=[
{path:'', component: StartComponent },
{path:'events', component:EventsComponent },
{path:'navigation', component:NavigationComponent },
const routes: Routes = [
{ path: '', component: StartComponent },
{ path: 'navigation', component: NavigationComponent }
];
@NgModule({
imports:[RouterModule.forRoot(routes)],
exports:[RouterModule]
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
......@@ -288,34 +288,36 @@
</style>
<!-- Toolbar -->
<div class="toolbar" role="banner">
<img
height="40"
<mat-toolbar color="primary">
<mat-toolbar-row>
<span class="spacer"></span>
<mat-nav-list>
<button mat-fab color="accent" aria-label="Example icon button with a delete icon"><a [routerLink]="['navigation']">Navigation</a></button>
<button mat-fab color="accent" aria-label="Example icon button with a bookmark icon"><mat-icon>Mensa</mat-icon></button>
<button mat-fab color="accent" aria-label="Example icon button with a home icon"><mat-icon>Chat</mat-icon></button>
</mat-nav-list>
<span class="spacer"></span>
</mat-toolbar-row>
<mat-toolbar-row>
<img
height="60"
alt="THD Logo"
src="https://www.th-deg.de/static/images/logos/THD-Logo.png"
/>
<span>IO Plattform</span>
<div class="spacer"></div>
<div class="example-button-row">
<button mat-fab>Basic</button>
<button mat-fab color="primary">Primary</button>
<button mat-fab color="accent">Accent</button>
<button mat-fab color="warn">Warn</button>
<button mat-fab disabled>Disabled</button>
<a mat-fab routerLink=".">Link</a>
</div>
</div>
<!--Banner-->
<div class = "banner" role="banner">
<img
width="100%"
alt="thd campus"
src= "assets/img/thd-campus.jpg">
</div>
</mat-toolbar-row>
<mat-toolbar-row>
<span>International Office Students Plattform</span>
<span class="spacer"></span>
<app-select-language></app-select-language>
</mat-toolbar-row>
</mat-toolbar>
<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>
</div>
......@@ -3,7 +3,7 @@ import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.sass']
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'mit2122';
......
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
// Routing
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { NavigationComponent } from './navigation/navigation.component';
// Material
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 { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import {MatSidenavModule} from '@angular/material/sidenav';
import {MatListModule} from '@angular/material/list';
import {MatGridListModule} from '@angular/material/grid-list';
import { I18nModule } from './i18n/i18n.module';
import { SelectLanguageComponent } from './select-language/select-language.component';
import {MatFormFieldModule} from '@angular/material/form-field';
import {MatSelectModule} from '@angular/material/select';
@NgModule({
declarations: [
AppComponent,
RoutingTestComponent,
StartComponent,
NavigationComponent,
EventsComponent,
NewsComponent,
SelectLanguageComponent
],
imports: [
BrowserModule,
AppRoutingModule,
BrowserAnimationsModule,
MatToolbarModule,
RouterModule.forRoot([
{ path: 'routing-test', component: RoutingTestComponent },
{ path: 'news', component: NewsComponent },
]),
I18nModule
MatButtonModule,
MatIconModule,
MatSidenavModule,
MatListModule,
I18nModule,
MatFormFieldModule,
MatSelectModule
],
providers: [],
bootstrap: [AppComponent]
......
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { EventsComponent } from './events.component';
describe('EventsComponent', () => {
let component: EventsComponent;
let fixture: ComponentFixture<EventsComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ EventsComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(EventsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-events',
templateUrl: './events.component.html',
styleUrls: ['./events.component.sass']
})
export class EventsComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
{
"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';
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
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: [
......@@ -14,25 +21,19 @@ import { TranslateHttpLoader } from '@ngx-translate/http-loader';
deps: [HttpClient]
}
}),
TranslateCacheModule.forRoot({
cacheService: {
provide: TranslateCacheService,
useFactory: translateCacheFactory,
deps: [TranslateService, TranslateCacheSettings]
},
cacheMechanism: 'Cookie'
})
],
exports: [TranslateModule]
],
exports: [TranslateModule]
})
export class I18nModule {
constructor(translate: TranslateService) {
translate.addLangs(['en', 'de']);
const browserLang = translate.getBrowserLang();
translate.use(browserLang.match(/en|de/) ? browserLang : 'en');
const browserLang = translate.getBrowserLang()
|| translate.getBrowserLang();
}
}
export function translateLoaderFactory(httpClient: HttpClient) {
return new TranslateHttpLoader(httpClient);
}
\ No newline at end of file
}
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { NewsComponent } from './news.component';
describe('NewsComponent', () => {
let component: NewsComponent;
let fixture: ComponentFixture<NewsComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ NewsComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(NewsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-news',
templateUrl: './news.component.html',
styleUrls: ['./news.component.sass']
})
export class NewsComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
<h1><p>{{'routingTest' | translate}}</p></h1>
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { RoutingTestComponent } from './routing-test.component';
describe('RoutingTestComponent', () => {
let component: RoutingTestComponent;
let fixture: ComponentFixture<RoutingTestComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ RoutingTestComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(RoutingTestComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-routing-test',
templateUrl: './routing-test.component.html',
styleUrls: ['./routing-test.component.sass']
})
export class RoutingTestComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
Supports Markdown
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