Replace deprecated Angular directives (*ngFor, *ngIf) with modern Angular template syntax. Remove unused CommonModule imports across components for optimization. Clean up excess spacing and formatting in HTML files.

frontend/src/app/pages/particles/components/frames/frames.component.html

@@ -6,36 +6,42 @@
     <mat-card-content>
       <div class="frames-container">
         <mat-tab-group [selectedIndex]="frames.indexOf(currentFrame)"
-                       (selectedIndexChange)="switchFrame(frames[$event])">
-          <mat-tab *ngFor="let frameId of frames" [label]="frameId">
-            <div class="frame-content">
-              <h3>Particles in {{ frameId }}</h3>
-              <div class="particles-list">
-                <div *ngFor="let particle of particleData.frames[frameId]; let i = index" class="particle-item">
-                <span class="particle-item-text">
-                  Particle {{ i + 1 }}: ({{ particle.x.toFixed(2) }}, {{ particle.y.toFixed(2) }}
-                  , {{ particle.z.toFixed(2) }})
-                </span>
-                  <button mat-icon-button (click)="removeParticle(frameId, i)">
-                    <mat-icon>delete</mat-icon>
-                  </button>
-                  <button mat-icon-button (click)="highlightParticle(frameId, i)">
-                    <mat-icon>lightbulb</mat-icon>
+          (selectedIndexChange)="switchFrame(frames[$event])">
+          @for (frameId of frames; track frameId) {
+            <mat-tab [label]="frameId">
+              <div class="frame-content">
+                <h3>Particles in {{ frameId }}</h3>
+                <div class="particles-list">
+                  @for (particle of particleData.frames[frameId]; track particle; let i = $index) {
+                    <div class="particle-item">
+                      <span class="particle-item-text">
+                        Particle {{ i + 1 }}: ({{ particle.x.toFixed(2) }}, {{ particle.y.toFixed(2) }}
+                        , {{ particle.z.toFixed(2) }})
+                      </span>
+                      <button mat-icon-button (click)="removeParticle(frameId, i)">
+                        <mat-icon>delete</mat-icon>
+                      </button>
+                      <button mat-icon-button (click)="highlightParticle(frameId, i)">
+                        <mat-icon>lightbulb</mat-icon>
+                      </button>
+                    </div>
+                  }
+                  @if (!particleData.frames[frameId] || particleData.frames[frameId].length === 0) {
+                    <div
+                      class="no-particles">
+                      No particles in this frame. Click on the plane to add particles.
+                    </div>
+                  }
+                </div>
+                <div class="frame-actions">
+                  <button mat-raised-button color="warn" (click)="removeFrame(frameId)"
+                    [disabled]="frames.length <= 1">
+                    Remove Frame
                   </button>
                 </div>
-                <div *ngIf="!particleData.frames[frameId] || particleData.frames[frameId].length === 0"
-                     class="no-particles">
-                  No particles in this frame. Click on the plane to add particles.
-                </div>
               </div>
-              <div class="frame-actions">
-                <button mat-raised-button color="warn" (click)="removeFrame(frameId)"
-                        [disabled]="frames.length <= 1">
-                  Remove Frame
-                </button>
-              </div>
-            </div>
-          </mat-tab>
+            </mat-tab>
+          }
         </mat-tab-group>
         <div class="add-frame">
           <button mat-raised-button color="primary" (click)="addFrame()">

frontend/src/app/pages/particles/components/frames/frames.component.ts

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {MatButton, MatIconButton} from "@angular/material/button";
 import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from "@angular/material/card";
 import {MatTab, MatTabGroup} from "@angular/material/tabs";
-import {NgForOf, NgIf} from "@angular/common";
+
 import {ParticleData} from '../../models/particle.model';
 import {MatIcon} from '@angular/material/icon';
 import {ParticleManagerService} from '../../services/particle-manager.service';
@@ -19,10 +19,8 @@ import {FrameManagerService} from '../../services/frame-manager.service';
     MatIcon,
     MatIconButton,
     MatTab,
-    MatTabGroup,
-    NgForOf,
-    NgIf
-  ],
+    MatTabGroup
+],
   templateUrl: './frames.component.html',
   styleUrl: './frames.component.scss'
 })

frontend/src/app/pages/particles/components/particle/particle.component.html

@@ -13,25 +13,27 @@
           <mat-form-field appearance="fill" class="type-field">
             <mat-label>Select Particle Type</mat-label>
             <input type="text"
-                   placeholder="Search for a particle type"
-                   matInput
-                   [formControl]="particleTypeControl"
-                   [matAutocomplete]="auto">
-            <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
-              <mat-option *ngFor="let type of filteredParticleTypes | async" [value]="type">
-                {{ type }}
-              </mat-option>
-            </mat-autocomplete>
-          </mat-form-field>
-        </div>
+              placeholder="Search for a particle type"
+              matInput
+              [formControl]="particleTypeControl"
+              [matAutocomplete]="auto">
+              <mat-autocomplete #auto="matAutocomplete" [displayWith]="displayFn">
+                @for (type of filteredParticleTypes | async; track type) {
+                  <mat-option [value]="type">
+                    {{ type }}
+                  </mat-option>
+                }
+              </mat-autocomplete>
+            </mat-form-field>
+          </div>
 
