got championships load and current champ working

src/app/app-routing.module.ts

@@ -0,0 +1,21 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {RouterModule, Routes} from '@angular/router';
+import {TierComponent} from './content/tier/tier.component';
+
+const routes: Routes = [
+  {path: 'championship/:idchampionship/tier/:idtier', component: TierComponent},
+];
+
+@NgModule({
+  imports: [
+    CommonModule,
+    RouterModule.forRoot(routes)
+  ],
+  declarations: [],
+  exports: [
+    RouterModule
+  ]
+})
+export class AppRoutingModule {
+}

src/app/app.component.ts

@@ -1,10 +1,26 @@
-import { Component } from '@angular/core';
+import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.scss']
 })
-export class AppComponent {
+export class AppComponent implements OnInit {
   title = 'koersepublicfrontend';
+
+  private idChampionship: number;
+
+  constructor(private route: ActivatedRoute) {
+  }
+
+  ngOnInit(): void {
+    // listen to the path ... what's the championship we're at?
+    this.route.paramMap.subscribe(val => {
+      this.idChampionship = +val.get('idchampionship');
+      console.log('APP CHAMP');
+      console.log(val);
+      console.log(this.idChampionship);
+    });
+  }
 }

src/app/app.module.ts

@@ -3,17 +3,23 @@ import {NgModule} from '@angular/core';
 
 import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatButtonModule, MatCardModule, MatCheckboxModule, MatTableModule} from '@angular/material';
+import {MatButtonModule, MatCardModule, MatCheckboxModule} from '@angular/material';
 import {RouterModule, Routes} from '@angular/router';
 import {TopmenuComponent} from './topmenu/topmenu.component';
 import {ReclamespinnerComponent} from './reclamespinner/reclamespinner.component';
 import {PouleComponent} from './content/poule/poule.component';
 import {TierComponent} from './content/tier/tier.component';
-import {HttpClient, HttpClientModule} from '@angular/common/http';
-import {Http} from '@angular/http';
+import {HttpClientModule} from '@angular/common/http';
+import {AppRoutingModule} from './app-routing.module';
 
 const appRoutes: Routes = [
-  {path: 'championship/:idchampionship/tier/:tier', component: TierComponent},
+  {path : '', pathMatch: 'full', component: AppComponent},
+  {
+    path: 'championship/:idchampionship',
+    children: [
+      {path: 'tier/:idtier', component: TierComponent}
+    ]
+  },
   // { path: 'hero/:id',      component: HeroDetailComponent },
   // {
   //   path: 'heroes',
@@ -37,15 +43,12 @@ const appRoutes: Routes = [
   ],
   imports: [
     BrowserModule,
+    AppRoutingModule,
     BrowserAnimationsModule,
     HttpClientModule,
     MatButtonModule,
     MatCheckboxModule,
     MatCardModule,
-    RouterModule.forRoot(
-      appRoutes
-      // { enableTracing: true } // <-- debugging purposes only
-    )
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/content/tier/tier.component.ts

@@ -1,4 +1,6 @@
 import {Component, OnInit} from '@angular/core';
+import {ActivatedRoute} from '@angular/router';
+import {ChampionshipService} from '../../championship.service';
 
 @Component({
   selector: 'app-tier',
@@ -7,7 +9,15 @@ import { Component, OnInit } from '@angular/core';
 })
 export class TierComponent implements OnInit {
 
-  constructor() { }
+  constructor(private route: ActivatedRoute, private championshipService: ChampionshipService) {
+
+    // mark the championservice to set the right championship
+    route.paramMap.subscribe(val => {
+      console.log(val);
+      this.championshipService.setChampionship(+val.get('idchampionship'));
+    });
+  }
+
 
   ngOnInit() {
   }

src/app/topmenu/topmenu.component.ts

@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {ChampionshipService} from '../championship.service';
-import {ActivatedRoute} from '@angular/router';
+import {ActivatedRoute, Router} from '@angular/router';
 
 @Component({
   selector: 'app-topmenu',
@@ -12,21 +12,17 @@ export class TopmenuComponent implements OnInit {
   private idChampionship: number;
 
   constructor(private championshipService: ChampionshipService,
-              private route: ActivatedRoute) {
+              private route: ActivatedRoute,
+              private router: Router) {
   }
 
   ngOnInit() {
-    // listen to the path ... what's the championship we're at?
-    this.route.paramMap.subscribe(val => {
-      this.idChampionship = +val.get('idchampionship');
-    });
-
   }
 
   currentChampionship(): string {
-    const anies = this.championshipService.getChampionships().filter(val => val.idchampionship === this.idChampionship);
-    if (anies && anies[0]) {
-      return anies[0].name;
+    const currentChampionship = this.championshipService.getCurrentChampionship();
+    if (currentChampionship) {
+      return currentChampionship.name;
     } else {
       return '?';
     }