Removed *ngFor

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"
+  @for (item of [].constructor(data.totalCourts); track item) {
-          *ngFor="let item of [].constructor(data.totalCourts); let i = index"
+    <button type="button" class="btn {{ data.availableCourts.indexOf($index + 1) < 0 ? 'btn-secondary' : 'btn-primary' }} btn-lg m-3"
-          [disabled]="data.availableCourts.indexOf(i + 1) < 0" [mat-dialog-close]="i + 1">
+            [disabled]="data.availableCourts.indexOf($index + 1) < 0" [mat-dialog-close]="$index + 1">
-    {{ i + 1 }}
+      {{ $index + 1 }}
     </button>
+  }
   <br>
 </mat-dialog-content>
 <mat-dialog-actions>

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

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 {MatButton} from "@angular/material/button";
-import {DatePipe, NgClass, NgForOf} from "@angular/common";
+import {NgClass} from "@angular/common";
-import {MatIcon} from "@angular/material/icon";
 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";

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>
+  }
 }

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

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">
+              @for (strengthOption of Strength | keyvalue; track strengthOption) {
+                <mat-option [value]="strengthOption.key">
                   {{ strengthOption.value }}
                 </mat-option>
+              }
             </mat-select>
           </mat-form-field>
         </div>

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,

src/app/components/player-registrations/player-registrations.component.html

@@ -1,12 +1,13 @@
 @if (player && tournamentRegistrations && allPlayers) {
   <mat-card appearance="outlined">
     <mat-card-content>
-      <mat-card *ngFor="let tournamentRegistration of getTournamentRegistrations()" appearance="outlined" class="mb-3">
+      @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>
-          <ng-container *ngFor="let eventRegistration of tournamentRegistration.events">
+            @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">
@@ -20,9 +21,11 @@
                         <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">
+                          @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>
@@ -30,7 +33,7 @@
                 </div>
                 <div class="col-6"></div>
               </div>
-          </ng-container>
+            }
           </mat-card-content>
           @if (tournamentRegistration.editable) {
             <mat-card-actions>
@@ -45,6 +48,7 @@
             </mat-card-actions>
           }
         </mat-card>
+      }
       @if (!this.showAll) {
         <button mat-button (click)="this.showAll = true">
           <mat-icon>search</mat-icon>

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,

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">
+        @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,7 +21,8 @@
   } @else {
     <table class="table table-sm m-4 wide w-100">
       <tbody>
-      <tr *ngFor="let match of round.matches">
+        @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 }}
@@ -36,13 +39,16 @@
             </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>
+                @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,7 +84,8 @@
       </tr>
       </thead>
       <tbody class="table-group-divider">
-      <tr *ngFor="let entry of round.standings.entries">
+        @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>
@@ -86,6 +93,7 @@
             <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>
   }

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

src/app/components/tournament-divide/tournament-divide.component.html

@@ -4,13 +4,15 @@
       <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">
+      @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">
-            <mat-expansion-panel *ngFor="let group of event.groups">
+              @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>
@@ -30,22 +32,26 @@
                     </tr>
                     </thead>
                     <tbody>
-                <tr *ngFor="let team of group.teams">
+                      @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?.club }}</td>
-                    <td class="align-middle">{{ getStrength(team.player2.strength.valueOf()) }}</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>
 }

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
   ],

src/app/components/tournament-draw/tournament-draw.component.html

@@ -4,13 +4,15 @@
       <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">
+      @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">
-            <mat-expansion-panel *ngFor="let group of event.groups">
+              @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>
@@ -25,17 +27,21 @@
                       </tr>
                     </thead>
                     <tbody>
-                  <tr *ngFor="let match of group.rounds[0].matches">
+                      @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>
 }

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
   ],

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>

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'

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,7 +59,8 @@
                   </mat-card-header>
                   <mat-card-content>
                     <mat-accordion multi="true">
-                      <mat-expansion-panel *ngFor="let group of event.groups">
+                      @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>
@@ -79,19 +80,22 @@
                             </tr>
                             </thead>
                             <tbody>
