Update angular/core et angular/cli

Front/skydivelogs-app/angular.json

@@ -15,7 +15,7 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@angular/build:application",
           "options": {
             "outputPath": "dist",
             "index": "src/index.html",
@@ -87,7 +87,7 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@angular/build:dev-server",
           "configurations": {
             "production": {
               "buildTarget": "skydivelogs-app:build:production"
@@ -99,10 +99,10 @@
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n"
+          "builder": "@angular/build:extract-i18n"
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@angular/build:karma",
           "options": {
             "polyfills": ["zone.js", "zone.js/testing"],
             "tsConfig": "tsconfig.spec.json",
@@ -119,5 +119,31 @@
         }
       }
     }
+  },
+  "schematics": {
+    "@schematics/angular:component": {
+      "type": "component"
+    },
+    "@schematics/angular:directive": {
+      "type": "directive"
+    },
+    "@schematics/angular:service": {
+      "type": "service"
+    },
+    "@schematics/angular:guard": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:interceptor": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:module": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:pipe": {
+      "typeSeparator": "."
+    },
+    "@schematics/angular:resolver": {
+      "typeSeparator": "."
+    }
   }
 }

Front/skydivelogs-app/package.json

@@ -12,16 +12,16 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^19.2.6",
+    "@angular/animations": "^20.3.16",
     "@angular/cdk": "^19.2.9",
-    "@angular/common": "^19.2.6",
+    "@angular/common": "^20.3.16",
-    "@angular/compiler": "^19.2.6",
+    "@angular/compiler": "^20.3.16",
-    "@angular/core": "^19.2.6",
+    "@angular/core": "^20.3.16",
-    "@angular/forms": "^19.2.6",
+    "@angular/forms": "^20.3.16",
     "@angular/material": "^19.2.9",
-    "@angular/platform-browser": "^19.2.6",
+    "@angular/platform-browser": "^20.3.16",
-    "@angular/platform-browser-dynamic": "^19.2.6",
+    "@angular/platform-browser-dynamic": "^20.3.16",
-    "@angular/router": "^19.2.6",
+    "@angular/router": "^20.3.16",
     "@ngx-translate/core": "^17.0.0",
     "@ngx-translate/http-loader": "^17.0.0",
     "chart.js": "^4.3.0",
@@ -31,9 +31,9 @@
     "zone.js": "~0.15.0"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^19.2.7",
+    "@angular/build": "^20.3.14",
-    "@angular/cli": "~19.2.7",
+    "@angular/cli": "~20.3.14",
-    "@angular/compiler-cli": "^19.2.6",
+    "@angular/compiler-cli": "^20.3.16",
     "@types/jasmine": "~4.3.0",
     "jasmine-core": "~5.1.0",
     "karma": "~6.4.0",
@@ -41,6 +41,6 @@
     "karma-coverage": "~2.2.0",
     "karma-jasmine": "~5.1.0",
     "karma-jasmine-html-reporter": "~2.1.0",
-    "typescript": "~5.5.4"
+    "typescript": "~5.9.3"
   }
 }

Front/skydivelogs-app/src/app/app.component.html

@@ -1,7 +1,7 @@
-<mat-toolbar *ngIf="this.show()">
+@if (this.show()) {
+  <mat-toolbar>
     <mat-icon svgIcon="menu" (click)="snav.toggle()"></mat-icon>
     <h2>{{ translatedTitle }}</h2>
-
     <mat-select
       [(value)]="selectedLanguageFlag"
       (selectionChange)="switchLang($event)"
@@ -20,7 +20,8 @@
         <img src="assets/img/en.svg" style="width: 30px" />
       </mat-option>
     </mat-select>
-</mat-toolbar>
+  </mat-toolbar>
+}
 
 <mat-sidenav-container>
   <mat-sidenav #snav mode="over" style="padding: 0 20px 0 10px">
@@ -153,7 +154,8 @@
                         >{{ "App_Nav_Gears" | translate }}</a
                         >
                       </mat-nav-list>
-    <mat-nav-list *ngIf="currentUser">
+                      @if (currentUser) {
+                        <mat-nav-list>
                           <hr class="splitter" />
                           <mat-icon
                             aria-hidden="false"
@@ -169,7 +171,9 @@
                             {{ this.currentUser.firstName }} {{ this.currentUser.lastName }}
                           </a>
                         </mat-nav-list>
-    <mat-nav-list *ngIf="currentUser">
+                      }
+                      @if (currentUser) {
+                        <mat-nav-list>
                           <mat-icon
                             aria-hidden="false"
                             aria-label="To logout"
@@ -179,6 +183,7 @@
                             "App_Nav_Logout" | translate
                           }}</span>
                         </mat-nav-list>
+                      }
                     </mat-sidenav>
 
                     <mat-sidenav-content>
@@ -187,4 +192,4 @@
                         {{ "App_Footer" | translate }}{{ version }} - &#64;Séb
                       </footer>
                     </mat-sidenav-content>
-</mat-sidenav-container>
+                  </mat-sidenav-container>

Front/skydivelogs-app/src/app/app.component.ts

@@ -1,6 +1,6 @@
 import { Component, inject, OnInit } from "@angular/core";
 import { Router, RouterLink, RouterOutlet } from "@angular/router";
