refactor: migrate *ngFor to @for in add-user-modal template

ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.html

@@ -15,36 +15,44 @@
     <mat-form-field appearance="fill" class="full-width">
       <mat-label>{{ 'labelRole' | translate }}</mat-label>
       <mat-select formControlName="role" required>
-        <mat-option *ngFor="let group of userGroups" [value]="group['@id']">
-          {{ group.name }}
-        </mat-option>
+        @for (group of userGroups; track group['@id']) {
+          <mat-option [value]="group['@id']">
+            {{ group.name }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
     <mat-form-field appearance="fill" class="full-width">
       <mat-label>{{ 'labelOrganizationalUnit' | translate }}</mat-label>
       <mat-select multiple formControlName="organizationalUnits">
-        <mat-option *ngFor="let unit of organizationalUnits" [value]="unit['@id']">
-          {{ unit.name }}
-        </mat-option>
+        @for (unit of organizationalUnits; track unit['@id']) {
+          <mat-option [value]="unit['@id']">
+            {{ unit.name }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
     <mat-form-field appearance="fill" class="full-width">
       <mat-label>{{ 'cardView' | translate }}</mat-label>
       <mat-select formControlName="groupsView" required>
-        <mat-option *ngFor="let option of views" [value]="option.value">
-          {{ option.name }}
-        </mat-option>
+        @for (option of views; track option.value) {
+          <mat-option [value]="option.value">
+            {{ option.name }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
     <mat-form-field appearance="fill" class="full-width">
       <mat-label>{{ 'userLanguage' | translate }}</mat-label>
       <mat-select formControlName="language">
-        <mat-option *ngFor="let lang of availableLanguages" [value]="lang.code">
-          {{ lang.label }}
-        </mat-option>
+        @for (lang of availableLanguages; track lang.code) {
+          <mat-option [value]="lang.code">
+            {{ lang.label }}
+          </mat-option>
+        }
       </mat-select>
       <mat-hint>{{ 'userLanguageHint' | translate }}</mat-hint>
     </mat-form-field>

ogWebconsole/src/app/components/admin/users/users/add-user-modal/add-user-modal.component.ts

@@ -36,10 +36,7 @@ export class AddUserModalComponent implements OnInit {
     { value: 'list', name: 'Listado' },
   ];
 
-  get availableLanguages() {
-    const langs = this.configService.languages;
-    return Object.keys(langs).map(code => ({ code, label: langs[code] }));
-  }
+  readonly availableLanguages: { code: string; label: string }[];
 
   constructor(
     public dialogRef: MatDialogRef<AddUserModalComponent>,
@@ -51,6 +48,8 @@ export class AddUserModalComponent implements OnInit {
     private configService: ConfigService
   ) {
     this.baseUrl = this.configService.apiUrl;
+    const langs = this.configService.languages;
+    this.availableLanguages = Object.keys(langs).map(code => ({ code, label: langs[code] }));
     this.userForm = this.fb.group({
       username: ['', Validators.required],
       password: ['', Validators.required],