-                          <tr *ngFor="let team of group.teams">
+                              @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) {
+                                  @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">{{ team.player2.club }}</td>
-                              <td class="align-middle">{{ getStrength(team.player2?.strength?.valueOf()) }}</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">
+              @for (event of tournament.events; track event.id) {
-                <ng-container *ngFor="let group of event.groups">
+                @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,12 +253,14 @@
                           @if (round.status == 'NOT_STARTED') {
                             <table class="table table-hover m-4 wide w-100">
                               <tbody>
-                              <tr *ngFor="let match of round.matches">
+                                @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>
@@ -265,7 +271,8 @@
                           } @else if (round.status == 'IN_PROGRESS') {
                             <table class="table table-hover m-4 wide w-100">
                               <tbody>
-                                <tr *ngFor="let match of round.matches">
+                                @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>
@@ -286,7 +293,9 @@
                                         </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>
+                                          @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>
                                           }
@@ -304,6 +313,7 @@
                                       }
                                     </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">
+                                @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">
-                                      <span *ngFor="let game of match.games" class="col-2">{{ game.score1 }}-{{ game.score2 }}</span>
+                                        @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,7 +371,8 @@
                             </tr>
                             </thead>
                             <tbody class="table-group-divider">
-                            <tr *ngFor="let entry of getStandingsForRound(round, group).entries">
+                              @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>
@@ -377,14 +392,15 @@
                                     }
                                   </td>
                                 </tr>
+                              }
                             </tbody>
                           </table>
                         </mat-tab>
-                      </ng-container>
+                      }
                     </mat-tab-group>
                   </mat-tab>
-                </ng-container>
+                }
-              </ng-container>
+              }
             </mat-tab-group>
           </mat-tab>
         }
@@ -411,12 +427,13 @@
                     </tr>
                   </thead>
                   <tbody>
-                    <tr *ngFor="let tournamentPlayer of tournament.tournamentPlayers">
+                    @for (tournamentPlayer of tournament.tournamentPlayers; track tournamentPlayer.playerId) {
+                      <tr>
                         <td>{{ tournamentPlayer.name }}</td>
                         <td>
-                        <ng-container *ngFor="let event of tournamentPlayer.events">
+                          @for (event of tournamentPlayer.events; track event) {
                             {{ event }}&nbsp;
-                        </ng-container>
+                          }
                         </td>
                         <td>
                           {{ tournament.costsPerEvent[tournamentPlayer.events.length - 1] | currency:'EUR':'symbol':'1.2-2':'nl' }}
@@ -440,9 +457,9 @@
                           </mat-slide-toggle>
                         </td>
                       </tr>
+                    }
                   </tbody>
                 </table>
-
               </mat-tab>
             </mat-tab-group>
           </mat-tab>

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,

src/app/components/tournament-registrations/tournament-registrations.component.html

@@ -4,7 +4,8 @@
       <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">
+      @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>
@@ -21,7 +22,8 @@
                 </tr>
               </thead>
               <tbody>
-              <tr *ngFor="let registration of event.registrations">
+                @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) {
@@ -29,10 +31,12 @@
                       <td class="align-middle">{{ registration.partner | fullName }}</td>
                     }
                   </tr>
+                }
               </tbody>
             </table>
           </mat-card-content>
         </mat-card>
+      }
     </mat-card-content>
   </mat-card>
 }

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',

src/app/components/tournament-validate/tournament-validate.component.html

@@ -11,15 +11,18 @@
           </mat-panel-title>
         </mat-expansion-panel-header>
         <ul>
-          <li *ngFor="let validation of tournamentValidation.validations">
+          @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">
+  @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>
@@ -43,7 +46,8 @@
               </tr>
               </thead>
               <tbody>
-            <tr *ngFor="let registration of event.registrations">
+                @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) {
@@ -51,6 +55,7 @@
                       <td class="align-middle">{{ registration.partner?.club }}</td>
                     }
                   </tr>
+                }
               </tbody>
             </table>
           </mat-expansion-panel>
@@ -61,13 +66,16 @@
               </mat-panel-title>
             </mat-expansion-panel-header>
             <ul>
-            <li *ngFor="let validation of getEventValidation(event.id)?.validations">
+              @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>
+              }
             </ul>
           </mat-expansion-panel>
         </mat-accordion>
       </mat-card-content>
     </mat-card>
+  }
 }

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,

src/app/model/game.ts

@@ -1,4 +1,5 @@
 export class Game {
+  id: number;
   score1: number;
   score2: number;
 }

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;
 }