plitting up tier in different poules / components

src/app/app-routing.module.ts

@@ -3,13 +3,18 @@ import {CommonModule} from '@angular/common';
 import {RouterModule, Routes} from '@angular/router';
 import {TierComponent} from './content/tier/tier.component';
 import {ChampionshipComponent} from './championship/championship.component';
+import {PouleComponent} from './content/poule/poule.component';
 
 const routes: Routes = [
   {
     path: 'championship/:idchampionship',
     component: ChampionshipComponent,
     children: [
-      {path: 'tier/:tier', component: TierComponent},
+      {
+        path: 'tier/:tier', component: TierComponent, children: [
+          {path: 'poule/:poule', component: PouleComponent}
+        ]
+      },
     ]
   },
 ];

src/app/app.component.scss

@@ -6,7 +6,7 @@
     "topmenu"
     "content"
     "reclame";
-  grid-template-rows: auto 1fr 200px;
+  grid-template-rows: auto 1fr 50px;
 }
 
 app-reclamespinner {

src/app/content/poule/poule.component.scss

@@ -19,3 +19,4 @@
 .timecell {
   font-family: monospace;
 }
+

src/app/content/poule/poule.component.ts

@@ -1,20 +1,18 @@
 import {Component, Input, OnChanges, OnInit, SimpleChanges} from '@angular/core';
 import {ChampionshipService} from '../../championship.service';
+import {ActivatedRoute} from '@angular/router';
+import {map} from 'rxjs/operators';
+import {combineLatest} from 'rxjs';
 
 @Component({
   selector: 'app-poule',
   templateUrl: './poule.component.html',
   styleUrls: ['./poule.component.scss']
 })
-export class PouleComponent implements OnInit, OnChanges {
+export class PouleComponent implements OnInit {
 
-  @Input()
   poule: number;
-
-  @Input()
   idChampionship: number;
-
-  @Input()
   tier: number;
 
   protected teams: any[] = [];
@@ -23,11 +21,25 @@ export class PouleComponent implements OnInit, OnChanges {
   private timesIndexed: {};
   protected maxLaps = 0;
 
-  constructor(private championshipService: ChampionshipService) {
+  constructor(private championshipService: ChampionshipService, private route: ActivatedRoute) {
   }
 
   ngOnInit() {
-    this.loadData();
+    const tier$ = this.route.parent.params.pipe(map(v => v['tier']));
+    const poule$ = this.route.params.pipe(map(v => v['poule']));
+    const championship$ = this.route.parent.parent.params.pipe(map(v => v['idchampionship']));
+
+    combineLatest(tier$, poule$, championship$).subscribe(([tier, poule, championship]) => {
+      console.log('tier/poule/champ changed');
+      console.log(tier);
+      console.log(poule);
+      console.log(championship);
+      this.tier = tier;
+      this.poule = poule;
+      this.idChampionship = championship;
+      this.loadData();
+    });
+
   }
 
   private loadData() {
@@ -145,9 +157,4 @@ export class PouleComponent implements OnInit, OnChanges {
       return null;
     }
   }
-
-  ngOnChanges(changes: SimpleChanges): void {
-    this.loadData();
-  }
-
 }

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

@@ -1,3 +1,9 @@
-<div id="poulecontainer">
-  <app-poule *ngFor="let poule of poules" [poule]="poule" [idChampionship]="idChampionship" [tier]="tier"></app-poule>
+<div class="button-row">
+  <!--pick a year-->
+  <button mat-raised-button *ngFor="let poule of poules" routerLink="./poule/{{poule}}" routerLinkActive="active">
+    Poule {{poule}}
+  </button>
 </div>
+
+<router-outlet></router-outlet>
+

src/app/content/tier/tier.component.scss

@@ -8,3 +8,7 @@ app-poule {
 #poulecontainer {
   display: grid;
 }
+
+button.active {
+ background-color: #1dd21d;
+}