can now display poules, have to fill in that functionality

src/app/app-routing.module.ts

@@ -9,7 +9,7 @@ const routes: Routes = [
     path: 'championship/:idchampionship',
     component: ChampionshipComponent,
     children: [
-      {path: 'tier/:idtier', component: TierComponent},
+      {path: 'tier/:tier', component: TierComponent},
     ]
   },
 ];

src/app/championship.service.ts

@@ -1,7 +1,7 @@
 import {Injectable, OnInit} from '@angular/core';
 import {HttpClient, HttpHeaders} from '@angular/common/http';
 import {ActivatedRoute} from '@angular/router';
-import {BehaviorSubject} from 'rxjs';
+import {BehaviorSubject, Observable} from 'rxjs';
 
 @Injectable({
   providedIn: 'root'
@@ -35,7 +35,7 @@ export class ChampionshipService implements OnInit {
     this.idChampionship.subscribe(id => {
       console.log('idchamp');
       console.log(id);
-      if(id) {
+      if (id) {
         this.loadTiers(id);
       }
     });
@@ -54,7 +54,7 @@ export class ChampionshipService implements OnInit {
     this.http.get<any[]>(`${this.baseUrl}championship/${idChampionship}/tiers`, this.httpOptions).subscribe(val => {
       console.log('loaded tiers for championship');
       console.log(val);
-      this.tiers.next(val.map(v => v.tier));
+      this.tiers.next(val.map(v => v));
     });
   }
 
@@ -67,6 +67,7 @@ export class ChampionshipService implements OnInit {
    * @param idChampionship
    */
   setChampionship(idChampionship: number) {
+    console.log('championship is set to ' + idChampionship);
     this.idChampionship.next(idChampionship);
   }
 
@@ -74,6 +75,13 @@ export class ChampionshipService implements OnInit {
     return this.championships;
   }
 
+  getIdChampionship(): BehaviorSubject<number> {
+    return this.idChampionship;
+  }
+
+  /**
+   * This looks up the current state, synchronous, and returns the championship value.
+   */
   getCurrentChampionship() {
     const theOne = this.championships.filter(val => val.idchampionship === this.idChampionship.value);
     if (theOne && theOne.length > 0) {
@@ -85,4 +93,13 @@ export class ChampionshipService implements OnInit {
 
   ngOnInit(): void {
   }
+
+  /**
+   * Fetch the existing poule numbers for idchampionship / tier combination.
+   * @param tier
+   * @param idchampionship
+   */
+  getPoules(tier: number, idChampionship: any): Observable<number[]> {
+    return this.http.get<any[]>(`${this.baseUrl}championship/${idChampionship}/tier/${tier}/poules`, this.httpOptions);
+  }
 }

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

@@ -1,7 +1,7 @@
 <mat-card>
   <mat-card-header>
     <mat-card-title>
-      Poule 1
+      Poule {{poule}} {{tier}} {{idChampionship}}
     </mat-card-title>
   </mat-card-header>
   <mat-card-content>

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

@@ -1,4 +1,4 @@
-import { Component, OnInit } from '@angular/core';
+import {Component, Input, OnInit} from '@angular/core';
 
 @Component({
   selector: 'app-poule',
@@ -7,7 +7,17 @@ import { Component, OnInit } from '@angular/core';
 })
 export class PouleComponent implements OnInit {
 
-  constructor() { }
+  @Input()
+  poule: number;
+
+  @Input()
+  idChampionship: number;
+
+  @Input()
+  tier: number;
+
+  constructor() {
+  }
 
   ngOnInit() {
   }

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

@@ -1,4 +1 @@
-<app-poule></app-poule>
+<app-poule *ngFor="let poule of poules" [poule]="poule" [idChampionship]="idChampionship" [tier]="tier"></app-poule>
-<app-poule></app-poule>
-<app-poule></app-poule>
-<app-poule></app-poule>

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

@@ -1,6 +1,8 @@
 import {Component, OnInit} from '@angular/core';
-import {ActivatedRoute} from '@angular/router';
+import {ActivatedRoute, ParamMap} from '@angular/router';
 import {ChampionshipService} from '../../championship.service';
+import {combineLatest} from 'rxjs';
+import {map} from 'rxjs/operators';
 
 @Component({
   selector: 'app-tier',
@@ -9,8 +11,27 @@ import {ChampionshipService} from '../../championship.service';
 })
 export class TierComponent implements OnInit {
 
+  protected tier: number;
+  protected poules: number[] = [];
+  protected idChampionship: number;
+
   constructor(private route: ActivatedRoute, private championshipService: ChampionshipService) {
 
+    // we need the current championship and we need the current tier... combine them
+    combineLatest(
+      this.route.paramMap.pipe(map(val => +val.get('tier'))),
+      this.championshipService.getIdChampionship()
+    ).subscribe(([tier, idChampionship]) => {
+      // now we have both, or one of them changed...
+      if (tier && idChampionship) {
+        this.tier = tier;
+        this.idChampionship = idChampionship;
+        // ... load the corresponding poules
+        this.championshipService.getPoules(tier, idChampionship).subscribe(poules => {
+          this.poules = poules;
+        });
+      }
+    });
   }
 
   ngOnInit() {