getting there...

src/app/app.component.html

@@ -4,7 +4,7 @@
   <app-topmenu></app-topmenu>
 
   <!--this is where the router's stuff will be-->
-  <div #routerContent>
+  <div id="routerContent">
     <router-outlet></router-outlet>
   </div>
 

src/app/app.component.scss

@@ -19,5 +19,7 @@ app-topmenu {
 
 #routerContent {
   grid-area: content;
+  overflow: auto !important;
 }
 
+

src/app/app.module.ts

@@ -3,15 +3,17 @@ import {NgModule} from '@angular/core';
 
 import {AppComponent} from './app.component';
 import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
-import {MatButtonModule, MatCheckboxModule} from '@angular/material';
+import {MatButtonModule, MatCardModule, MatCheckboxModule, MatTableModule} from '@angular/material';
 import {RouterModule, Routes} from '@angular/router';
 import {TopmenuComponent} from './topmenu/topmenu.component';
 import {ReclamespinnerComponent} from './reclamespinner/reclamespinner.component';
-import { PouleComponent } from './poule/poule.component';
-import { TierComponent } from './tier/tier.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';
 
 const appRoutes: Routes = [
-  { path: 'year/:year/tier/:tier', component: TierComponent },
+  {path: 'championship/:idchampionship/tier/:tier', component: TierComponent},
   // { path: 'hero/:id',      component: HeroDetailComponent },
   // {
   //   path: 'heroes',
@@ -36,8 +38,10 @@ const appRoutes: Routes = [
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
+    HttpClientModule,
     MatButtonModule,
     MatCheckboxModule,
+    MatCardModule,
     RouterModule.forRoot(
       appRoutes
       // { enableTracing: true } // <-- debugging purposes only

src/app/content/poule/poule.component.html

@@ -0,0 +1,25 @@
+<mat-card>
+  <mat-card-header>
+    <mat-card-title>
+      Poule 1
+    </mat-card-title>
+  </mat-card-header>
+  <mat-card-content>
+    <table>
+      <tr>
+        <td>Team</td>
+        <td>Ronde 1</td>
+        <td>Ronde 2</td>
+        <td>Ronde 3</td>
+        <td>Gem. beste 2</td>
+      </tr>
+      <tr>
+        <td>Jos en Frank</td>
+        <td>2 mins</td>
+        <td>2 mins</td>
+        <td>2 mins</td>
+        <td>2 mins</td>
+      </tr>
+    </table>
+  </mat-card-content>
+</mat-card>

src/app/content/tier/tier.component.html

@@ -0,0 +1,4 @@
+<app-poule></app-poule>
+<app-poule></app-poule>
+<app-poule></app-poule>
+<app-poule></app-poule>

src/app/poule/poule.component.html

@@ -1,3 +0,0 @@
-<p>
-  poule works!
-</p>

src/app/tier/tier.component.html

@@ -1,3 +0,0 @@
-<p>
-  tier works!
-</p>

src/app/topmenu/topmenu.component.html

@@ -1,6 +1,6 @@
 <div class="button-row">
   <!--pick a year-->
-  <button mat-raised-button>Jaar 2018</button>
+  <button mat-raised-button>{{currentChampionship()}}</button>
   <button mat-raised-button color="primary">Tier 1</button>
   <button mat-raised-button color="accent">Tier 2</button>
   <button mat-raised-button color="warn">Tier 3</button>

src/app/topmenu/topmenu.component.ts

@@ -1,4 +1,6 @@
 import {Component, OnInit} from '@angular/core';
+import {ChampionshipService} from '../championship.service';
+import {ActivatedRoute} from '@angular/router';
 
 @Component({
   selector: 'app-topmenu',
@@ -7,9 +9,27 @@ import { Component, OnInit } from '@angular/core';
 })
 export class TopmenuComponent implements OnInit {
 
-  constructor() { }
+  private idChampionship: number;
+
+  constructor(private championshipService: ChampionshipService,
+              private route: ActivatedRoute) {
+  }
 
   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;
+    } else {
+      return '?';
+    }
   }
 
 }