-import { CommonModule } from "@angular/common";
+
 import { DomSanitizer } from "@angular/platform-browser";
 import { MatToolbarModule } from "@angular/material/toolbar";
 import {
@@ -31,7 +31,6 @@ import { ServiceCacheApi } from "../services/service-cache-api.service";
   templateUrl: "./app.component.html",
   styleUrls: ["./app.component.css"],
   imports: [
-    CommonModule,
     MatToolbarModule,
     MatIconModule,
     MatSelectModule,
@@ -41,8 +40,8 @@ import { ServiceCacheApi } from "../services/service-cache-api.service";
     RouterOutlet,
     RouterLink,
     TranslateModule,
-    TranslatePipe,
+    TranslatePipe
-  ],
+],
 })
 export class AppComponent implements OnInit {
   public translatedTitle = "???";

Front/skydivelogs-app/src/app/create-user/create-user.component.html

@@ -4,7 +4,7 @@
   style="padding: 10px"
   (ngSubmit)="onCreateSubmit()"
   [formGroup]="createForm"
->
+  >
   <p>
     <mat-form-field>
       <mat-label>{{ "LoginCreateUser_Firstname" | translate }}</mat-label>
@@ -16,12 +16,16 @@
         [ngClass]="{ 'is-invalid': submitted && formCtrls['firstname'].errors }"
         tabindex="0"
         />
-      <mat-error *ngIf="formCtrls['firstname'].hasError('required')">
+      @if (formCtrls['firstname'].hasError('required')) {
+        <mat-error>
           {{ "LoginCreateUser_FirstnameRequired" | translate }}
         </mat-error>
-      <mat-error *ngIf="formCtrls['firstname'].hasError('minlength')">
+      }
+      @if (formCtrls['firstname'].hasError('minlength')) {
+        <mat-error>
           {{ "LoginCreateUser_FirstnamePattern" | translate }}
         </mat-error>
+      }
     </mat-form-field>
   </p>
   <p>
@@ -34,12 +38,16 @@
         [ngClass]="{ 'is-invalid': submitted && formCtrls['lastname'].errors }"
         tabindex="1"
         />
-      <mat-error *ngIf="formCtrls['lastname'].hasError('required')">
+      @if (formCtrls['lastname'].hasError('required')) {
+        <mat-error>
           {{ "LoginCreateUser_LastnameRequired" | translate }}
         </mat-error>
-      <mat-error *ngIf="formCtrls['lastname'].hasError('minlength')">
+      }
+      @if (formCtrls['lastname'].hasError('minlength')) {
+        <mat-error>
           {{ "LoginCreateUser_LastnamePattern" | translate }}
         </mat-error>
+      }
     </mat-form-field>
   </p>
   <p>
@@ -52,12 +60,16 @@
         [ngClass]="{ 'is-invalid': submitted && formCtrls['email'].errors }"
         tabindex="3"
         />
-      <mat-error *ngIf="formCtrls['email'].hasError('required')">
+      @if (formCtrls['email'].hasError('required')) {
+        <mat-error>
           {{ "LoginCreateUser_EmailRequired" | translate }}
         </mat-error>
-      <mat-error *ngIf="formCtrls['email'].hasError('email')">
+      }
+      @if (formCtrls['email'].hasError('email')) {
+        <mat-error>
           {{ "LoginCreateUser_EmailPattern" | translate }}
         </mat-error>
+      }
     </mat-form-field>
   </p>
   <p>
@@ -70,12 +82,16 @@
         [ngClass]="{ 'is-invalid': submitted && formCtrls['username'].errors }"
         tabindex="4"
         />
-      <mat-error *ngIf="formCtrls['username'].hasError('required')">
+      @if (formCtrls['username'].hasError('required')) {
+        <mat-error>
           {{ "LoginCreateUser_UsernameRequired" | translate }}
         </mat-error>
-      <mat-error *ngIf="formCtrls['username'].hasError('minlength')">
+      }
+      @if (formCtrls['username'].hasError('minlength')) {
+        <mat-error>
           {{ "LoginCreateUser_UsernamePattern" | translate }}
         </mat-error>
+      }
     </mat-form-field>
   </p>
   <p>
@@ -88,17 +104,23 @@
         [ngClass]="{ 'is-invalid': submitted && formCtrls['password'].errors }"
         tabindex="5"
         />
-      <mat-error *ngIf="formCtrls['password'].hasError('required')">
+      @if (formCtrls['password'].hasError('required')) {
+        <mat-error>
           {{ "LoginCreateUser_PasswordRequired" | translate }}
         </mat-error>
-      <mat-error *ngIf="formCtrls['password'].hasError('pattern')">
+      }
+      @if (formCtrls['password'].hasError('pattern')) {
+        <mat-error>
           {{ "LoginCreateUser_PasswordPattern" | translate }}
         </mat-error>
+      }
     </mat-form-field>
   </p>
 
   <button [disabled]="!createForm.valid" mat-raised-button color="accent">
     {{ "LoginCreateUser_BtnLogin" | translate }}
   </button>
-  <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{ error }}</div>
+  @if (error) {
+    <div class="alert alert-danger mt-3 mb-0">{{ error }}</div>
+  }
 </form>

Front/skydivelogs-app/src/app/jump-infos/jump-infos.component.html

@@ -30,5 +30,7 @@
       </mat-form-field>
 
       <br />
-  <button mat-raised-button color="accent" *ngIf="editMode">Update</button>
+      @if (editMode) {
-</form>
+        <button mat-raised-button color="accent">Update</button>
+      }
+    </form>

Front/skydivelogs-app/src/app/jump-infos/jump-infos.component.ts

@@ -1,5 +1,5 @@
 import { Component, Inject, OnInit } from "@angular/core";
-import { CommonModule } from "@angular/common";
+
 import { MAT_DIALOG_DATA } from "@angular/material/dialog";
 import { TranslateModule } from "@ngx-translate/core";
 import { MatCheckboxModule } from "@angular/material/checkbox";
