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/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'
 })