diff --git a/src/app/components/court-selection/court-selection.component.html b/src/app/components/court-selection/court-selection.component.html
index 2d00840..eb58825 100644
--- a/src/app/components/court-selection/court-selection.component.html
+++ b/src/app/components/court-selection/court-selection.component.html
@@ -1,10 +1,11 @@
 <h2 mat-dialog-title>Kies een baan:</h2>
 <mat-dialog-content>
-  <button type="button" class="btn {{ data.availableCourts.indexOf(i + 1) < 0 ? 'btn-secondary' : 'btn-primary' }} btn-lg m-3"
-          *ngFor="let item of [].constructor(data.totalCourts); let i = index"
-          [disabled]="data.availableCourts.indexOf(i + 1) < 0" [mat-dialog-close]="i + 1">
-    {{ i + 1 }}
-  </button>
+  @for (item of [].constructor(data.totalCourts); track item) {
+    <button type="button" class="btn {{ data.availableCourts.indexOf($index + 1) < 0 ? 'btn-secondary' : 'btn-primary' }} btn-lg m-3"
+            [disabled]="data.availableCourts.indexOf($index + 1) < 0" [mat-dialog-close]="$index + 1">
+      {{ $index + 1 }}
+    </button>
+  }
   <br>
 </mat-dialog-content>
 <mat-dialog-actions>
diff --git a/src/app/components/court-selection/court-selection.component.ts b/src/app/components/court-selection/court-selection.component.ts
index bd94af1..61108e3 100644
--- a/src/app/components/court-selection/court-selection.component.ts
+++ b/src/app/components/court-selection/court-selection.component.ts
@@ -7,7 +7,6 @@ import {
   MatDialogTitle
 } from "@angular/material/dialog";
 import {Match} from "../../model/match";