-        <div class="size-slider">
-          <mat-slider min="0.1" max="4" step="0.1" class="full-width">
-            <input matSliderThumb [(ngModel)]="selectedSize">
-          </mat-slider>
-          <span>Size: {{ selectedSize }}</span>
+          <div class="size-slider">
+            <mat-slider min="0.1" max="4" step="0.1" class="full-width">
+              <input matSliderThumb [(ngModel)]="selectedSize">
+            </mat-slider>
+            <span>Size: {{ selectedSize }}</span>
+          </div>
         </div>
-      </div>
-    </mat-card-content>
-  </mat-card>
-</div>
+      </mat-card-content>
+    </mat-card>
+  </div>

frontend/src/app/pages/particles/components/particle/particle.component.ts

@@ -10,7 +10,7 @@ import {MatInputModule} from '@angular/material/input';
 import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {Observable} from 'rxjs';
 import {map, startWith} from 'rxjs/operators';
-import {AsyncPipe, NgForOf} from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 
 @Component({
   selector: 'app-particle',
@@ -26,9 +26,8 @@ import {AsyncPipe, NgForOf} from '@angular/common';
     MatFormFieldModule,
     MatInputModule,
     MatAutocompleteModule,
-    NgForOf,
     AsyncPipe
-  ],
+],
   templateUrl: './particle.component.html',
   styleUrl: './particle.component.scss'
 })

frontend/src/app/pages/particles/components/properties/properties.component.html

@@ -22,7 +22,9 @@
         <mat-form-field appearance="outline">
           <mat-label>Particle Type</mat-label>
           <mat-select [(ngModel)]="particleData.particle_type">
-            <mat-option *ngFor="let type of particleTypes" [value]="type">{{ type }}</mat-option>
+            @for (type of particleTypes; track type) {
+              <mat-option [value]="type">{{ type }}</mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </div>
@@ -73,21 +75,21 @@
         <mat-form-field appearance="outline">
           <mat-label>Repeat Delay</mat-label>
           <input matInput type="number" [(ngModel)]="particleData.repeat_delay"
-                 placeholder="Enter repeat delay">
-        </mat-form-field>
-      </div>
+            placeholder="Enter repeat delay">
+          </mat-form-field>
+        </div>
 
-      <div class="form-row">
-        <mat-form-field appearance="outline">
-          <mat-label>Random Offset</mat-label>
-          <input matInput type="number" [(ngModel)]="particleData.random_offset"
-                 placeholder="Enter random offset">
-        </mat-form-field>
-      </div>
+        <div class="form-row">
+          <mat-form-field appearance="outline">
+            <mat-label>Random Offset</mat-label>
+            <input matInput type="number" [(ngModel)]="particleData.random_offset"
+              placeholder="Enter random offset">
+            </mat-form-field>
+          </div>
 
-      <div class="form-row">
-        <mat-checkbox [(ngModel)]="particleData.stationary"><span>Stationary</span></mat-checkbox>
-      </div>
-    </mat-card-content>
-  </mat-card>
-</div>
+          <div class="form-row">
+            <mat-checkbox [(ngModel)]="particleData.stationary"><span>Stationary</span></mat-checkbox>
+          </div>
+        </mat-card-content>
+      </mat-card>
+    </div>

frontend/src/app/pages/particles/components/properties/properties.component.ts

@@ -2,7 +2,7 @@ import {Component} from '@angular/core';
 import {MatCard, MatCardContent, MatCardHeader, MatCardTitle} from "@angular/material/card";
 import {MatCheckbox} from "@angular/material/checkbox";
 import {MatFormField, MatInput, MatLabel} from "@angular/material/input";
-import {NgForOf} from "@angular/common";
+
 import {FormsModule, ReactiveFormsModule} from "@angular/forms";
 import {ParticleData, ParticleType} from '../../models/particle.model';
 import {MatSelect} from '@angular/material/select';
@@ -22,10 +22,9 @@ import {ParticleManagerService} from '../../services/particle-manager.service';
     MatLabel,
     MatOption,
     MatSelect,
-    NgForOf,
     ReactiveFormsModule,
     FormsModule
-  ],
+],
   templateUrl: './properties.component.html',
   styleUrl: './properties.component.scss'
 })

frontend/src/app/pages/particles/components/render-container/render-container.component.html

@@ -8,47 +8,49 @@
     </div>
     <div class="button-row">
       <button mat-mini-fab color="primary" (click)="resetCamera()"
