language selector

src/app/app-routing.module.ts

 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 { }
+

src/app/app.component.html

@@ -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> 
+
+
+

src/app/app.component.ts

@@ -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';

src/app/app.module.ts

 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]

src/app/events/events.component.html

-<p>events works!</p>

src/app/events/events.component.spec.ts

-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();
-  });
-});

src/app/events/events.component.ts

-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 {
-  }
-
-}

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';
+ 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
+}
+
+

src/app/news/news.component.html

-<p>news works!</p>

src/app/news/news.component.spec.ts

-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();
-  });
-});

src/app/news/news.component.ts

-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 {
-  }
-
-}

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

-
-<h1><p>{{'routingTest' | translate}}</p></h1>

src/app/routing-test/routing-test.component.spec.ts

-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();
-  });
-});

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

-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 {
-  }
-
-}