-import {NgForOf} from "@angular/common";
 import {MatButton} from "@angular/material/button";
 
 @Component({
@@ -15,7 +14,6 @@ import {MatButton} from "@angular/material/button";
     imports: [
         MatDialogTitle,
         MatDialogContent,
-        NgForOf,
         MatButton,
         MatDialogClose,
         MatDialogActions
diff --git a/src/app/components/match-result/match-result.component.ts b/src/app/components/match-result/match-result.component.ts
index 97c5019..951d394 100644
--- a/src/app/components/match-result/match-result.component.ts
+++ b/src/app/components/match-result/match-result.component.ts
@@ -3,19 +3,19 @@ import {
   MAT_DIALOG_DATA,
   MatDialogActions,
   MatDialogClose,
-  MatDialogContent, MatDialogRef,
+  MatDialogContent,
+  MatDialogRef,
   MatDialogTitle
 } from "@angular/material/dialog";
-import {MatButton, MatIconButton} from "@angular/material/button";
-import {DatePipe, NgClass, NgForOf} from "@angular/common";
-import {MatIcon} from "@angular/material/icon";
+import {MatButton} from "@angular/material/button";
+import {NgClass} from "@angular/common";
 import {TeamPipe} from "../../pipes/team-pipe";
 import {FullNamePipe} from "../../pipes/fullname-pipe";
 import {Match} from "../../model/match";
 import {MatFormField, MatInput} from "@angular/material/input";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {Result} from "../../model/result";
-import {MatGridList, MatGridTile, MatGridTileText} from "@angular/material/grid-list";
+import {MatGridList, MatGridTile} from "@angular/material/grid-list";
 import {Round} from "../../model/round";
 import {Group} from "../../model/group";
 import {Game} from "../../model/game";
diff --git a/src/app/components/match-sheets/match-sheets.component.html b/src/app/components/match-sheets/match-sheets.component.html
index 70d94e1..040ebee 100644
--- a/src/app/components/match-sheets/match-sheets.component.html
+++ b/src/app/components/match-sheets/match-sheets.component.html
@@ -1,5 +1,5 @@
 @if (round) {
-  <ng-container *ngFor="let match of round.matches">
+  @for (match of round.matches; track match.id) {
     <div class="nobreak">
     <mat-card appearance="outlined">
       <mat-card-content>
@@ -54,10 +54,9 @@
             {{ group.name }} {{ round.name }}
           </div>
         </div>
-
       </mat-card-content>
     </mat-card>
     </div>
     <br>
-  </ng-container>
+  }
 }
diff --git a/src/app/components/match-sheets/match-sheets.component.ts b/src/app/components/match-sheets/match-sheets.component.ts
index c158bbd..555cd82 100644
--- a/src/app/components/match-sheets/match-sheets.component.ts
+++ b/src/app/components/match-sheets/match-sheets.component.ts
@@ -7,7 +7,6 @@ import {Round} from "../../model/round";
 import {TeamPipe} from "../../pipes/team-pipe";
 import {FullNamePipe} from "../../pipes/fullname-pipe";
 import {Group} from "../../model/group";
-import {NgForOf} from "@angular/common";
 import {MatFormField} from "@angular/material/form-field";
 import {MatInput} from "@angular/material/input";
 import {ReactiveFormsModule} from "@angular/forms";
@@ -19,7 +18,6 @@ import {TitleService} from "../../service/title.service";
     MatCard,
     MatCardContent,
     TeamPipe,
-    NgForOf,
     MatFormField,
     MatInput,
     ReactiveFormsModule
diff --git a/src/app/components/player-edit/player-edit.component.html b/src/app/components/player-edit/player-edit.component.html
index 7929826..d4eeff0 100644
--- a/src/app/components/player-edit/player-edit.component.html
+++ b/src/app/components/player-edit/player-edit.component.html
@@ -60,9 +60,11 @@
           <mat-form-field appearance="fill">
             <mat-label>Speelsterkte</mat-label>
             <mat-select [(ngModel)]="player.strength" name="strength" required>
-              <mat-option *ngFor="let strengthOption of Strength | keyvalue" [value]="strengthOption.key">
-                {{ strengthOption.value }}
-              </mat-option>
+              @for (strengthOption of Strength | keyvalue; track strengthOption) {
+                <mat-option [value]="strengthOption.key">
+                  {{ strengthOption.value }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>
diff --git a/src/app/components/player-edit/player-edit.component.ts b/src/app/components/player-edit/player-edit.component.ts
index 979810f..45db4cd 100644
--- a/src/app/components/player-edit/player-edit.component.ts
+++ b/src/app/components/player-edit/player-edit.component.ts
@@ -9,7 +9,7 @@ import {MatIcon} from "@angular/material/icon";
 import {MatRadioButton, MatRadioGroup} from "@angular/material/radio";
 import {MatCard, MatCardActions, MatCardContent} from "@angular/material/card";
 import {MatOption, MatSelect} from "@angular/material/select";
-import {KeyValuePipe, NgForOf} from "@angular/common";
+import {KeyValuePipe} from "@angular/common";
 import {MatAnchor, MatButton} from "@angular/material/button";
 import {TitleService} from "../../service/title.service";
 import {MatSnackBar} from "@angular/material/snack-bar";
@@ -33,7 +33,6 @@ import {NgxMaskDirective} from "ngx-mask";
     MatSelect,
     MatOption,
     KeyValuePipe,
-    NgForOf,
     MatButton,
     MatAnchor,
     ReactiveFormsModule,
diff --git a/src/app/components/player-registrations/player-registrations.component.html b/src/app/components/player-registrations/player-registrations.component.html
index 12039b9..e93c341 100644
--- a/src/app/components/player-registrations/player-registrations.component.html
+++ b/src/app/components/player-registrations/player-registrations.component.html
@@ -1,50 +1,54 @@
 @if (player && tournamentRegistrations && allPlayers) {
   <mat-card appearance="outlined">
     <mat-card-content>
-      <mat-card *ngFor="let tournamentRegistration of getTournamentRegistrations()" appearance="outlined" class="mb-3">
-        <mat-card-header>
-          <h6>{{ tournamentRegistration.name }}</h6>
-        </mat-card-header>
-        <mat-card-content>
-          <ng-container *ngFor="let eventRegistration of tournamentRegistration.events">
-            <div class="row event-row">
-              <div class="col-md-2">
-                <mat-checkbox [disabled]="!tournamentRegistration.editable" [(ngModel)]="eventRegistration.registered" (change)="updateModelWhenEventChecked(eventRegistration, $event)" name="registered">
-                  {{ EventRegistration.getType(eventRegistration.type) }}
-                </mat-checkbox>
+      @for (tournamentRegistration of getTournamentRegistrations(); track tournamentRegistration.id) {
+        <mat-card appearance="outlined" class="mb-3">
+          <mat-card-header>
+            <h6>{{ tournamentRegistration.name }}</h6>
+          </mat-card-header>
+          <mat-card-content>
+            @for (eventRegistration of tournamentRegistration.events; track eventRegistration.id) {
+              <div class="row event-row">
+                <div class="col-md-2">
+                  <mat-checkbox [disabled]="!tournamentRegistration.editable" [(ngModel)]="eventRegistration.registered" (change)="updateModelWhenEventChecked(eventRegistration, $event)" name="registered">
+                    {{ EventRegistration.getType(eventRegistration.type) }}
+                  </mat-checkbox>
+                </div>
+                <div class="col-md-4">
+                  @if (eventRegistration.doublesEvent) {
+                    <ng-container>
+                      <mat-form-field appearance="fill">
+                        <mat-label>Partner</mat-label>
+                        <mat-select [value]="eventRegistration.partner" [disabled]="!tournamentRegistration.editable || !eventRegistration.registered" [(ngModel)]="eventRegistration.partner">
+                          <mat-option>Geen</mat-option>
+                          @for (player of getRelevantPlayers(eventRegistration.type); track player.id) {
+                            <mat-option [value]="player.id">
+                              {{ player | fullName }}
+                            </mat-option>
+                          }
+                        </mat-select>
+                      </mat-form-field>
+                    </ng-container>
+                  }
+                </div>
+                <div class="col-6"></div>
               </div>
-              <div class="col-md-4">
-                @if (eventRegistration.doublesEvent) {
-                  <ng-container>
-                    <mat-form-field appearance="fill">
-                      <mat-label>Partner</mat-label>
-                      <mat-select [value]="eventRegistration.partner" [disabled]="!tournamentRegistration.editable || !eventRegistration.registered" [(ngModel)]="eventRegistration.partner">
-                        <mat-option>Geen</mat-option>
-                        <mat-option *ngFor="let player of getRelevantPlayers(eventRegistration.type)" [value]="player.id">
-                          {{ player | fullName }}
-                        </mat-option>
-                      </mat-select>
-                    </mat-form-field>
-                  </ng-container>
-                }
-              </div>
-              <div class="col-6"></div>
-            </div>
-          </ng-container>
-        </mat-card-content>
-        @if (tournamentRegistration.editable) {
-          <mat-card-actions>
-              <button mat-button (click)="saveRegistration(tournamentRegistration, $event)" [disabled]="waitingForBackend">
-                <mat-icon>save</mat-icon>
-                Opslaan
-              </button>
-              <a mat-button routerLink="/players">
-                <mat-icon>cancel</mat-icon>
-                Annuleren
-              </a>
-          </mat-card-actions>
-        }
-      </mat-card>
+            }
+          </mat-card-content>
+          @if (tournamentRegistration.editable) {
+            <mat-card-actions>
+                <button mat-button (click)="saveRegistration(tournamentRegistration, $event)" [disabled]="waitingForBackend">
+                  <mat-icon>save</mat-icon>
+                  Opslaan
+                </button>
+                <a mat-button routerLink="/players">
+                  <mat-icon>cancel</mat-icon>
+                  Annuleren
+                </a>
+            </mat-card-actions>
+          }
+        </mat-card>
+      }
       @if (!this.showAll) {
         <button mat-button (click)="this.showAll = true">
           <mat-icon>search</mat-icon>
diff --git a/src/app/components/player-registrations/player-registrations.component.ts b/src/app/components/player-registrations/player-registrations.component.ts
index 00f32e8..429448d 100644
--- a/src/app/components/player-registrations/player-registrations.component.ts
+++ b/src/app/components/player-registrations/player-registrations.component.ts
@@ -6,7 +6,6 @@ import {MatCard, MatCardActions, MatCardContent, MatCardHeader} from "@angular/m
 import {MatFormField, MatLabel} from "@angular/material/form-field";
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {RegistrationService} from "../../service/registration.service";
-import {NgFor, NgIf} from "@angular/common";
 import {MatCheckbox, MatCheckboxChange} from "@angular/material/checkbox";
 import {EventRegistration, TournamentRegistration} from "../../model/tournamentRegistration";
 import {MatOption} from "@angular/material/core";
@@ -25,11 +24,9 @@ import {TitleService} from "../../service/title.service";
     MatCardHeader,
     MatFormField,
     MatLabel,
-    NgFor,
     ReactiveFormsModule,
     FormsModule,
     MatCheckbox,
-    NgIf,
     MatCardActions,
     RouterLink,
     MatOption,
diff --git a/src/app/components/round-overview/round-overview.component.html b/src/app/components/round-overview/round-overview.component.html
index 81bf8ee..597d99b 100644
--- a/src/app/components/round-overview/round-overview.component.html
+++ b/src/app/components/round-overview/round-overview.component.html
@@ -3,12 +3,14 @@
   @if (round.status != 'FINISHED') {
     <table class="table table-sm m-4 wide w-100">
       <tbody>
-        <tr *ngFor="let match of round.matches">
-          <td class="align-middle" style="width: 45%;">{{ match.team1 | teamText }}</td>
-          <td class="align-middle w-sep">-</td>
-          <td class="align-middle" style="width: 45%;">{{ match.team2 | teamText }}</td>
-          <td class="align-middle w-sep"></td>
-        </tr>
+        @for (match of round.matches; track match.id) {
+          <tr>
+            <td class="align-middle" style="width: 45%;">{{ match.team1 | teamText }}</td>
+            <td class="align-middle w-sep">-</td>
+            <td class="align-middle" style="width: 45%;">{{ match.team2 | teamText }}</td>
+            <td class="align-middle w-sep"></td>
+          </tr>
+        }
         @if (round.drawnOut) {
           <tr>
             <td class="align-middle w-100" colspan="4"><b>Deze ronde uitgeloot:</b> {{ round.drawnOut | teamText }}</td>
@@ -19,30 +21,34 @@
   } @else {
     <table class="table table-sm m-4 wide w-100">
       <tbody>
-      <tr *ngFor="let match of round.matches">
-        <td class="align-middle" style="width: 30%;">
-          @if (event.doublesEvent) {
-            {{ match.team1.player1 | fullName }} /<br>{{ match.team1.player2 | fullName }}
-          } @else {
-            {{ match.team1.player1 | fullName }}
-          }
-        <td class="align-middle w-sep">-</td>
-        <td class="align-middle" style="width: 30%;">
-          @if (event.doublesEvent) {
-            {{ match.team2.player1 | fullName }} /<br>{{ match.team2.player2 | fullName }}
-          } @else {
-            {{ match.team2.player1 | fullName }}
-          }
-        </td>
-        <td class="align-middle" style="width: 35%;">
-          <div class="row result align-items-center">
-            <span *ngFor="let game of match.games" class="col-3">{{ game.score1 }}-{{ game.score2 }}</span>
-            @if (match.games.length == 2) {
-              <span class="col-3"></span>
-            }
-          </div>
-        </td>
-      </tr>
+        @for (match of round.matches; track match.id) {
+          <tr>
+            <td class="align-middle" style="width: 30%;">
+              @if (event.doublesEvent) {
+                {{ match.team1.player1 | fullName }} /<br>{{ match.team1.player2 | fullName }}
+              } @else {
+                {{ match.team1.player1 | fullName }}
+              }
+            <td class="align-middle w-sep">-</td>
+            <td class="align-middle" style="width: 30%;">
+              @if (event.doublesEvent) {
+                {{ match.team2.player1 | fullName }} /<br>{{ match.team2.player2 | fullName }}
+              } @else {
+                {{ match.team2.player1 | fullName }}
+              }
+            </td>
+            <td class="align-middle" style="width: 35%;">
+              <div class="row result align-items-center">
+                @for (game of match.games; track game.id) {
+                  <span class="col-3">{{ game.score1 }}-{{ game.score2 }}</span>
+                }
+                @if (match.games.length == 2) {
+                  <span class="col-3"></span>
+                }
+              </div>
+            </td>
+          </tr>
+        }
         @if (round.drawnOut) {
           <tr>
             <td class="align-middle w-100" colspan="4"><b>Deze ronde uitgeloot:</b> {{ round.drawnOut | teamText }}</td>
@@ -78,14 +84,16 @@
       </tr>
       </thead>
       <tbody class="table-group-divider">
-      <tr *ngFor="let entry of round.standings.entries">
-        <td class="align-middle">{{ entry.position }}</td>
-        <td class="align-middle">{{ entry.team | teamText }}</td>
-        <td class="align-middle">{{ entry.played }}</td>
-        <td class="align-middle">{{ entry.points / entry.played | number: '1.0-2' }}</td>
-        <td class="align-middle">{{ (entry.gamesWon - entry.gamesLost) / entry.played | number: '1.0-2' }}</td>
-        <td class="align-middle">{{ (entry.pointsWon - entry.pointsLost) / entry.played | number: '1.0-2' }}</td>
-      </tr>
+        @for (entry of round.standings.entries; track entry.position) {
+          <tr>
+            <td class="align-middle">{{ entry.position }}</td>
+            <td class="align-middle">{{ entry.team | teamText }}</td>
+            <td class="align-middle">{{ entry.played }}</td>
+            <td class="align-middle">{{ entry.points / entry.played | number: '1.0-2' }}</td>
+            <td class="align-middle">{{ (entry.gamesWon - entry.gamesLost) / entry.played | number: '1.0-2' }}</td>
+            <td class="align-middle">{{ (entry.pointsWon - entry.pointsLost) / entry.played | number: '1.0-2' }}</td>
+          </tr>
+        }
       </tbody>
     </table>
   }
diff --git a/src/app/components/round-overview/round-overview.component.ts b/src/app/components/round-overview/round-overview.component.ts
index 17781ba..e4d0d15 100644
--- a/src/app/components/round-overview/round-overview.component.ts
+++ b/src/app/components/round-overview/round-overview.component.ts
@@ -5,7 +5,7 @@ import {Group} from "../../model/group";
 import {Round} from "../../model/round";
 import {TournamentService} from "../../service/tournament.service";
 import {ActivatedRoute, Router} from "@angular/router";
-import {DecimalPipe, NgForOf} from "@angular/common";
+import {DecimalPipe} from "@angular/common";
 import {TeamPipe} from "../../pipes/team-pipe";
 import {FullNamePipe} from "../../pipes/fullname-pipe";
 import {TitleService} from "../../service/title.service";
@@ -13,7 +13,6 @@ import {TitleService} from "../../service/title.service";
 @Component({
     selector: 'app-round-overview',
   imports: [
-    NgForOf,
     TeamPipe,
     DecimalPipe,
     FullNamePipe
diff --git a/src/app/components/tournament-divide/tournament-divide.component.html b/src/app/components/tournament-divide/tournament-divide.component.html
index 6f2133a..cd273c2 100644
--- a/src/app/components/tournament-divide/tournament-divide.component.html
+++ b/src/app/components/tournament-divide/tournament-divide.component.html
@@ -4,48 +4,54 @@
       <h5>Indeling voor {{ tournament.name }}</h5>
     </mat-card-header>
     <mat-card-content>
-      <mat-card *ngFor="let event of tournament.events" appearance="outlined" class="m-3">
-        <mat-card-header>
-          <h6>Indeling {{ TournamentEvent.getType(event.type) }}</h6>
-        </mat-card-header>
-        <mat-card-content>
-          <mat-accordion multi="true">
-            <mat-expansion-panel *ngFor="let group of event.groups">
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  {{ group.name }}&nbsp;<span class="badge text-bg-success">{{ group.teams.length }}</span>
-                </mat-panel-title>
-              </mat-expansion-panel-header>
-              <table class="table {{ event.doublesEvent ? 'w-100' : 'w-50' }}">
-                <thead class="thead-dark">
-                <tr>
-                  <th scope="col" class="w-20">Naam</th>
-                  <th scope="col" class="w-20">Club</th>
-                  <th scope="col" class="w-10">Speelsterkte</th>
-                  @if (event.doublesEvent) {
-                    <th scope="col" class="w-20">Partner</th>
-                    <th scope="col" class="w-20">Club</th>
-                    <th scope="col" class="w-10">Speelsterkte</th>
-                  }
-                </tr>
-                </thead>
-                <tbody>
-                <tr *ngFor="let team of group.teams">
-                  <td class="align-middle">{{ team.player1 | fullName }}</td>
-                  <td class="align-middle">{{ team.player1.club }}</td>
-                  <td class="align-middle">{{ getStrength(team.player1.strength.valueOf()) }}</td>
-                  @if (event.doublesEvent) {
-                    <td class="align-middle">{{ team.player2 | fullName }}</td>
-                    <td class="align-middle">{{ team.player2.club }}</td>
-                    <td class="align-middle">{{ getStrength(team.player2.strength.valueOf()) }}</td>
-                  }
-                </tr>
-                </tbody>
-              </table>
-            </mat-expansion-panel>
-          </mat-accordion>
-        </mat-card-content>
-      </mat-card>
+      @for (event of tournament.events; track event.id) {
+        <mat-card appearance="outlined" class="m-3">
+          <mat-card-header>
+            <h6>Indeling {{ TournamentEvent.getType(event.type) }}</h6>
+          </mat-card-header>
+          <mat-card-content>
+            <mat-accordion multi="true">
+              @for (group of event.groups; track group.id) {
+                <mat-expansion-panel>
+                  <mat-expansion-panel-header>
+                    <mat-panel-title>
+                      {{ group.name }}&nbsp;<span class="badge text-bg-success">{{ group.teams.length }}</span>
+                    </mat-panel-title>
+                  </mat-expansion-panel-header>
+                  <table class="table {{ event.doublesEvent ? 'w-100' : 'w-50' }}">
+                    <thead class="thead-dark">
+                    <tr>
+                      <th scope="col" class="w-20">Naam</th>
+                      <th scope="col" class="w-20">Club</th>
+                      <th scope="col" class="w-10">Speelsterkte</th>
+                      @if (event.doublesEvent) {
+                        <th scope="col" class="w-20">Partner</th>
+                        <th scope="col" class="w-20">Club</th>
+                        <th scope="col" class="w-10">Speelsterkte</th>
+                      }
+                    </tr>
+                    </thead>
+                    <tbody>
+                      @for (team of group.teams; track team.id) {
+                        <tr>
+                          <td class="align-middle">{{ team.player1 | fullName }}</td>
+                          <td class="align-middle">{{ team.player1.club }}</td>
+                          <td class="align-middle">{{ getStrength(team.player1.strength.valueOf()) }}</td>
+                          @if (event.doublesEvent) {
+                            <td class="align-middle">{{ team.player2 | fullName }}</td>
+                            <td class="align-middle">{{ team.player2?.club }}</td>
+                            <td class="align-middle">{{ team.player2 ? getStrength(team.player2!.strength.valueOf()) : '' }}</td>
+                          }
+                        </tr>
+                      }
+                    </tbody>
+                  </table>
+                </mat-expansion-panel>
+              }
+            </mat-accordion>
+          </mat-card-content>
+        </mat-card>
+      }
     </mat-card-content>
   </mat-card>
 }
diff --git a/src/app/components/tournament-divide/tournament-divide.component.ts b/src/app/components/tournament-divide/tournament-divide.component.ts
index 45d6703..b0b6026 100644
--- a/src/app/components/tournament-divide/tournament-divide.component.ts
+++ b/src/app/components/tournament-divide/tournament-divide.component.ts
@@ -3,7 +3,6 @@ import {Tournament} from "../../model/tournament";
 import {TournamentService} from "../../service/tournament.service";
 import {ActivatedRoute, Router} from "@angular/router";
 import {MatCard, MatCardContent, MatCardHeader} from "@angular/material/card";
-import {NgForOf, NgIf} from "@angular/common";
 import {
   MatAccordion,
   MatExpansionPanel,
@@ -19,12 +18,10 @@ import {FullNamePipe} from "../../pipes/fullname-pipe";
   imports: [
     MatCard,
     MatCardHeader,
-    NgIf,
     MatCardContent,
     MatExpansionPanel,
     MatExpansionPanelTitle,
     MatExpansionPanelHeader,
-    NgForOf,
     FullNamePipe,
     MatAccordion
   ],
diff --git a/src/app/components/tournament-draw/tournament-draw.component.html b/src/app/components/tournament-draw/tournament-draw.component.html
index 5c51a82..8a097f9 100644
--- a/src/app/components/tournament-draw/tournament-draw.component.html
+++ b/src/app/components/tournament-draw/tournament-draw.component.html
@@ -4,38 +4,44 @@
       <h5>Loting voor {{ tournament.name }}</h5>
     </mat-card-header>
     <mat-card-content>
-      <mat-card *ngFor="let event of tournament.events" appearance="outlined" class="m-3">
-        <mat-card-header>
-          <h6>Loting {{ TournamentEvent.getType(event.type) }}</h6>
-        </mat-card-header>
-        <mat-card-content>
-          <mat-accordion multi="true">
-            <mat-expansion-panel *ngFor="let group of event.groups">
-              <mat-expansion-panel-header>
-                <mat-panel-title>
-                  {{ group.name }}&nbsp;<span class="badge text-bg-success">{{ group.teams.length }}</span>
-                </mat-panel-title>
-              </mat-expansion-panel-header>
-              <table class="table {{ event.doublesEvent ? 'w-100' : 'w-50' }}">
-                <thead class="thead-dark">
-                  <tr>
-                    <th scope="col" class="w-25">Team 1</th>
-                    <th scope="col" style="width: 5%">-</th>
-                    <th scope="col" class="w-25">Team 2</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr *ngFor="let match of group.rounds[0].matches">
-                    <td class="align-middle">{{ match.team1 | teamText }}</td>
-                    <td class="align-middle">-</td>
-                    <td class="align-middle">{{ match.team2 | teamText }}</td>
-                  </tr>
-                </tbody>
-              </table>
-            </mat-expansion-panel>
-          </mat-accordion>
-        </mat-card-content>
-      </mat-card>
+      @for (event of tournament.events; track event.id) {
+        <mat-card appearance="outlined" class="m-3">
+          <mat-card-header>
+            <h6>Loting {{ TournamentEvent.getType(event.type) }}</h6>
+          </mat-card-header>
+          <mat-card-content>
+            <mat-accordion multi="true">
+              @for (group of event.groups; track group.id) {
+                <mat-expansion-panel>
+                  <mat-expansion-panel-header>
+                    <mat-panel-title>
+                      {{ group.name }}&nbsp;<span class="badge text-bg-success">{{ group.teams.length }}</span>
+                    </mat-panel-title>
+                  </mat-expansion-panel-header>
+                  <table class="table {{ event.doublesEvent ? 'w-100' : 'w-50' }}">
+                    <thead class="thead-dark">
+                      <tr>
+                        <th scope="col" class="w-25">Team 1</th>
+                        <th scope="col" style="width: 5%">-</th>
+                        <th scope="col" class="w-25">Team 2</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      @for (match of group.rounds[0].matches; track match.id) {
+                        <tr>
+                          <td class="align-middle">{{ match.team1 | teamText }}</td>
+                          <td class="align-middle">-</td>
+                          <td class="align-middle">{{ match.team2 | teamText }}</td>
+                        </tr>
+                      }
+                    </tbody>
+                  </table>
+                </mat-expansion-panel>
+              }
+            </mat-accordion>
+          </mat-card-content>
+        </mat-card>
+      }
     </mat-card-content>
   </mat-card>
 }
diff --git a/src/app/components/tournament-draw/tournament-draw.component.ts b/src/app/components/tournament-draw/tournament-draw.component.ts
index 49b128a..0f937fe 100644
--- a/src/app/components/tournament-draw/tournament-draw.component.ts
+++ b/src/app/components/tournament-draw/tournament-draw.component.ts
@@ -3,7 +3,6 @@ import {Tournament} from "../../model/tournament";
 import {TournamentService} from "../../service/tournament.service";
 import {ActivatedRoute, Router} from "@angular/router";
 import {MatCard, MatCardContent, MatCardHeader} from "@angular/material/card";
-import {NgForOf, NgIf} from "@angular/common";
 import {
   MatAccordion,
   MatExpansionPanel,
@@ -18,13 +17,11 @@ import {FullNamePipe} from "../../pipes/fullname-pipe";
     selector: 'app-tournament-draw',
   imports: [
     MatCard,
-    NgIf,
     MatCardContent,
     MatCardHeader,
     MatExpansionPanel,
     MatExpansionPanelHeader,
     MatExpansionPanelTitle,
-    NgForOf,
     TeamPipe,
     MatAccordion
   ],
diff --git a/src/app/components/tournament-list/tournament-list.component.html b/src/app/components/tournament-list/tournament-list.component.html
index 861d99a..85d0c37 100644
--- a/src/app/components/tournament-list/tournament-list.component.html
+++ b/src/app/components/tournament-list/tournament-list.component.html
@@ -11,7 +11,7 @@
         </tr>
       </thead>
       <tbody>
-      @for (tournament of getActiveTournaments(); track tournament) {
+      @for (tournament of getActiveTournaments(); track tournament.id) {
         <tr>
           <td class="align-middle">{{ tournament.id }}</td>
           <td class="align-middle"><a [routerLink]="['/tournaments', tournament.id, 'manage']">{{ tournament.name }}</a></td>
@@ -38,7 +38,7 @@
         </tr>
       }
       @if (showInactive) {
-        @for (tournament of getInactiveTournaments(); track tournament) {
+        @for (tournament of getInactiveTournaments(); track tournament.id) {
           <tr>
             <td class="align-middle">{{ tournament.id }}</td>
             <td class="align-middle"><a [routerLink]="['/tournaments', tournament.id, 'manage']">{{ tournament.name }}</a></td>
diff --git a/src/app/components/tournament-list/tournament-list.component.ts b/src/app/components/tournament-list/tournament-list.component.ts
index 4c3b3df..19597c8 100644
--- a/src/app/components/tournament-list/tournament-list.component.ts
+++ b/src/app/components/tournament-list/tournament-list.component.ts
@@ -1,5 +1,4 @@
 import {AfterContentChecked, Component, OnInit} from '@angular/core';
-import {NgFor, NgIf} from "@angular/common";
 import {RouterLink} from "@angular/router";
 import {Tournament} from "../../model/tournament";
 import {TournamentService} from "../../service/tournament.service";
@@ -12,7 +11,7 @@ import {TitleService} from "../../service/title.service";
 @Component({
     selector: 'app-tournament-list',
   imports: [
-    NgFor, RouterLink, NgIf, MatAnchor, MatIcon, MatCard, MatCardContent, MatButton, MatTableModule
+    RouterLink, MatAnchor, MatIcon, MatCard, MatCardContent, MatButton, MatTableModule
   ],
     templateUrl: './tournament-list.component.html',
     styleUrl: './tournament-list.component.scss'
diff --git a/src/app/components/tournament-manage/tournament-manage.component.html b/src/app/components/tournament-manage/tournament-manage.component.html
index 7f88b40..1d7fd90 100644
--- a/src/app/components/tournament-manage/tournament-manage.component.html
+++ b/src/app/components/tournament-manage/tournament-manage.component.html
@@ -51,7 +51,7 @@
                 <h6>Totaal: {{ getTournamentMatchCount(tournament)}} wedstrijden</h6>
               </mat-card-header>
             </mat-card>
-            @for (event of tournament.events; track event) {
+            @for (event of tournament.events; track event.id) {
               @if (event.groups.length > 0) {
                 <mat-card appearance="outlined" class="m-3">
                   <mat-card-header>
@@ -59,39 +59,43 @@
                   </mat-card-header>
                   <mat-card-content>
                     <mat-accordion multi="true">
-                      <mat-expansion-panel *ngFor="let group of event.groups">
-                        <mat-expansion-panel-header>
-                          <mat-panel-title>
-                            {{ group.name }}&nbsp;<span class="badge text-bg-success">{{ group.teams.length }}</span>
-                          </mat-panel-title>
-                        </mat-expansion-panel-header>
-                        <table class="table {{ event.doublesEvent ? 'w-100' : 'w-50' }}">
-                          <thead class="thead-dark">
-                          <tr>
-                            <th scope="col" class="w-20">Naam</th>
-                            <th scope="col" class="w-20">Club</th>
-                            <th scope="col" class="w-10">Speelsterkte</th>
-                            @if (event.doublesEvent) {
-                              <th scope="col" class="w-20">Partner</th>
+                      @for (group of event.groups; track group.id) {
+                        <mat-expansion-panel>
+                          <mat-expansion-panel-header>
+                            <mat-panel-title>
+                              {{ group.name }}&nbsp;<span class="badge text-bg-success">{{ group.teams.length }}</span>
+                            </mat-panel-title>
+                          </mat-expansion-panel-header>
+                          <table class="table {{ event.doublesEvent ? 'w-100' : 'w-50' }}">
+                            <thead class="thead-dark">
+                            <tr>
+                              <th scope="col" class="w-20">Naam</th>
                               <th scope="col" class="w-20">Club</th>
                               <th scope="col" class="w-10">Speelsterkte</th>
-                            }
-                          </tr>
-                          </thead>
-                          <tbody>
-                          <tr *ngFor="let team of group.teams">
-                            <td class="align-middle">{{ team.player1 | fullName }}</td>
-                            <td class="align-middle">{{ team.player1.club }}</td>
-                            <td class="align-middle">{{ getStrength(team.player1.strength.valueOf()) }}</td>
-                            @if (event.doublesEvent) {
-                              <td class="align-middle">{{ team.player2 | fullName }}</td>
-                              <td class="align-middle">{{ team.player2?.club }}</td>
-                              <td class="align-middle">{{ getStrength(team.player2?.strength?.valueOf()) }}</td>
-                            }
-                          </tr>
-                          </tbody>
-                        </table>
-                      </mat-expansion-panel>
+                              @if (event.doublesEvent) {
+                                <th scope="col" class="w-20">Partner</th>
+                                <th scope="col" class="w-20">Club</th>
+                                <th scope="col" class="w-10">Speelsterkte</th>
+                              }
+                            </tr>
+                            </thead>
+                            <tbody>
+                              @for (team of group.teams; track team.id) {
+                                <tr>
+                                  <td class="align-middle">{{ team.player1 | fullName }}</td>
+                                  <td class="align-middle">{{ team.player1.club }}</td>
+                                  <td class="align-middle">{{ getStrength(team.player1.strength.valueOf()) }}</td>
+                                  @if (event.doublesEvent && team.player2) {
+                                    <td class="align-middle">{{ team.player2 | fullName }}</td>
+                                    <td class="align-middle">{{ team.player2.club }}</td>
+                                    <td class="align-middle">{{ getStrength(team.player2.strength.valueOf()) }}</td>
+                                  }
+                                </tr>
+                              }
+                            </tbody>
+                          </table>
+                        </mat-expansion-panel>
+                      }
                     </mat-accordion>
                   </mat-card-content>
                 </mat-card>
@@ -167,8 +171,8 @@
             </ng-template>
 
             <mat-tab-group animationDuration="0ms" disableRipple="true">
-              <ng-container *ngFor="let event of tournament.events">
-                <ng-container *ngFor="let group of event.groups">
+              @for (event of tournament.events; track event.id) {
+                @for (group of event.groups; track group.id) {
                   <mat-tab label="{{group.id}}">
                     <ng-template mat-tab-label>
                       <!--<mat-icon>list</mat-icon>&nbsp;-->
@@ -205,7 +209,7 @@
                       disableRipple="true"
                       [(selectedIndex)]="activeRoundTab"
                       (selectedTabChange)="onRoundTabChange($event)">
-                      <ng-container *ngFor="let round of group.rounds; index as roundIndex">
+                      @for (round of group.rounds; track round.id; let roundIndex = $index) {
                         <mat-tab label="{{round.id}}">
                           <ng-template mat-tab-label>
                             <mat-icon>{{ getRoundIcon(round.status) }}</mat-icon>
@@ -249,61 +253,67 @@
                           @if (round.status == 'NOT_STARTED') {
                             <table class="table table-hover m-4 wide w-100">
                               <tbody>
-                              <tr *ngFor="let match of round.matches">
-                                <td class="align-middle w-team">{{ match.team1 | teamText }}</td>
-                                <td class="align-middle w-sep">-</td>
-                                <td class="align-middle w-team">{{ match.team2 | teamText }}</td>
-                                <td class="align-middle w-fill"></td>
-                              </tr>
-                              @if (round.drawnOut) {
-                                <tr>
-                                  <td class="align-middle w-100" colspan="4"><b>Deze ronde uitgeloot:</b> {{ round.drawnOut | teamText }}</td>
-                                </tr>
-                              }
+                                @for (match of round.matches; track match.id) {
+                                  <tr>
+                                    <td class="align-middle w-team">{{ match.team1 | teamText }}</td>
+                                    <td class="align-middle w-sep">-</td>
+                                    <td class="align-middle w-team">{{ match.team2 | teamText }}</td>
+                                    <td class="align-middle w-fill"></td>
+                                  </tr>
+                                }
+                                @if (round.drawnOut) {
+                                  <tr>
+                                    <td class="align-middle w-100" colspan="4"><b>Deze ronde uitgeloot:</b> {{ round.drawnOut | teamText }}</td>
+                                  </tr>
+                                }
                               </tbody>
                             </table>
                           } @else if (round.status == 'IN_PROGRESS') {
                             <table class="table table-hover m-4 wide w-100">
                               <tbody>
-                                <tr *ngFor="let match of round.matches">
-                                  <td class="align-middle w-team" [ngClass]="{'winner': checkWinner(match) == 1}">{{ match.team1 | teamText }}</td>
-                                  <td class="align-middle w-sep">-</td>
-                                  <td class="align-middle w-team" [ngClass]="{'winner': checkWinner(match) == 2}">{{ match.team2 | teamText }}</td>
-                                  <td class="align-middle w-fill">
-                                    @if (match.status == 'NOT_STARTED') {
-                                      <button mat-button (click)="startMatch(match)">
-                                        <mat-icon>play_arrow</mat-icon>
-                                        Wedstrijd starten
-                                      </button>
-                                    } @else if (match.status == 'IN_PROGRESS') {
-                                      <button mat-button (click)="editResult(match, group, round)">
-                                        <mat-icon>edit</mat-icon>
-                                        Uitslag invoeren
-                                      </button>
-                                      <button mat-button (click)="stopMatch(match)">
-                                        <mat-icon>stop</mat-icon>
-                                        Wedstrijd stoppen
-                                      </button>
-                                    } @else if (match.status == 'FINISHED') {
-                                      <div class="row result align-items-center">
-                                        <span *ngFor="let game of match.games" class="col-2">{{ game.score1 }}-{{ game.score2 }}</span>
-                                        @if (match.games.length == 2) {
-                                          <span class="col-2"></span>
-                                        }
-
-                                        <button mat-icon-button [matMenuTriggerFor]="finishedMatchMenu" class="menu-button m-3">
-                                          <mat-icon>more_vert</mat-icon>
+                                @for (match of round.matches; track match.id) {
+                                  <tr>
+                                    <td class="align-middle w-team" [ngClass]="{'winner': checkWinner(match) == 1}">{{ match.team1 | teamText }}</td>
+                                    <td class="align-middle w-sep">-</td>
+                                    <td class="align-middle w-team" [ngClass]="{'winner': checkWinner(match) == 2}">{{ match.team2 | teamText }}</td>
+                                    <td class="align-middle w-fill">
+                                      @if (match.status == 'NOT_STARTED') {
+                                        <button mat-button (click)="startMatch(match)">
+                                          <mat-icon>play_arrow</mat-icon>
+                                          Wedstrijd starten
                                         </button>
-                                        <mat-menu #finishedMatchMenu="matMenu">
-                                          <button mat-menu-item (click)="editResult(match, group, round)">
-                                            <mat-icon>edit</mat-icon>
-                                            Uitslag bewerken
+                                      } @else if (match.status == 'IN_PROGRESS') {
+                                        <button mat-button (click)="editResult(match, group, round)">
+                                          <mat-icon>edit</mat-icon>
+                                          Uitslag invoeren
+                                        </button>
+                                        <button mat-button (click)="stopMatch(match)">
+                                          <mat-icon>stop</mat-icon>
+                                          Wedstrijd stoppen
+                                        </button>
+                                      } @else if (match.status == 'FINISHED') {
+                                        <div class="row result align-items-center">
+                                          @for (game of match.games; track game.id) {
+                                            <span class="col-2">{{ game.score1 }}-{{ game.score2 }}</span>
+                                          }
+                                          @if (match.games.length == 2) {
+                                            <span class="col-2"></span>
+                                          }
+
+                                          <button mat-icon-button [matMenuTriggerFor]="finishedMatchMenu" class="menu-button m-3">
+                                            <mat-icon>more_vert</mat-icon>
                                           </button>
-                                        </mat-menu>
-                                      </div>
-                                    }
-                                  </td>
-                                </tr>
+                                          <mat-menu #finishedMatchMenu="matMenu">
+                                            <button mat-menu-item (click)="editResult(match, group, round)">
+                                              <mat-icon>edit</mat-icon>
+                                              Uitslag bewerken
+                                            </button>
+                                          </mat-menu>
+                                        </div>
+                                      }
+                                    </td>
+                                  </tr>
+                                }
                                 @if (round.drawnOut) {
                                   <tr>
                                     <td class="align-middle w-100" colspan="4"><b>Deze ronde uitgeloot:</b> {{ round.drawnOut | teamText }}</td>
@@ -314,19 +324,23 @@
                           } @else if (round.status == 'FINISHED') {
                             <table class="table table-hover m-4 wide {{ this.groupIsDoublesType(group) ? 'w-100' : 'w-100' }}">
                               <tbody>
-                                <tr *ngFor="let match of round.matches">
-                                  <td class="align-middle w-team" [ngClass]="{'winner': checkWinner(match) == 1}">{{ match.team1 | teamText }}</td>
-                                  <td class="align-middle w-sep">-</td>
-                                  <td class="align-middle w-team" [ngClass]="{'winner': checkWinner(match) == 2}">{{ match.team2 | teamText }}</td>
-                                  <td class="align-middle w-fill">
-                                    <div class="row result align-items-center">
-                                      <span *ngFor="let game of match.games" class="col-2">{{ game.score1 }}-{{ game.score2 }}</span>
-                                      @if (match.games.length == 2) {
-                                        <span class="col-2"></span>
-                                      }
-                                    </div>
-                                  </td>
-                                </tr>
+                                @for (match of round.matches; track match.id) {
+                                  <tr>
+                                    <td class="align-middle w-team" [ngClass]="{'winner': checkWinner(match) == 1}">{{ match.team1 | teamText }}</td>
+                                    <td class="align-middle w-sep">-</td>
+                                    <td class="align-middle w-team" [ngClass]="{'winner': checkWinner(match) == 2}">{{ match.team2 | teamText }}</td>
+                                    <td class="align-middle w-fill">
+                                      <div class="row result align-items-center">
+                                        @for (game of match.games; track game.id) {
+                                          <span class="col-2">{{ game.score1 }}-{{ game.score2 }}</span>
+                                        }
+                                        @if (match.games.length == 2) {
+                                          <span class="col-2"></span>
+                                        }
+                                      </div>
+                                    </td>
+                                  </tr>
+                                }
                                 @if (round.drawnOut) {
                                   <tr>
                                     <td class="align-middle w-100" colspan="4"><b>Deze ronde uitgeloot:</b> {{ round.drawnOut | teamText }}</td>
@@ -357,34 +371,36 @@
                             </tr>
                             </thead>
                             <tbody class="table-group-divider">
-                            <tr *ngFor="let entry of getStandingsForRound(round, group).entries">
-                              <td class="align-middle">{{ entry.position }}</td>
-                              <td class="align-middle">{{ entry.team | teamText }}</td>
-                              <td class="align-middle">{{ entry.played }}</td>
-                              <td class="align-middle">
-                                @if (entry.played > 0 ) {
-                                  {{ entry.points }} ({{ entry.points / entry.played | number: '1.0-2' }})
-                                }
-                              </td>
-                              <td class="align-middle">
-                                @if (entry.played > 0 ) {
-                                  {{ entry.gamesWon }}-{{ entry.gamesLost}} ({{ (entry.gamesWon - entry.gamesLost) / entry.played | number: '1.0-2' }})
-                                }
-                              </td>
-                              <td class="align-middle">
-                                @if (entry.played > 0 ) {
-                                  {{ entry.pointsWon }}-{{ entry.pointsLost }} ({{ (entry.pointsWon - entry.pointsLost) / entry.played | number: '1.0-2' }})
-                                }
-                              </td>
-                            </tr>
+                              @for (entry of getStandingsForRound(round, group).entries; track entry.position) {
+                                <tr>
+                                  <td class="align-middle">{{ entry.position }}</td>
+                                  <td class="align-middle">{{ entry.team | teamText }}</td>
+                                  <td class="align-middle">{{ entry.played }}</td>
+                                  <td class="align-middle">
+                                    @if (entry.played > 0 ) {
+                                      {{ entry.points }} ({{ entry.points / entry.played | number: '1.0-2' }})
+                                    }
+                                  </td>
+                                  <td class="align-middle">
+                                    @if (entry.played > 0 ) {
+                                      {{ entry.gamesWon }}-{{ entry.gamesLost}} ({{ (entry.gamesWon - entry.gamesLost) / entry.played | number: '1.0-2' }})
+                                    }
+                                  </td>
+                                  <td class="align-middle">
+                                    @if (entry.played > 0 ) {
+                                      {{ entry.pointsWon }}-{{ entry.pointsLost }} ({{ (entry.pointsWon - entry.pointsLost) / entry.played | number: '1.0-2' }})
+                                    }
+                                  </td>
+                                </tr>
+                              }
                             </tbody>
                           </table>
                         </mat-tab>
-                      </ng-container>
+                      }
                     </mat-tab-group>
                   </mat-tab>
-                </ng-container>
-              </ng-container>
+                }
+              }
             </mat-tab-group>
           </mat-tab>
         }
@@ -411,38 +427,39 @@
                     </tr>
                   </thead>
                   <tbody>
-                    <tr *ngFor="let tournamentPlayer of tournament.tournamentPlayers">
-                      <td>{{ tournamentPlayer.name }}</td>
-                      <td>
-                        <ng-container *ngFor="let event of tournamentPlayer.events">
-                          {{ event }}&nbsp;
-                        </ng-container>
-                      </td>
-                      <td>
-                        {{ tournament.costsPerEvent[tournamentPlayer.events.length - 1] | currency:'EUR':'symbol':'1.2-2':'nl' }}
-                      </td>
-                      <td>
-                        <mat-slide-toggle [(ngModel)]="tournamentPlayer.paid" (change)="playerPaid($event, tournamentPlayer.playerId)">
-                          @if (tournamentPlayer.paid) {
-                            Betaald
-                          } @else {
-                            Nog niet betaald
+                    @for (tournamentPlayer of tournament.tournamentPlayers; track tournamentPlayer.playerId) {
+                      <tr>
+                        <td>{{ tournamentPlayer.name }}</td>
+                        <td>
+                          @for (event of tournamentPlayer.events; track event) {
+                            {{ event }}&nbsp;
                           }
-                        </mat-slide-toggle>
-                      </td>
-                      <td>
-                        <mat-slide-toggle [(ngModel)]="tournamentPlayer.present" (change)="playerPresent($event, tournamentPlayer.playerId)">
-                          @if (tournamentPlayer.present) {
-                            Aanwezig
-                          } @else {
-                            Nog niet aanwezig
-                          }
-                        </mat-slide-toggle>
-                      </td>
-                    </tr>
+                        </td>
+                        <td>
+                          {{ tournament.costsPerEvent[tournamentPlayer.events.length - 1] | currency:'EUR':'symbol':'1.2-2':'nl' }}
+                        </td>
+                        <td>
+                          <mat-slide-toggle [(ngModel)]="tournamentPlayer.paid" (change)="playerPaid($event, tournamentPlayer.playerId)">
+                            @if (tournamentPlayer.paid) {
+                              Betaald
+                            } @else {
+                              Nog niet betaald
+                            }
+                          </mat-slide-toggle>
+                        </td>
+                        <td>
+                          <mat-slide-toggle [(ngModel)]="tournamentPlayer.present" (change)="playerPresent($event, tournamentPlayer.playerId)">
+                            @if (tournamentPlayer.present) {
+                              Aanwezig
+                            } @else {
+                              Nog niet aanwezig
+                            }
+                          </mat-slide-toggle>
+                        </td>
+                      </tr>
+                    }
                   </tbody>
                 </table>
-
               </mat-tab>
             </mat-tab-group>
           </mat-tab>
diff --git a/src/app/components/tournament-manage/tournament-manage.component.ts b/src/app/components/tournament-manage/tournament-manage.component.ts
index e439e8d..6bb4730 100644
--- a/src/app/components/tournament-manage/tournament-manage.component.ts
+++ b/src/app/components/tournament-manage/tournament-manage.component.ts
@@ -6,7 +6,7 @@ import {
   MatExpansionPanelTitle
 } from "@angular/material/expansion";
 import {MatCard, MatCardContent, MatCardHeader} from "@angular/material/card";
-import {CurrencyPipe, DatePipe, DecimalPipe, NgClass, NgForOf, NgIf} from "@angular/common";
+import {CurrencyPipe, DatePipe, DecimalPipe, NgClass} from "@angular/common";
 import {TeamPipe} from "../../pipes/team-pipe";
 import {TournamentService} from "../../service/tournament.service";
 import {ActivatedRoute, Router} from "@angular/router";
@@ -44,8 +44,6 @@ import {TitleService} from "../../service/title.service";
         MatExpansionPanel,
         MatExpansionPanelHeader,
         MatExpansionPanelTitle,
-        NgForOf,
-        NgIf,
         TeamPipe,
         MatIcon,
         NgClass,
diff --git a/src/app/components/tournament-registrations/tournament-registrations.component.html b/src/app/components/tournament-registrations/tournament-registrations.component.html
index c6f04d4..e9e38eb 100644
--- a/src/app/components/tournament-registrations/tournament-registrations.component.html
+++ b/src/app/components/tournament-registrations/tournament-registrations.component.html
@@ -4,35 +4,39 @@
       <h5>Inschrijvingen voor {{ tournament.name }}</h5>
     </mat-card-header>
     <mat-card-content>
-      <mat-card *ngFor="let event of tournament.events" appearance="outlined" class="m-3">
-        <mat-card-header>
-          <h6>{{ TournamentEvent.getType(event.type) }} ({{ event.registrations.length}} inschrijvingen)</h6>
-        </mat-card-header>
-        <mat-card-content>
-          <table class="table {{ event.doublesEvent ? 'w-100' : 'w-50' }}">
-            <thead class="thead-dark">
-              <tr>
-                <th scope="col" class="w-25">Naam</th>
-                <th scope="col" class="w-25">Club</th>
-                @if (event.doublesEvent) {
-                  <th scope="col" class="w-25">Partner</th>
+      @for (event of tournament.events; track event.id) {
+        <mat-card appearance="outlined" class="m-3">
+          <mat-card-header>
+            <h6>{{ TournamentEvent.getType(event.type) }} ({{ event.registrations.length}} inschrijvingen)</h6>
+          </mat-card-header>
+          <mat-card-content>
+            <table class="table {{ event.doublesEvent ? 'w-100' : 'w-50' }}">
+              <thead class="thead-dark">
+                <tr>
+                  <th scope="col" class="w-25">Naam</th>
                   <th scope="col" class="w-25">Club</th>
+                  @if (event.doublesEvent) {
+                    <th scope="col" class="w-25">Partner</th>
+                    <th scope="col" class="w-25">Club</th>
+                  }
+                </tr>
+              </thead>
+              <tbody>
+                @for (registration of event.registrations; track registration.id) {
+                  <tr>
+                    <td class="align-middle">{{ registration.player | fullName }}</td>
+                    <td class="align-middle">{{ registration.player.club }}</td>
+                    @if (event.doublesEvent) {
+                      <td class="align-middle">{{ registration.partner?.club }}</td>
+                      <td class="align-middle">{{ registration.partner | fullName }}</td>
+                    }
+                  </tr>
                 }
-              </tr>
-            </thead>
-            <tbody>
-              <tr *ngFor="let registration of event.registrations">
-                <td class="align-middle">{{ registration.player | fullName }}</td>
-                <td class="align-middle">{{ registration.player.club }}</td>
-                @if (event.doublesEvent) {
-                  <td class="align-middle">{{ registration.partner?.club }}</td>
-                  <td class="align-middle">{{ registration.partner | fullName }}</td>
-                }
-              </tr>
-            </tbody>
-          </table>
-        </mat-card-content>
-      </mat-card>
+              </tbody>
+            </table>
+          </mat-card-content>
+        </mat-card>
+      }
     </mat-card-content>
   </mat-card>
 }
diff --git a/src/app/components/tournament-registrations/tournament-registrations.component.ts b/src/app/components/tournament-registrations/tournament-registrations.component.ts
index 26bb80b..f1dc135 100644
--- a/src/app/components/tournament-registrations/tournament-registrations.component.ts
+++ b/src/app/components/tournament-registrations/tournament-registrations.component.ts
@@ -3,7 +3,6 @@ import {MatCard, MatCardContent, MatCardHeader} from "@angular/material/card";
 import {Tournament} from "../../model/tournament";
 import {TournamentService} from "../../service/tournament.service";
 import {ActivatedRoute, Router} from "@angular/router";
-import {NgForOf, NgIf} from "@angular/common";
 import {Event} from "../../model/event";
 import {FullNamePipe} from "../../pipes/fullname-pipe";
 import {TitleService} from "../../service/title.service";
@@ -14,8 +13,6 @@ import {TitleService} from "../../service/title.service";
         MatCard,
         MatCardHeader,
         MatCardContent,
-        NgForOf,
-        NgIf,
         FullNamePipe
     ],
     templateUrl: './tournament-registrations.component.html',
diff --git a/src/app/components/tournament-validate/tournament-validate.component.html b/src/app/components/tournament-validate/tournament-validate.component.html
index 01cdf54..315fa21 100644
--- a/src/app/components/tournament-validate/tournament-validate.component.html
+++ b/src/app/components/tournament-validate/tournament-validate.component.html
@@ -11,63 +11,71 @@
           </mat-panel-title>
         </mat-expansion-panel-header>
         <ul>
-          <li *ngFor="let validation of tournamentValidation.validations">
-            <mat-icon class="text-{{ getColorForSeverity(validation.severity) }}">{{ getIconForSeverity(validation.severity) }}</mat-icon>
-            {{ validation.message }}
-          </li>
+          @for (validation of tournamentValidation.validations; track validation) {
+            <li>
+              <mat-icon class="text-{{ getColorForSeverity(validation.severity) }}">{{ getIconForSeverity(validation.severity) }}</mat-icon>
+              {{ validation.message }}
+            </li>
+          }
         </ul>
       </mat-expansion-panel>
     </mat-card-content>
   </mat-card>
-  <mat-card *ngFor="let event of tournament.events" appearance="outlined" class="m-3">
-    <mat-card-header>
-      <h6>{{ TournamentEvent.getType(event.type) }}</h6>
-    </mat-card-header>
-    <mat-card-content>
-      <mat-accordion multi="true">
-        <mat-expansion-panel [disabled]="event.registrations.length == 0">
-          <mat-expansion-panel-header>
-            <mat-panel-title>
-              Inschrijvingen&nbsp;<span class="badge {{ event.registrations.length == 0 ? 'text-bg-danger' : 'text-bg-success'}}">{{ event.registrations.length }}</span>
-            </mat-panel-title>
-          </mat-expansion-panel-header>
-          <table class="table {{ event.doublesEvent ? 'w-100' : 'w-50' }}">
-            <thead class="thead-dark">
-            <tr>
-              <th scope="col" class="w-25">Naam</th>
-              <th scope="col" class="w-25">Club</th>
-              @if (event.doublesEvent) {
-                <th scope="col" class="w-25">Partner</th>
+  @for (event of tournament.events; track event.id) {
+    <mat-card appearance="outlined" class="m-3">
+      <mat-card-header>
+        <h6>{{ TournamentEvent.getType(event.type) }}</h6>
+      </mat-card-header>
+      <mat-card-content>
+        <mat-accordion multi="true">
+          <mat-expansion-panel [disabled]="event.registrations.length == 0">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                Inschrijvingen&nbsp;<span class="badge {{ event.registrations.length == 0 ? 'text-bg-danger' : 'text-bg-success'}}">{{ event.registrations.length }}</span>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <table class="table {{ event.doublesEvent ? 'w-100' : 'w-50' }}">
+              <thead class="thead-dark">
+              <tr>
+                <th scope="col" class="w-25">Naam</th>
                 <th scope="col" class="w-25">Club</th>
+                @if (event.doublesEvent) {
+                  <th scope="col" class="w-25">Partner</th>
+                  <th scope="col" class="w-25">Club</th>
+                }
+              </tr>
+              </thead>
+              <tbody>
+                @for (registration of event.registrations; track registration.id) {
+                  <tr>
+                    <td class="align-middle">{{ registration.player | fullName }}</td>
+                    <td class="align-middle">{{ registration.player.club }}</td>
+                    @if (event.doublesEvent) {
+                      <td class="align-middle">{{ registration.partner | fullName }}</td>
+                      <td class="align-middle">{{ registration.partner?.club }}</td>
+                    }
+                  </tr>
+                }
+              </tbody>
+            </table>
+          </mat-expansion-panel>
+          <mat-expansion-panel [disabled]="getEventValidation(event.id)?.validations?.length == 0">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                Validaties&nbsp;<span class="badge {{ Validation.hasErrors(getEventValidation(event.id)?.validations) ? 'text-bg-danger' : 'text-bg-success'}}">{{ getEventValidation(event.id)?.validations?.length }}</span>
+              </mat-panel-title>
+            </mat-expansion-panel-header>
+            <ul>
+              @for (validation of getEventValidation(event.id)?.validations; track validation) {
+                <li>
+                  <mat-icon class="text-{{ getColorForSeverity(validation.severity) }}">{{ getIconForSeverity(validation.severity) }}</mat-icon>
+                  <player-link [validationMessage]="validation.message"></player-link>
+                </li>
               }
-            </tr>
-            </thead>
-            <tbody>
-            <tr *ngFor="let registration of event.registrations">
-              <td class="align-middle">{{ registration.player | fullName }}</td>
-              <td class="align-middle">{{ registration.player.club }}</td>
-              @if (event.doublesEvent) {
-                <td class="align-middle">{{ registration.partner | fullName }}</td>
-                <td class="align-middle">{{ registration.partner?.club }}</td>
-              }
-            </tr>
-            </tbody>
-          </table>
-        </mat-expansion-panel>
-        <mat-expansion-panel [disabled]="getEventValidation(event.id)?.validations?.length == 0">
-          <mat-expansion-panel-header>
-            <mat-panel-title>
-              Validaties&nbsp;<span class="badge {{ Validation.hasErrors(getEventValidation(event.id)?.validations) ? 'text-bg-danger' : 'text-bg-success'}}">{{ getEventValidation(event.id)?.validations?.length }}</span>
-            </mat-panel-title>
-          </mat-expansion-panel-header>
-          <ul>
-            <li *ngFor="let validation of getEventValidation(event.id)?.validations">
-              <mat-icon class="text-{{ getColorForSeverity(validation.severity) }}">{{ getIconForSeverity(validation.severity) }}</mat-icon>
-              <player-link [validationMessage]="validation.message"></player-link>
-            </li>
-          </ul>
-        </mat-expansion-panel>
-      </mat-accordion>
-    </mat-card-content>
-  </mat-card>
+            </ul>
+          </mat-expansion-panel>
+        </mat-accordion>
+      </mat-card-content>
+    </mat-card>
+  }
 }
diff --git a/src/app/components/tournament-validate/tournament-validate.component.ts b/src/app/components/tournament-validate/tournament-validate.component.ts
index 56da2f3..ad77e0e 100644
--- a/src/app/components/tournament-validate/tournament-validate.component.ts
+++ b/src/app/components/tournament-validate/tournament-validate.component.ts
@@ -1,7 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {MatCard, MatCardContent, MatCardHeader} from "@angular/material/card";
 import {Tournament} from "../../model/tournament";
-import {NgForOf, NgIf} from "@angular/common";
 import {Event} from "../../model/event";
 import {TournamentService} from "../../service/tournament.service";
 import {ActivatedRoute, Router} from "@angular/router";
@@ -24,11 +23,9 @@ import {PlayerLinkComponent} from "../player-link/player-link.component";
         MatCard,
         MatCardHeader,
         MatCardContent,
-        NgForOf,
         MatExpansionPanel,
         MatExpansionPanelTitle,
         MatExpansionPanelHeader,
-        NgIf,
         MatAccordion,
         MatIcon,
         FullNamePipe,
diff --git a/src/app/model/game.ts b/src/app/model/game.ts
index 3fae8d3..b8362c7 100644
--- a/src/app/model/game.ts
+++ b/src/app/model/game.ts
@@ -1,4 +1,5 @@
 export class Game {
+  id: number;
   score1: number;
   score2: number;
 }
diff --git a/src/app/model/team.ts b/src/app/model/team.ts
index 407906b..9ca2db8 100644
--- a/src/app/model/team.ts
+++ b/src/app/model/team.ts
@@ -2,6 +2,7 @@ import {Player} from "./player";
 import {FullNamePipe} from "../pipes/fullname-pipe";
 
 export class Team {
+  id: number;
   player1: Player;
-  player2: Player;
+  player2: Player | null;
 }