-              matTooltip="Reset camera">
+        matTooltip="Reset camera">
         <mat-icon>location_searching</mat-icon>
       </button>
 
       <button mat-mini-fab color="primary" (click)="togglePlaneLock()"
-              [matTooltip]="isPlaneLocked ? 'Unlock Plane' : 'Lock Plane'">
+        [matTooltip]="isPlaneLocked ? 'Unlock Plane' : 'Lock Plane'">
         <mat-icon>{{ isPlaneLocked ? 'lock' : 'lock_open' }}</mat-icon>
       </button>
     </div>
 
-    <div *ngIf="isPlaneLocked" class="plane-orientation-buttons">
-      <button mat-mini-fab color="warn" (click)="setPlaneOrientation(planeOrientations.VERTICAL_ABOVE)"
-              [class.active]="currentPlaneOrientation === planeOrientations.VERTICAL_ABOVE"
-              matTooltip="Vertical Above">
-        <mat-icon>arrow_upward</mat-icon>
-      </button>
-      <button mat-mini-fab color="warn" (click)="setPlaneOrientation(planeOrientations.VERTICAL_BELOW)"
-              [class.active]="currentPlaneOrientation === planeOrientations.VERTICAL_BELOW"
-              matTooltip="Vertical Below">
-        <mat-icon>arrow_downward</mat-icon>
-      </button>
-      <button mat-mini-fab color="primary" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_FRONT)"
-              [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_FRONT"
-              matTooltip="Horizontal Front">
-        <mat-icon>arrow_forward</mat-icon>
-      </button>
-      <button mat-mini-fab color="primary" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_BEHIND)"
-              [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_BEHIND"
-              matTooltip="Horizontal Behind">
-        <mat-icon>arrow_back</mat-icon>
-      </button>
-      <button mat-mini-fab color="accent" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_RIGHT)"
-              [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_RIGHT"
-              matTooltip="Horizontal Right">
-        <mat-icon>arrow_right</mat-icon>
-      </button>
-      <button mat-mini-fab color="accent" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_LEFT)"
-              [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_LEFT"
-              matTooltip="Horizontal Left">
-        <mat-icon>arrow_left</mat-icon>
-      </button>
-    </div>
+    @if (isPlaneLocked) {
+      <div class="plane-orientation-buttons">
+        <button mat-mini-fab color="warn" (click)="setPlaneOrientation(planeOrientations.VERTICAL_ABOVE)"
+          [class.active]="currentPlaneOrientation === planeOrientations.VERTICAL_ABOVE"
+          matTooltip="Vertical Above">
+          <mat-icon>arrow_upward</mat-icon>
+        </button>
+        <button mat-mini-fab color="warn" (click)="setPlaneOrientation(planeOrientations.VERTICAL_BELOW)"
+          [class.active]="currentPlaneOrientation === planeOrientations.VERTICAL_BELOW"
+          matTooltip="Vertical Below">
+          <mat-icon>arrow_downward</mat-icon>
+        </button>
+        <button mat-mini-fab color="primary" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_FRONT)"
+          [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_FRONT"
+          matTooltip="Horizontal Front">
+          <mat-icon>arrow_forward</mat-icon>
+        </button>
+        <button mat-mini-fab color="primary" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_BEHIND)"
+          [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_BEHIND"
+          matTooltip="Horizontal Behind">
+          <mat-icon>arrow_back</mat-icon>
+        </button>
+        <button mat-mini-fab color="accent" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_RIGHT)"
+          [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_RIGHT"
+          matTooltip="Horizontal Right">
+          <mat-icon>arrow_right</mat-icon>
+        </button>
+        <button mat-mini-fab color="accent" (click)="setPlaneOrientation(planeOrientations.HORIZONTAL_LEFT)"
+          [class.active]="currentPlaneOrientation === planeOrientations.HORIZONTAL_LEFT"
+          matTooltip="Horizontal Left">
+          <mat-icon>arrow_left</mat-icon>
+        </button>
+      </div>
+    }
   </div>
 </div>

frontend/src/app/pages/particles/components/render-container/render-container.component.ts

@@ -1,6 +1,6 @@
 import {AfterViewInit, Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
 import {MatMiniFabButton} from '@angular/material/button';
-import {NgIf} from '@angular/common';
+
 import {IntersectionPlaneService, PlaneOrientation} from '../../services/intersection-plane.service';
 import {MatIcon} from '@angular/material/icon';
 import {MatTooltip} from '@angular/material/tooltip';
@@ -16,12 +16,11 @@ import {MatFormField, MatInput, MatLabel} from '@angular/material/input';
     MatIcon,
     MatMiniFabButton,
     MatTooltip,
-    NgIf,
     FormsModule,
     MatInput,
     MatFormField,
     MatLabel
-  ],
+],
   templateUrl: './render-container.component.html',
   styleUrl: './render-container.component.scss'
 })