Cambiada la plantilla client-details por la nueva sintaxis angular @if, @for...

ogWebconsole/src/app/components/groups/shared/client-details/client-details.component.html

@@ -1,7 +1,8 @@
 <mat-dialog-content class="modal-content">
   <app-loading [isLoading]="loading"></app-loading>
 
-  <div class="client-container" *ngIf="!loading">
+  @if (!loading) {
+  <div class="client-container">
     <div class="header-container">
       <h2 class="title">{{ 'clientDetailsTitle' | translate }} {{ clientData.name }}</h2>
     </div>
@@ -9,23 +10,29 @@
     <div class="client-info-card">
       <div class="info-columns">
         <div class="info-column">
-          <div class="info-pair" *ngFor="let data of generalData">
+          @for (data of generalData; track data) {
+          <div class="info-pair">
             <div class="label">{{ data?.property }}</div>
             <div class="value">{{ data?.value || '--' }}</div>
           </div>
+          }
         </div>
         <div class="info-column">
-          <div class="info-pair" *ngFor="let data of networkData">
+          @for (data of networkData; track data) {
+          <div class="info-pair">
             <div class="label">{{ data?.property }}</div>
             <div class="value">{{ data?.value || '--' }}</div>
           </div>
+          }
         </div>
       </div>
     </div>
 
     <div class="table-header-container">
       <h2 i18n="@@adminImagesTitle">Discos/Particiones</h2>
-      <mat-chip *ngIf="clientData.firmwareType"> {{ clientData.firmwareType }}</mat-chip>
+      @if (clientData.firmwareType) {
+      <mat-chip> {{ clientData.firmwareType }}</mat-chip>
+      }
     </div>
 
 
@@ -33,35 +40,42 @@
       <div class="disk-layout">
         <div class="table-container">
           <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
-            <ng-container *ngFor="let column of columns" [matColumnDef]="column.columnDef">
+            @for (column of columns; track column.columnDef) {
+            <ng-container [matColumnDef]="column.columnDef">
               <th mat-header-cell *matHeaderCellDef> {{ column.header }} </th>
               <td mat-cell *matCellDef="let image">
-                <ng-container *ngIf="column.columnDef !== 'size' && column.columnDef !== 'operativeSystem'">
+                @if (column.columnDef !== 'size' && column.columnDef !== 'operativeSystem') {
                   {{ column.cell(image) }}
-                </ng-container>
-                <ng-container *ngIf="column.columnDef === 'size'">
+                }
+                @if (column.columnDef === 'size') {
                   <mat-chip color="primary">
                     {{ (image.size / 1024).toFixed(2) }} GB
                   </mat-chip>
-                </ng-container>
+                }
 
-                <ng-container *ngIf="column.columnDef === 'operativeSystem'">
+                @if (column.columnDef === 'operativeSystem') {
                   <div style="display: flex; flex-direction: column;">
-                    <div *ngIf="image.filesystem === 'CACHE' && image.cacheContent">
+                    @if (image.filesystem === 'CACHE' && image.cacheContent) {
+                    <div>
                       <span style="font-weight: bold; font-size: 0.8rem; color: #666;">Contenido:</span>
-                      <div *ngFor="let item of parseCacheContent(image.cacheContent)"
-                        style="font-size: 0.75rem; color: #666;">
+                      @for (item of parseCacheContent(image.cacheContent); track item.name) {
+                      <div style="font-size: 0.75rem; color: #666;">
                         • {{ item.name }} ({{ item.size }})
                       </div>
+                      }
                     </div>
-                    <div *ngIf="image.filesystem !== 'CACHE' || !image.cacheContent">
+                    }
+                    @if (image.filesystem !== 'CACHE' || !image.cacheContent) {
+                    <div>
                       <span>{{image.operativeSystem?.name }}</span>
                       <span style="font-size: 0.75rem; color: gray;">{{ image.image?.name }}</span>
                     </div>
+                    }
                   </div>
-                </ng-container>
+                }
               </td>
             </ng-container>
+            }
 
             <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
 
@@ -73,19 +87,24 @@
         </div>
 
         <div class="charts-container" [ngClass]="{'single-disk': chartDisk.length === 1}">
-          <ng-container *ngIf="diskUsageData && diskUsageData.length > 0">
-            <div *ngFor="let disk of chartDisk" class="disk-usage">
+          @if (diskUsageData && diskUsageData.length > 0) {
+          <ng-container>
+            @for (disk of chartDisk; track disk.diskNumber) {
+            <div class="disk-usage">
               <ngx-charts-pie-chart class="chart" [view]="view" [results]="disk.chartData" [doughnut]="true">
               </ngx-charts-pie-chart>
               <h3>Disco {{ disk.diskNumber }}</h3>
               <p>Usado: {{ (disk.used).toFixed(2) }} GB ({{ disk.percentage }}%)</p>
               <p>Total: {{ disk.total }} GB</p>
             </div>
+            }
           </ng-container>
+          }
         </div>
       </div>
     </div>
   </div>
+  }
 </mat-dialog-content>
 <mat-dialog-actions class="action-container">
   <button class="ordinary-button" (click)="onNoClick()">{{ 'closeButton' | translate }}</button>