@@ -20,14 +20,13 @@ import { ServiceComm } from "../../services/service-comm.service";
   styleUrls: ["./jump-infos.component.css"],
   imports: [
     TranslateModule,
-    CommonModule,
     FormsModule,
     MatCheckboxModule,
     MatFormFieldModule,
     ReactiveFormsModule,
     MatInputModule,
-    MatButtonModule,
+    MatButtonModule
-  ],
+],
 })
 export class JumpInfosComponent implements OnInit {
   public editMode: boolean;

Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html

@@ -1,14 +1,15 @@
 <div class="content">
-  <div *ngIf="dataSourceTable != null; else loading">
+  @if (dataSourceTable != null) {
+    <div>
+      @if (isUserAdmin == true) {
         <button
           mat-raised-button
           color="accent"
           (click)="openDialogToAdd()"
-      *ngIf="isUserAdmin == true"
           >
           {{ "ListAircrafts_Add" | translate }}
         </button>
-
+      }
       <table mat-table [dataSource]="dataSourceTable">
         <ng-container matColumnDef="id">
           <th mat-header-cell *matHeaderCellDef>
@@ -16,14 +17,12 @@
           </th>
           <td mat-cell *matCellDef="let element">{{ element.id }}</td>
         </ng-container>
-
         <ng-container matColumnDef="name">
           <th mat-header-cell *matHeaderCellDef>
             {{ "ListAircrafts_Header_Name" | translate }}
           </th>
           <td mat-cell *matCellDef="let element">{{ element.name }}</td>
         </ng-container>
-
         <ng-container matColumnDef="imageData">
           <th mat-header-cell *matHeaderCellDef>
             {{ "ListAircrafts_Header_Image" | translate }}
@@ -36,14 +35,13 @@
               />
           </td>
         </ng-container>
-
         <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       </table>
     </div>
+  } @else {
+    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
+  }
   <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
 
-  <ng-template #loading>
-    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-  </ng-template>
 </div>

Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.ts

@@ -3,7 +3,7 @@ import { MatPaginator, MatPaginatorModule } from "@angular/material/paginator";
 import { MatTableDataSource, MatTableModule } from "@angular/material/table";
 import { MatDialog } from "@angular/material/dialog";
 import { TranslateModule, TranslateService } from "@ngx-translate/core";
-import { CommonModule } from "@angular/common";
+
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 import { MatButtonModule } from "@angular/material/button";
 
@@ -20,12 +20,11 @@ import { AircraftResp } from "../../models/aircraft";
   styleUrls: ["./list-of-aircrafts.component.css"],
   imports: [
     TranslateModule,
-    CommonModule,
     MatPaginatorModule,
     MatProgressSpinnerModule,
     MatTableModule,
-    MatButtonModule,
+    MatButtonModule
-  ],
+],
 })
 export class ListOfAircraftsComponent implements OnInit {
   public displayedColumns: Array<string> = ["name", "imageData"];

Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html

@@ -1,14 +1,15 @@
 <div class="content">
-  <div *ngIf="dataSourceTable != null; else loading">
+  @if (dataSourceTable != null) {
+    <div>
+      @if (isUserAdmin == true) {
         <button
           mat-raised-button
           color="accent"
           (click)="openDialogToAdd()"
-      *ngIf="isUserAdmin == true"
           >
           {{ "ListDz_Add" | translate }}
         </button>
-
+      }
       <mat-form-field>
         <mat-label>{{ "ListDz_Filter" | translate }}</mat-label>
         <input
@@ -18,28 +19,29 @@
           #input
           />
       </mat-form-field>
-
       <table mat-table [dataSource]="dataSourceTable">
         <ng-container matColumnDef="isfavorite">
           <th mat-header-cell *matHeaderCellDef style="min-width: 144px"></th>
           <td mat-cell *matCellDef="let element" style="text-align: left">
+            @if (element.isFavorite === true) {
               <mat-icon
                 aria-hidden="false"
                 aria-label="Favorite"
-            *ngIf="element.isFavorite === true"
                 (click)="removeToFavorite(element)"
                 color="primary"
                 style="cursor: pointer"
                 svgIcon="favorite"
               ></mat-icon>
+            }
+            @if (element.isFavorite === false) {
               <mat-icon
                 aria-hidden="false"
                 aria-label="Not favorite"
-            *ngIf="element.isFavorite === false"
                 (click)="setToFavorite(element)"
                 style="cursor: pointer"
                 svgIcon="not_favorite"
               ></mat-icon>
+            }
             <a href="http://{{ element.website }}" target="_blank">
               <mat-icon
                 aria-hidden="false"
@@ -63,7 +65,8 @@
                 svgIcon="map"
               ></mat-icon>
             </a>
-          <a href="mailto:{{ element.email }}" *ngIf="element.email">
+            @if (element.email) {
+              <a href="mailto:{{ element.email }}">
                 <mat-icon
                   aria-hidden="false"
                   aria-label="Contact mail of the DZ"
@@ -71,16 +74,15 @@
                   svgIcon="mail"
                 ></mat-icon>
               </a>
+            }
           </td>
         </ng-container>
-
         <ng-container matColumnDef="id">
           <th mat-header-cell *matHeaderCellDef>
             {{ "ListDz_Header_ID" | translate }}
           </th>
           <td mat-cell *matCellDef="let element">{{ element.id }}</td>
         </ng-container>
-
         <ng-container matColumnDef="name">
           <th mat-header-cell *matHeaderCellDef>
             {{ "ListDz_Header_Name" | translate }}
@@ -89,7 +91,6 @@
             <span class="spanWithBreakWord" [innerHTML]="element.name"></span>
           </td>
         </ng-container>
-
         <ng-container matColumnDef="address">
           <th mat-header-cell *matHeaderCellDef>
             {{ "ListDz_Header_Address" | translate }}
@@ -98,21 +99,19 @@
             <span class="spanWithBreakWord" [innerHTML]="element.address"></span>
           </td>
         </ng-container>
-
         <ng-container matColumnDef="type">
           <th mat-header-cell *matHeaderCellDef>
             {{ "ListDz_Header_Type" | translate }}
           </th>
           <td mat-cell *matCellDef="let element">{{ element.type }}</td>
         </ng-container>
-
         <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       </table>
     </div>
+  } @else {
+    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
+  }
   <mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
 
-  <ng-template #loading>
-    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-  </ng-template>
 </div>

Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts

@@ -3,7 +3,7 @@ import { MatPaginator, MatPaginatorModule } from "@angular/material/paginator";
 import { MatTableDataSource, MatTableModule } from "@angular/material/table";
 import { MatDialog } from "@angular/material/dialog";
 import { TranslateModule, TranslateService } from "@ngx-translate/core";
-import { CommonModule } from "@angular/common";
+
 import { MatIconModule } from "@angular/material/icon";
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 import { MatFormFieldModule } from "@angular/material/form-field";
@@ -24,7 +24,6 @@ import { NewDropZoneComponent } from "../new-drop-zone/new-drop-zone.component";
   styleUrls: ["./list-of-dzs.component.css"],
   imports: [
     TranslateModule,
-    CommonModule,
     MatIconModule,
     MatPaginatorModule,
     MatProgressSpinnerModule,
@@ -32,8 +31,8 @@ import { NewDropZoneComponent } from "../new-drop-zone/new-drop-zone.component";
     MatFormFieldModule,
     ReactiveFormsModule,
     MatInputModule,
-    MatButtonModule,
+    MatButtonModule
-  ],
+],
 })
 export class ListOfDzsComponent implements OnInit {
   public displayedColumns: Array<string> = [

Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.html

@@ -1,9 +1,9 @@
 <div class="content">
-  <div *ngIf="dataSourceTable != null; else loading">
+  @if (dataSourceTable != null) {
+    <div>
       <button mat-raised-button color="accent" (click)="openDialogToAdd()">
         {{ "ListGears_Add" | translate }}
       </button>
-
       <table mat-table [dataSource]="dataSourceTable">
         <ng-container matColumnDef="id">
           <th mat-header-cell *matHeaderCellDef>
@@ -11,21 +11,18 @@
           </th>
           <td mat-cell *matCellDef="let element">{{ element.id }}</td>
         </ng-container>
-
         <ng-container matColumnDef="name">
           <th mat-header-cell *matHeaderCellDef style="min-width: 130px">
             {{ "ListGears_Header_Name" | translate }}
           </th>
           <td mat-cell *matCellDef="let element">{{ element.name }}</td>
         </ng-container>
-
         <ng-container matColumnDef="manufacturer">
           <th mat-header-cell *matHeaderCellDef>
             {{ "ListGears_Header_Manufacturer" | translate }}
           </th>
           <td mat-cell *matCellDef="let element">{{ element.manufacturer }}</td>
         </ng-container>
-
         <ng-container matColumnDef="maxSize">
           <th mat-header-cell *matHeaderCellDef style="min-width: 90px">
             {{ "ListGears_Header_CanopySize" | translate }}
@@ -34,35 +31,31 @@
             {{ element.minSize }} - {{ element.maxSize }}
           </td>
         </ng-container>
-
         <ng-container matColumnDef="aad">
           <th mat-header-cell *matHeaderCellDef>
             {{ "ListGears_Header_Aad" | translate }}
           </th>
           <td mat-cell *matCellDef="let element">{{ element.aad }}</td>
         </ng-container>
-
         <ng-container matColumnDef="mainCanopy">
           <th mat-header-cell *matHeaderCellDef>
             {{ "ListGears_Header_Main" | translate }}
           </th>
           <td mat-cell *matCellDef="let element">{{ element.mainCanopy }}</td>
         </ng-container>
-
         <ng-container matColumnDef="reserveCanopy">
           <th mat-header-cell *matHeaderCellDef>
             {{ "ListGears_Header_Reserve" | translate }}
           </th>
           <td mat-cell *matCellDef="let element">{{ element.reserveCanopy }}</td>
         </ng-container>
-
         <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       </table>
     </div>
+  } @else {
+    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
+  }
   <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
 
-  <ng-template #loading>
-    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-  </ng-template>
 </div>

Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.ts

@@ -3,7 +3,7 @@ import { MatPaginator, MatPaginatorModule } from "@angular/material/paginator";
 import { MatTableDataSource, MatTableModule } from "@angular/material/table";
 import { MatDialog } from "@angular/material/dialog";
 import { TranslateModule, TranslateService } from "@ngx-translate/core";
-import { CommonModule } from "@angular/common";
+
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 import { MatButtonModule } from "@angular/material/button";
 
@@ -19,12 +19,11 @@ import { NewGearComponent } from "../new-gear/new-gear.component";
   styleUrls: ["./list-of-gears.component.css"],
   imports: [
     TranslateModule,
-    CommonModule,
     MatPaginatorModule,
     MatProgressSpinnerModule,
     MatTableModule,
-    MatButtonModule,
+    MatButtonModule
-  ],
+],
 })
 export class ListOfGearsComponent implements OnInit {
   public displayedColumns: Array<string> = [

Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html

@@ -31,7 +31,8 @@
   </form>
 </div>
 
-<div *ngIf="resultsLength > 0">
+@if (resultsLength > 0) {
+  <div>
     <table mat-table [dataSource]="dataSourceTable">
       <ng-container matColumnDef="comment">
         <th mat-header-cell *matHeaderCellDef style="text-align: center">
@@ -41,7 +42,6 @@
           <span style="white-space: nowrap">{{ element.comment }}</span>
         </td>
       </ng-container>
-
       <ng-container matColumnDef="data">
         <th mat-header-cell *matHeaderCellDef style="text-align: center">
           Image
@@ -56,18 +56,17 @@
             />
         </td>
       </ng-container>
-
       <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
       <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
     </table>
-
     <mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>
-</div>
+  </div>
+}
 
 <div
   class="imgmodal"
   [ngStyle]="{ display: showPopin === true ? 'block' : 'none' }"
->
+  >
   <span class="close cursor" (click)="closeModal()">&times;</span>
   <mat-icon
     aria-hidden="false"

Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html

@@ -1,14 +1,15 @@
 <div class="content">
-  <div *ngIf="dataSourceTable != null; else loading">
+  @if (dataSourceTable != null) {
+    <div>
+      @if (isUserAdmin == true) {
         <button
           mat-raised-button
           color="accent"
           (click)="openDialogToAdd()"
-      *ngIf="isUserAdmin == true"
           >
           {{ "ListJumpType_Add" | translate }}
         </button>
-
+      }
       <table mat-table [dataSource]="dataSourceTable">
         <ng-container matColumnDef="id">
           <th mat-header-cell *matHeaderCellDef>
@@ -16,21 +17,19 @@
           </th>
           <td mat-cell *matCellDef="let element">{{ element.id }}</td>
         </ng-container>
-
         <ng-container matColumnDef="name">
           <th mat-header-cell *matHeaderCellDef>
             {{ "ListJumpType_Header_Name" | translate }}
           </th>
           <td mat-cell *matCellDef="let element">{{ element.name }}</td>
         </ng-container>
-
         <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       </table>
     </div>
+  } @else {
+    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
+  }
   <mat-paginator [length]="resultsLength" [pageSize]="20"></mat-paginator>
 
-  <ng-template #loading>
-    <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-  </ng-template>
 </div>

Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.ts

@@ -3,7 +3,7 @@ import { MatPaginator, MatPaginatorModule } from "@angular/material/paginator";
 import { MatTableDataSource, MatTableModule } from "@angular/material/table";
 import { MatDialog } from "@angular/material/dialog";
 import { TranslateModule, TranslateService } from "@ngx-translate/core";
-import { CommonModule } from "@angular/common";
+
 import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 import { MatButtonModule } from "@angular/material/button";
 
@@ -20,12 +20,11 @@ import { NewJumpTypeComponent } from "../new-jump-type/new-jump-type.component";
   styleUrls: ["./list-of-jump-types.component.css"],
   imports: [
     TranslateModule,
-    CommonModule,
     MatPaginatorModule,
     MatProgressSpinnerModule,
     MatTableModule,
-    MatButtonModule,
+    MatButtonModule
-  ],
+],
 })
 export class ListOfJumpTypesComponent implements OnInit {
   public displayedColumns: Array<string> = ["name"];

Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html

@@ -11,10 +11,11 @@
     </button>
   </div>
 
+  @if (isLoading) {
     <mat-progress-bar
       [mode]="'indeterminate'"
-    *ngIf="isLoading"
     ></mat-progress-bar>
+  }
 
   <div>
     <table mat-table [dataSource]="dataSourceTable">

Front/skydivelogs-app/src/app/list-of-tunnel-flights/list-of-tunnel-flights.component.html

@@ -11,10 +11,11 @@
     </button>
   </div>
 
+  @if (isLoading) {
     <mat-progress-bar
       [mode]="'indeterminate'"
-    *ngIf="isLoading"
     ></mat-progress-bar>
+  }
 
   <mat-radio-group
     [(ngModel)]="selectedPeriod"
@@ -32,9 +33,11 @@
   </mat-radio-group>
 
   <mat-nav-list>
-    <mat-list-item matListItemLine *ngFor="let stat of stats">
+    @for (stat of stats; track stat) {
+      <mat-list-item matListItemLine>
         <label>{{ stat.id }} : {{ stat.values }}</label>
       </mat-list-item>
+    }
   </mat-nav-list>
 
   <div class="chart-container">
@@ -54,10 +57,10 @@
       {{ "ListTunnelFlight_LoadTable" | translate }}
     </button>
 
+    @if (dataSourceTable?.data.length) {
       <table
         mat-table
         [dataSource]="dataSourceTable"
-      *ngIf="dataSourceTable?.data.length"
         >
         <ng-container matColumnDef="id">
           <th mat-header-cell *matHeaderCellDef>ID</th>
@@ -65,7 +68,6 @@
             <span class="smallSpanWithBreakWord" [innerHTML]="element.id"></span>
           </td>
         </ng-container>
-
         <ng-container matColumnDef="tunnel">
           <th mat-header-cell *matHeaderCellDef>Tunnel</th>
           <td mat-cell *matCellDef="let element">
@@ -75,7 +77,6 @@
             ></span>
           </td>
         </ng-container>
-
         <ng-container matColumnDef="jumpType">
           <th mat-header-cell *matHeaderCellDef>Jump Type</th>
           <td mat-cell *matCellDef="let element">
@@ -85,7 +86,6 @@
             ></span>
           </td>
         </ng-container>
-
         <ng-container matColumnDef="nbMinutes">
           <th mat-header-cell *matHeaderCellDef>Minutes</th>
           <td mat-cell *matCellDef="let element">
@@ -95,7 +95,6 @@
             ></span>
           </td>
         </ng-container>
-
         <ng-container matColumnDef="notes">
           <th mat-header-cell *matHeaderCellDef>Notes</th>
           <td mat-cell *matCellDef="let element">
@@ -105,7 +104,6 @@
             ></span>
           </td>
         </ng-container>
-
         <ng-container matColumnDef="flightDate">
           <th mat-header-cell *matHeaderCellDef>Date</th>
           <td mat-cell *matCellDef="let element">
@@ -115,7 +113,6 @@
             ></span>
           </td>
         </ng-container>
-
         <ng-container matColumnDef="actions">
           <th mat-header-cell *matHeaderCellDef style="min-width: 80px"></th>
           <td mat-cell *matCellDef="let element" style="text-align: left">
@@ -128,9 +125,9 @@
             ></mat-icon>
           </td>
         </ng-container>
-
         <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
         <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
       </table>
+    }
   </div>
 </div>

Front/skydivelogs-app/src/app/login-user/login-user.component.html

@@ -4,7 +4,7 @@
   style="padding: 10px"
   [formGroup]="loginForm"
   (ngSubmit)="onLoginSubmit()"
->
+  >
   <p>
     <mat-form-field>
       <mat-label>{{ "LoginUser_Username" | translate }}</mat-label>
@@ -15,12 +15,16 @@
         formControlName="username"
         [ngClass]="{ 'is-invalid': submitted && formCtrls['username'].errors }"
         />
-      <mat-error *ngIf="formCtrls['username'].hasError('required')">
+      @if (formCtrls['username'].hasError('required')) {
+        <mat-error>
           {{ "LoginUser_UsernameRequired" | translate }}
         </mat-error>
-      <mat-error *ngIf="formCtrls['username'].hasError('minlength')">
+      }
+      @if (formCtrls['username'].hasError('minlength')) {
+        <mat-error>
           {{ 'LoginUser_UsernamePattern | translate }}
         </mat-error>
+      }
     </mat-form-field>
   </p>
   <p>
@@ -32,19 +36,27 @@
         formControlName="password"
         [ngClass]="{ 'is-invalid': submitted && formCtrls['password'].errors }"
         />
-      <mat-error *ngIf="formCtrls['password'].hasError('required')">
+      @if (formCtrls['password'].hasError('required')) {
+        <mat-error>
           {{ "LoginUser_PasswordRequired" | translate }}
         </mat-error>
-      <mat-error *ngIf="formCtrls['password'].hasError('pattern')">
+      }
+      @if (formCtrls['password'].hasError('pattern')) {
+        <mat-error>
           {{ "LoginUser_PasswordPattern" | translate }}
         </mat-error>
+      }
     </mat-form-field>
   </p>
 
   <button [disabled]="loading" mat-raised-button color="accent">
-    <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
+    @if (loading) {
+      <span class="spinner-border spinner-border-sm mr-1"></span>
+    }
     {{ "LoginUser_BtnLogin" | translate }}
   </button>
 
-  <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{ error }}</div>
+  @if (error) {
+    <div class="alert alert-danger mt-3 mb-0">{{ error }}</div>
+  }
 </form>

Front/skydivelogs-app/src/app/login/login.component.ts

@@ -4,7 +4,7 @@ import {
   TranslatePipe,
   TranslateService,
 } from "@ngx-translate/core";
-import { CommonModule } from "@angular/common";
+
 import { MatSelectModule } from "@angular/material/select";
 import { MatOptionModule } from "@angular/material/core";
 import { MatCardModule } from "@angular/material/card";
@@ -19,15 +19,14 @@ import { CreateUserComponent } from "../create-user/create-user.component";
   styleUrls: ["./login.component.css"],
   imports: [
     TranslateModule,
-    CommonModule,
     MatSelectModule,
     MatOptionModule,
     MatCardModule,
     MatTabsModule,
     LoginUserComponent,
     CreateUserComponent,
-    TranslateModule,
+    TranslateModule
-  ],
+],
 })
 export class LoginComponent implements OnInit {
   public selectedLanguageFlag: string;

Front/skydivelogs-app/src/app/new-jump/new-jump.component.html

@@ -16,10 +16,10 @@
     </p>
   </div>
 
+  @if (notLoadingToDisplay()) {
     <form
       class="formNewJumps"
       (ngSubmit)="onFormSubmit()"
-    *ngIf="notLoadingToDisplay(); else loading"
       >
       <mat-form-field>
         <mat-label>{{ "NewJump_ChooseJumpType" | translate }}</mat-label>
@@ -34,12 +34,14 @@
           #autoJumpType="matAutocomplete"
           [displayWith]="displayNameFn"
           >
-        <mat-option *ngFor="let jumpType of listOfJumpType" [value]="jumpType">
+          @for (jumpType of listOfJumpType; track jumpType) {
+            <mat-option [value]="jumpType">
               {{ jumpType.name }}
             </mat-option>
+          }
         </mat-autocomplete>
+        @if (selectedJumpType) {
           <button
-        *ngIf="selectedJumpType"
             matSuffix
             mat-icon-button
             aria-label="Clear"
@@ -47,8 +49,8 @@
             >
             <mat-icon>close</mat-icon>
           </button>
+        }
       </mat-form-field>
-
       <mat-form-field>
         <mat-label>{{ "NewJump_ChooseAircraft" | translate }}</mat-label>
         <input
@@ -62,12 +64,14 @@
           #autoAircraft="matAutocomplete"
           [displayWith]="displayNameFn"
           >
-        <mat-option *ngFor="let aircraft of listOfAircraft" [value]="aircraft">
+          @for (aircraft of listOfAircraft; track aircraft) {
+            <mat-option [value]="aircraft">
               {{ aircraft.name }}
             </mat-option>
+          }
         </mat-autocomplete>
+        @if (selectedAircraft) {
           <button
-        *ngIf="selectedAircraft"
             matSuffix
             mat-icon-button
             aria-label="Clear"
@@ -75,8 +79,8 @@
             >
             <mat-icon>close</mat-icon>
           </button>
+        }
       </mat-form-field>
-
       <mat-form-field>
         <mat-label>{{ "NewJump_ChooseDz" | translate }}</mat-label>
         <input
@@ -91,23 +95,25 @@
           #autoDropZone="matAutocomplete"
           [displayWith]="displayNameFn"
           >
+          @for (dropZone of listOfFilteredDropZone; track dropZone) {
             <mat-option
-          *ngFor="let dropZone of listOfFilteredDropZone"
               [value]="dropZone"
               >
               {{ dropZone.name }}
+              @if (dropZone.isFavorite === true) {
                 <mat-icon
                   aria-hidden="false"
                   aria-label="Favorite"
-            *ngIf="dropZone.isFavorite === true"
                   color="primary"
                   >
                   favorite</mat-icon
                   >
+                }
               </mat-option>
+            }
           </mat-autocomplete>
+          @if (selectedDz) {
             <button
-        *ngIf="selectedDz"
               matSuffix
               mat-icon-button
               aria-label="Clear"
@@ -115,8 +121,8 @@
               >
               <mat-icon>close</mat-icon>
             </button>
+          }
         </mat-form-field>
-
         <mat-form-field>
           <mat-label>{{ "NewJump_ChooseGear" | translate }}</mat-label>
           <input
@@ -130,12 +136,14 @@
             #autoGear="matAutocomplete"
             [displayWith]="displayGearFn"
             >
-        <mat-option *ngFor="let gear of listOfGear" [value]="gear">
+            @for (gear of listOfGear; track gear) {
+              <mat-option [value]="gear">
                 {{ gear.name }} ({{ gear.mainCanopy }})
               </mat-option>
+            }
           </mat-autocomplete>
+          @if (selectedGear) {
             <button
-        *ngIf="selectedGear"
               matSuffix
               mat-icon-button
               aria-label="Clear"
@@ -143,15 +151,14 @@
               >
               <mat-icon>close</mat-icon>
             </button>
+          }
         </mat-form-field>
-
         <mat-checkbox [(ngModel)]="withCutaway" name="withCutaway">{{
           "NewJump_Cutaway" | translate
         }}</mat-checkbox>
         <mat-checkbox [(ngModel)]="isSpecial" name="isSpecial">{{
           "NewJump_Special" | translate
         }}</mat-checkbox>
-
         <mat-form-field>
           <input
             matInput
@@ -167,7 +174,6 @@
           ></mat-datepicker-toggle>
           <mat-datepicker #beginDateDp disabled="false"></mat-datepicker>
         </mat-form-field>
-
         <mat-form-field>
           <input
             matInput
@@ -182,7 +188,6 @@
           ></mat-datepicker-toggle>
           <mat-datepicker #endDateDp disabled="false"></mat-datepicker>
         </mat-form-field>
-
         <mat-form-field>
           <input
             matInput
@@ -191,8 +196,8 @@
             name="exitAltitude"
             type="number"
             />
+          @if (exitAltitude) {
             <button
-        *ngIf="exitAltitude"
               matSuffix
               mat-icon-button
               aria-label="Clear"
@@ -200,6 +205,7 @@
               >
               <mat-icon>close</mat-icon>
             </button>
+          }
         </mat-form-field>
         <mat-form-field>
           <input
@@ -209,8 +215,8 @@
             name="deployAltitude"
             type="number"
             />
+          @if (deployAltitude) {
             <button
-        *ngIf="deployAltitude"
               matSuffix
               mat-icon-button
               aria-label="Clear"
@@ -218,8 +224,8 @@
               >
               <mat-icon>close</mat-icon>
             </button>
+          }
         </mat-form-field>
-
         <mat-form-field>
           <input
             matInput
@@ -228,8 +234,8 @@
             name="countOfJumps"
             type="number"
             />
+          @if (countOfJumps) {
             <button
-        *ngIf="countOfJumps"
               matSuffix
               mat-icon-button
               aria-label="Clear"
@@ -237,8 +243,8 @@
               >
               <mat-icon>close</mat-icon>
             </button>
+          }
         </mat-form-field>
-
         <mat-form-field>
           <textarea
             matInput
@@ -247,8 +253,8 @@
             name="comments"
             type="text"
           ></textarea>
+          @if (comments) {
             <button
-        *ngIf="comments"
               matSuffix
               mat-icon-button
               aria-label="Clear"
@@ -256,15 +262,17 @@
               >
               <mat-icon>close</mat-icon>
             </button>
+          }
         </mat-form-field>
-
         <br />
-    <button mat-raised-button color="accent" *ngIf="isValidatedForm()">
+        @if (isValidatedForm()) {
+          <button mat-raised-button color="accent">
             {{ "NewJump_Submit" | translate }}
           </button>
+        }
       </form>
-
+    } @else {
-  <ng-template #loading>
       <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-  </ng-template>
+    }
-</div>
+
+  </div>

Front/skydivelogs-app/src/app/new-jump/new-jump.component.ts

@@ -7,7 +7,7 @@ import {
   NativeDateAdapter,
 } from "@angular/material/core";
 import { TranslateModule, TranslateService } from "@ngx-translate/core";
-import { CommonModule } from "@angular/common";
+
 import { MatIconModule } from "@angular/material/icon";
 import { MatOptionModule } from "@angular/material/core";
 import { MatFormFieldModule } from "@angular/material/form-field";
@@ -58,7 +58,6 @@ class PickDateAdapter extends NativeDateAdapter {
   ],
   imports: [
     TranslateModule,
-    CommonModule,
     RouterLink,
     FormsModule,
     RouterModule,
@@ -72,8 +71,8 @@ class PickDateAdapter extends NativeDateAdapter {
     MatFormFieldModule,
     ReactiveFormsModule,
     MatInputModule,
-    MatButtonModule,
+    MatButtonModule
-  ],
+],
 })
 export class NewJumpComponent implements OnInit {
   public beginDate: Date;

Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.html

@@ -11,10 +11,10 @@
     </button>
   </div>
 
+  @if (notLoadingToDisplay()) {
     <form
       class="formNewJumps"
       (ngSubmit)="onFormSubmit()"
-    *ngIf="notLoadingToDisplay(); else loading"
       >
       <mat-form-field>
         <mat-label>{{ "NewTunnelFlight_ChooseJumpType" | translate }}</mat-label>
@@ -29,12 +29,14 @@
           #autoJumpType="matAutocomplete"
           [displayWith]="displayNameFn"
           >
-        <mat-option *ngFor="let jumpType of listOfJumpType" [value]="jumpType">
+          @for (jumpType of listOfJumpType; track jumpType) {
+            <mat-option [value]="jumpType">
               {{ jumpType.name }}
             </mat-option>
+          }
         </mat-autocomplete>
+        @if (selectedJumpType) {
           <button
-        *ngIf="selectedJumpType"
             matSuffix
             mat-icon-button
             aria-label="Clear"
@@ -42,8 +44,8 @@
             >
             <mat-icon>close</mat-icon>
           </button>
+        }
       </mat-form-field>
-
       <mat-form-field>
         <mat-label>{{ "NewTunnelFlight_ChooseTunnel" | translate }}</mat-label>
         <input
@@ -58,15 +60,16 @@
           #autoDropZone="matAutocomplete"
           [displayWith]="displayNameFn"
           >
+          @for (tunnel of listOfFilteredTunnel; track tunnel) {
             <mat-option
-          *ngFor="let tunnel of listOfFilteredTunnel"
               [value]="tunnel"
               >
               {{ tunnel.name }}
             </mat-option>
+          }
         </mat-autocomplete>
+        @if (selectedTunnel) {
           <button
-        *ngIf="selectedTunnel"
             matSuffix
             mat-icon-button
             aria-label="Clear"
@@ -74,8 +77,8 @@
             >
             <mat-icon>close</mat-icon>
           </button>
+        }
       </mat-form-field>
-
       <mat-form-field>
         <mat-label>{{ "NewTunnelFlight_Date_Lbl" | translate }}</mat-label>
         <input
@@ -92,7 +95,6 @@
         ></mat-datepicker-toggle>
         <mat-datepicker #flightDateDp disabled="false"></mat-datepicker>
       </mat-form-field>
-
       <mat-form-field>
         <mat-label>{{ "NewTunnelFlight_Minutes_Lbl" | translate }}</mat-label>
         <input
@@ -102,8 +104,8 @@
           name="minutesOfFlight"
           type="number"
           />
+        @if (minutesOfFlight) {
           <button
-        *ngIf="minutesOfFlight"
             matSuffix
             mat-icon-button
             aria-label="Clear"
@@ -111,8 +113,8 @@
             >
             <mat-icon>close</mat-icon>
           </button>
+        }
       </mat-form-field>
-
       <mat-form-field>
         <mat-label>{{ "NewTunnelFlight_Comments_Lbl" | translate }}</mat-label>
         <textarea
@@ -122,8 +124,8 @@
           name="comments"
           type="text"
         ></textarea>
+        @if (comments) {
           <button
-        *ngIf="comments"
             matSuffix
             mat-icon-button
             aria-label="Clear"
@@ -131,15 +133,17 @@
             >
             <mat-icon>close</mat-icon>
           </button>
+        }
       </mat-form-field>
-
       <br />
-    <button mat-raised-button color="accent" *ngIf="isValidatedForm()">
+      @if (isValidatedForm()) {
+        <button mat-raised-button color="accent">
           {{ "NewTunnelFlight_Submit" | translate }}
         </button>
+      }
     </form>
-
+  } @else {
-  <ng-template #loading>
     <mat-progress-spinner [mode]="'indeterminate'"></mat-progress-spinner>
-  </ng-template>
+  }
+
 </div>

Front/skydivelogs-app/src/app/new-tunnel-flight/new-tunnel-flight.component.ts

@@ -7,7 +7,7 @@ import {
   NativeDateAdapter,
 } from "@angular/material/core";
 import { TranslateModule, TranslateService } from "@ngx-translate/core";
-import { CommonModule } from "@angular/common";
+
 import { MatIconModule } from "@angular/material/icon";
 import { MatOptionModule } from "@angular/material/core";
 import { MatAutocompleteModule } from "@angular/material/autocomplete";
@@ -52,7 +52,6 @@ class PickDateAdapter extends NativeDateAdapter {
   ],
   imports: [
     TranslateModule,
-    CommonModule,
     RouterModule,
     RouterLink,
     FormsModule,
@@ -65,8 +64,8 @@ class PickDateAdapter extends NativeDateAdapter {
     MatFormFieldModule,
     MatOptionModule,
     MatDatepickerModule,
-    MatProgressSpinnerModule,
+    MatProgressSpinnerModule
-  ],
+],
 })
 export class NewTunnelFlightComponent implements OnInit {
   public flightDate: Date;