Upgrading to Angular 20:

Replaced checked in package-lock.json by regenerated one.
Ran ng update @angular/core@20 @angular/cli@20
Ran npm install @angular-builders/jest@^20.0.0 @fortawesome/angular-fontawesome@^3.0.0 @swimlane/ngx-graph@^11
Ran npm install ngx-mat-select-search@^8.0.2.
Ran ng update @angular/material@20.
Updated all eslint and typescript to the latest versions.
Removed @angular-devkit/schematics.
Updated fontawesome.
Updated rxjs and tslib.
Moved required node version from 16 to 20.
Updated jest-preset-angular.
Set preserveWhitespaces to false.
Corrected two type declarations in two typescript files to make ng serve run without errors.
Removed unused angular-devkit/schematics from view-user.component.ts .
Updated list of supported browsers.
Upgraded prettier.
Ran prettier . --write the first time.
Ran prettier . --write the second time.
Ran ng generate @angular/core:inject with defaults, excepted a handful of files.
Fixed remaining eslint problems.
Added dist directory to ignores in eslint.config.js.
Let prettier fix formatting, almost everything is just line breaks.
Made htmlhint ignore @if and @for Angular constructs.
Updated node version in Github workflow to 22.12.0 (build.yml).
Updated .env.ts.
Updated Angular datetime format strings from YYYY-MM-DD to yyyy-MM-dd.
Merged changes from dev into angular20 branch.

src/app/groups/groups-view/group-actions/activate-group/activate-group.component.html

@@ -14,10 +14,12 @@
           />
           <mat-datepicker-toggle matSuffix [for]="activationDatePicker"></mat-datepicker-toggle>
           <mat-datepicker #activationDatePicker></mat-datepicker>
-          <mat-error *ngIf="activateGroupForm.controls.activationDate.hasError('required')">
-            {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
-            <strong>{{ 'labels.commons.required' | translate }}</strong>
-          </mat-error>
+          @if (activateGroupForm.controls.activationDate.hasError('required')) {
+            <mat-error>
+              {{ 'labels.inputs.Activated On Date' | translate }} {{ 'labels.commons.is' | translate }}
+              <strong>{{ 'labels.commons.required' | translate }}</strong>
+            </mat-error>
+          }
         </mat-form-field>
       </mat-card-content>
 

src/app/groups/groups-view/group-actions/activate-group/activate-group.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
@@ -21,6 +21,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ActivateGroupComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private groupsService = inject(GroupsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum date allowed. */
@@ -38,14 +45,7 @@ export class ActivateGroupComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService SettingsService
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private groupsService: GroupsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.groupId = this.route.parent.snapshot.params['groupId'];
   }
 

src/app/groups/groups-view/group-actions/attach-group-meeting/attach-group-meeting.component.html

@@ -15,54 +15,74 @@
             />
             <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #startDatePicker></mat-datepicker>
-            <mat-error *ngIf="groupMeetingForm.controls.startDate.hasError('required')">
-              {{ 'labels.inputs.Start Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (groupMeetingForm.controls.startDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Start Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-checkbox class="m-t-10 m-b-10" labelPosition="before" formControlName="repeating">
             {{ 'labels.inputs.Repeats' | translate }}?
           </mat-checkbox>
 
-          <mat-form-field *ngIf="groupMeetingForm.contains('frequency')">
-            <mat-label>{{ 'labels.inputs.Repetition Frequency' | translate }}</mat-label>
-            <mat-select formControlName="frequency">
-              <mat-option *ngFor="let option of frequencyOptions" [value]="option.id">
-                {{ option.value }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="groupMeetingForm.controls.frequency.hasError('repeatsOnDay')">
-              {{ 'labels.inputs.Repetition Frequency' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (groupMeetingForm.contains('frequency')) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Repetition Frequency' | translate }}</mat-label>
+              <mat-select formControlName="frequency">
+                @for (option of frequencyOptions; track option) {
+                  <mat-option [value]="option.id">
+                    {{ option.value }}
+                  </mat-option>
+                }
+              </mat-select>
+              @if (groupMeetingForm.controls.frequency.hasError('repeatsOnDay')) {
+                <mat-error>
+                  {{ 'labels.inputs.Repetition Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
-          <mat-form-field *ngIf="groupMeetingForm.contains('interval')">
-            <mat-label>{{ 'labels.inputs.Repetition Interval' | translate }}</mat-label>
-            <mat-select formControlName="interval">
-              <mat-option *ngFor="let interval of repetitionIntervals" [value]="interval">
-                {{ interval }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="groupMeetingForm.controls.interval.hasError('repeatsOnDay')">
-              {{ 'labels.inputs.Repeition Interval' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
-          </mat-form-field>
+          @if (groupMeetingForm.contains('interval')) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Repetition Interval' | translate }}</mat-label>
+              <mat-select formControlName="interval">
+                @for (interval of repetitionIntervals; track interval) {
+                  <mat-option [value]="interval">
+                    {{ interval }}
+                  </mat-option>
+                }
+              </mat-select>
+              @if (groupMeetingForm.controls.interval.hasError('repeatsOnDay')) {
+                <mat-error>
+                  {{ 'labels.inputs.Repeition Interval' | translate }} {{ 'labels.commons.is' | translate }}
+                  <strong>{{ 'labels.commons.required' | translate }}</strong>
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
-          <mat-form-field *ngIf="groupMeetingForm.contains('repeatsOnDay')">
-            <mat-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
-            <mat-select formControlName="repeatsOnDay" required>
-              <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
-                {{ day.value }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="groupMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
-              {{ 'labels.inputs.At least' | translate }} <strong>{{ 'labels.inputs.one' | translate }}</strong>
-              {{ 'labels.inputs.day must be selected' | translate }}
-            </mat-error>
-          </mat-form-field>
+          @if (groupMeetingForm.contains('repeatsOnDay')) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
+              <mat-select formControlName="repeatsOnDay" required>
+                @for (day of repeatsOnDays; track day) {
+                  <mat-option [value]="day.id">
+                    {{ day.value }}
+                  </mat-option>
+                }
+              </mat-select>
+              @if (groupMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')) {
+                <mat-error>
+                  {{ 'labels.inputs.At least' | translate }} <strong>{{ 'labels.inputs.one' | translate }}</strong>
+                  {{ 'labels.inputs.day must be selected' | translate }}
+                </mat-error>
+              }
+            </mat-form-field>
+          }
         </div>
       </mat-card-content>
 

src/app/groups/groups-view/group-actions/attach-group-meeting/attach-group-meeting.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   UntypedFormGroup,
   UntypedFormBuilder,
@@ -29,6 +29,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class AttachGroupMeetingComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private groupsService = inject(GroupsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum date allowed. */
@@ -55,14 +62,7 @@ export class AttachGroupMeetingComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService SettingsService
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private groupsService: GroupsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { groupActionData: any }) => {
       this.calendarTemplate = data.groupActionData;
       this.frequencyOptions = this.calendarTemplate.frequencyOptions;

src/app/groups/groups-view/group-actions/close-group/close-group.component.html

@@ -15,23 +15,29 @@
             />
             <mat-datepicker-toggle matSuffix [for]="closureDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #closureDatePicker></mat-datepicker>
-            <mat-error *ngIf="closeGroupForm.controls.closureDate.hasError('required')">
-              {{ 'labels.inputs.Closed On Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (closeGroupForm.controls.closureDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Closed On Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Closure Reason' | translate }}</mat-label>
             <mat-select formControlName="closureReasonId">
-              <mat-option *ngFor="let reason of closureData" [value]="reason.id">
-                {{ reason.name }}
-              </mat-option>
+              @for (reason of closureData; track reason) {
+                <mat-option [value]="reason.id">
+                  {{ reason.name }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="closeGroupForm.controls.closureReasonId.hasError('required')">
-              {{ 'labels.inputs.Closure Reason' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (closeGroupForm.controls.closureReasonId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Closure Reason' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
       </mat-card-content>

src/app/groups/groups-view/group-actions/close-group/close-group.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
@@ -21,6 +21,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class CloseGroupComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private groupsService = inject(GroupsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum date allowed. */
@@ -40,14 +47,7 @@ export class CloseGroupComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService SettingsService
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private groupsService: GroupsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { groupActionData: any }) => {
       this.closureData = data.groupActionData.closureReasons;
     });

src/app/groups/groups-view/group-actions/edit-group-meeting-schedule/edit-group-meeting-schedule.component.html

@@ -6,14 +6,18 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Existing Meeting Date' | translate }}</mat-label>
             <mat-select formControlName="presentMeetingDate">
-              <mat-option *ngFor="let date of nextMeetingDates" [value]="date">
-                {{ date | dateFormat }}
-              </mat-option>
+              @for (date of nextMeetingDates; track date) {
+                <mat-option [value]="date">
+                  {{ date | dateFormat }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="groupEditMeetingScheduleForm.controls.presentMeetingDate.hasError('repeatsOnDay')">
-              {{ 'labels.inputs.Existing Meeting Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (groupEditMeetingScheduleForm.controls.presentMeetingDate.hasError('repeatsOnDay')) {
+              <mat-error>
+                {{ 'labels.inputs.Existing Meeting Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field (click)="newMeetingDatePicker.open()">
@@ -28,10 +32,12 @@
             />
             <mat-datepicker-toggle matSuffix [for]="newMeetingDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #newMeetingDatePicker></mat-datepicker>
-            <mat-error *ngIf="groupEditMeetingScheduleForm.controls.newMeetingDate.hasError('required')">
-              {{ 'labels.inputs.Revised Meeting Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (groupEditMeetingScheduleForm.controls.newMeetingDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Revised Meeting Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
       </mat-card-content>

src/app/groups/groups-view/group-actions/edit-group-meeting-schedule/edit-group-meeting-schedule.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, FormControl, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { Dates } from 'app/core/utils/dates';
@@ -23,6 +23,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditGroupMeetingScheduleComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private groupsService = inject(GroupsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum date allowed. */
@@ -47,14 +54,7 @@ export class EditGroupMeetingScheduleComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService SettingsService
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private groupsService: GroupsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { groupActionData: any }) => {
       this.calendarTemplate = data.groupActionData;
       this.nextMeetingDates = this.calendarTemplate.nextTenRecurringDates;

src/app/groups/groups-view/group-actions/edit-group-meeting/edit-group-meeting.component.html

@@ -13,41 +13,55 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Repetition Frequency' | translate }}</mat-label>
             <mat-select formControlName="frequency">
-              <mat-option *ngFor="let option of frequencyOptions" [value]="option.id">
-                {{ option.value }}
-              </mat-option>
+              @for (option of frequencyOptions; track option) {
+                <mat-option [value]="option.id">
+                  {{ option.value }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="groupEditMeetingForm.controls.frequency.hasError('repeatsOnDay')">
-              {{ 'labels.inputs.Repetition Frequency' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (groupEditMeetingForm.controls.frequency.hasError('repeatsOnDay')) {
+              <mat-error>
+                {{ 'labels.inputs.Repetition Frequency' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Repetition Interval' | translate }}</mat-label>
             <mat-select formControlName="interval">
-              <mat-option *ngFor="let interval of repetitionIntervals" [value]="interval">
-                {{ interval }}
-              </mat-option>
+              @for (interval of repetitionIntervals; track interval) {
+                <mat-option [value]="interval">
+                  {{ interval }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="groupEditMeetingForm.controls.interval.hasError('repeatsOnDay')">
-              {{ 'labels.inputs.Repeition Interval' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (groupEditMeetingForm.controls.interval.hasError('repeatsOnDay')) {
+              <mat-error>
+                {{ 'labels.inputs.Repeition Interval' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
 
-          <mat-form-field *ngIf="groupEditMeetingForm.contains('repeatsOnDay')">
-            <mat-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
-            <mat-select formControlName="repeatsOnDay" required>
-              <mat-option *ngFor="let day of repeatsOnDays" [value]="day.id">
-                {{ day.value }}
-              </mat-option>
-            </mat-select>
-            <mat-error *ngIf="groupEditMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')">
-              {{ 'labels.inputs.At least' | translate }} <strong>{{ 'labels.inputs.one' | translate }}</strong>
-              {{ 'labels.inputs.day must be selected' | translate }}
-            </mat-error>
-          </mat-form-field>
+          @if (groupEditMeetingForm.contains('repeatsOnDay')) {
+            <mat-form-field>
+              <mat-label>{{ 'labels.inputs.Repeats on Day' | translate }}</mat-label>
+              <mat-select formControlName="repeatsOnDay" required>
+                @for (day of repeatsOnDays; track day) {
+                  <mat-option [value]="day.id">
+                    {{ day.value }}
+                  </mat-option>
+                }
+              </mat-select>
+              @if (groupEditMeetingForm.controls.repeatsOnDay.hasError('repeatsOnDay')) {
+                <mat-error>
+                  {{ 'labels.inputs.At least' | translate }} <strong>{{ 'labels.inputs.one' | translate }}</strong>
+                  {{ 'labels.inputs.day must be selected' | translate }}
+                </mat-error>
+              }
+            </mat-form-field>
+          }
 
           <mat-form-field class="m-b-5" (click)="startDatePicker.open()">
             <mat-label>{{ 'labels.inputs.Above Changes are Effective from' | translate }}</mat-label>
@@ -61,10 +75,12 @@
             />
             <mat-datepicker-toggle matSuffix [for]="startDatePicker"></mat-datepicker-toggle>
             <mat-datepicker #startDatePicker></mat-datepicker>
-            <mat-error *ngIf="groupEditMeetingForm.controls.startDate.hasError('required')">
-              {{ 'labels.inputs.Changes Affection Date' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (groupEditMeetingForm.controls.startDate.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Changes Affection Date' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
             <mat-hint>
               {{ "labels.text.Repeats' and 'Repeats every" | translate }}
             </mat-hint>

src/app/groups/groups-view/group-actions/edit-group-meeting/edit-group-meeting.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   UntypedFormGroup,
   UntypedFormBuilder,
@@ -31,6 +31,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class EditGroupMeetingComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private groupsService = inject(GroupsService);
+  private dateUtils = inject(Dates);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private settingsService = inject(SettingsService);
+
   /** Minimum date allowed. */
   minDate = new Date(2000, 0, 1);
   /** Maximum date allowed. */
@@ -59,14 +66,7 @@ export class EditGroupMeetingComponent implements OnInit {
    * @param {Router} router Router
    * @param {SettingsService} settingsService SettingsService
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private groupsService: GroupsService,
-    private dateUtils: Dates,
-    private route: ActivatedRoute,
-    private router: Router,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { groupActionData: any }) => {
       this.calendarTemplate = data.groupActionData;
       this.frequencyOptions = this.calendarTemplate.frequencyOptions;

src/app/groups/groups-view/group-actions/group-actions.component.html

@@ -1,9 +1,27 @@
-<mifosx-group-assign-staff *ngIf="actions['Assign Staff']"></mifosx-group-assign-staff>
-<mifosx-close-group *ngIf="actions['Close']"></mifosx-close-group>
-<mifosx-activate-group *ngIf="actions['Activate']"></mifosx-activate-group>
-<mifosx-attach-group-meeting *ngIf="actions['Attach Meeting']"></mifosx-attach-group-meeting>
-<mifosx-group-attendance *ngIf="actions['Attendance']"></mifosx-group-attendance>
-<mifosx-manage-group-members *ngIf="actions['Manage Members']"></mifosx-manage-group-members>
-<mifosx-edit-group-meeting *ngIf="actions['Edit Meeting']"></mifosx-edit-group-meeting>
-<mifosx-edit-group-meeting-schedule *ngIf="actions['Edit Meeting Schedule']"></mifosx-edit-group-meeting-schedule>
-<mifosx-group-transfer-clients *ngIf="actions['Transfer Clients']"></mifosx-group-transfer-clients>
+@if (actions['Assign Staff']) {
+  <mifosx-group-assign-staff></mifosx-group-assign-staff>
+}
+@if (actions['Close']) {
+  <mifosx-close-group></mifosx-close-group>
+}
+@if (actions['Activate']) {
+  <mifosx-activate-group></mifosx-activate-group>
+}
+@if (actions['Attach Meeting']) {
+  <mifosx-attach-group-meeting></mifosx-attach-group-meeting>
+}
+@if (actions['Attendance']) {
+  <mifosx-group-attendance></mifosx-group-attendance>
+}
+@if (actions['Manage Members']) {
+  <mifosx-manage-group-members></mifosx-manage-group-members>
+}
+@if (actions['Edit Meeting']) {
+  <mifosx-edit-group-meeting></mifosx-edit-group-meeting>
+}
+@if (actions['Edit Meeting Schedule']) {
+  <mifosx-edit-group-meeting-schedule></mifosx-edit-group-meeting-schedule>
+}
+@if (actions['Transfer Clients']) {
+  <mifosx-group-transfer-clients></mifosx-group-transfer-clients>
+}

src/app/groups/groups-view/group-actions/group-actions.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component } from '@angular/core';
+import { Component, inject } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { GroupAssignStaffComponent } from './group-assign-staff/group-assign-staff.component';
 import { CloseGroupComponent } from './close-group/close-group.component';
@@ -33,6 +33,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class GroupActionsComponent {
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Flag object to store possible actions and render appropriate UI to the user */
   actions: {
     'Assign Staff': boolean;
@@ -60,10 +63,7 @@ export class GroupActionsComponent {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
     this.router.routeReuseStrategy.shouldReuseRoute = () => false;
     const action = this.route.snapshot.params['action'];
     if (action && action in this.actions) {

src/app/groups/groups-view/group-actions/group-assign-staff/group-assign-staff.component.html

@@ -6,14 +6,18 @@
           <mat-form-field class="flex-48">
             <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
             <mat-select formControlName="staffId">
-              <mat-option *ngFor="let staff of staffData" [value]="staff.id">
-                {{ staff.displayName }}
-              </mat-option>
+              @for (staff of staffData; track staff) {
+                <mat-option [value]="staff.id">
+                  {{ staff.displayName }}
+                </mat-option>
+              }
             </mat-select>
-            <mat-error *ngIf="groupAssignStaffForm.controls.staffId.hasError('required')">
-              {{ 'labels.inputs.Staff' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (groupAssignStaffForm.controls.staffId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Staff' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
       </mat-card-content>

src/app/groups/groups-view/group-actions/group-assign-staff/group-assign-staff.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 
@@ -19,6 +19,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class GroupAssignStaffComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private groupsService = inject(GroupsService);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+
   /** Group Assign Staff form. */
   groupAssignStaffForm: UntypedFormGroup;
   /** Staff Data */
@@ -33,12 +38,7 @@ export class GroupAssignStaffComponent implements OnInit {
    * @param {ActivatedRoute} route Activated Route
    * @param {Router} router Router
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private groupsService: GroupsService,
-    private route: ActivatedRoute,
-    private router: Router
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { groupActionData: any }) => {
       this.groupData = data.groupActionData;
     });

src/app/groups/groups-view/group-actions/group-attendance/group-attendance.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router, RouterLink } from '@angular/router';
 import { UntypedFormControl, ReactiveFormsModule } from '@angular/forms';
@@ -64,6 +64,13 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class GroupAttendanceComponent implements OnInit {
+  private route = inject(ActivatedRoute);
+  private dateUtils = inject(Dates);
+  private router = inject(Router);
+  private groupsService = inject(GroupsService);
+  dialog = inject(MatDialog);
+  private settingsService = inject(SettingsService);
+
   /** Members data. */
   membersData: any;
   /** Group Data */
@@ -91,14 +98,7 @@ export class GroupAttendanceComponent implements OnInit {
    * @param {MatDialog} dialog Mat Dialog
    * @param {SettingsService} settingsService SettingsService
    */
-  constructor(
-    private route: ActivatedRoute,
-    private dateUtils: Dates,
-    private router: Router,
-    private groupsService: GroupsService,
-    public dialog: MatDialog,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { groupActionData: any }) => {
       this.groupData = data.groupActionData;
       this.membersData = data.groupActionData.clientMembers;
@@ -140,7 +140,6 @@ export class GroupAttendanceComponent implements OnInit {
         options: { label: 'value', value: 'id', data: this.attendanceTypeOptions },
         required: false
       })
-
     ];
     const data = {
       title: 'Assign Member Attendance',

src/app/groups/groups-view/group-actions/group-transfer-clients/group-transfer-clients.component.html

@@ -6,9 +6,11 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Select Client Members for Transfer' | translate }}</mat-label>
             <mat-select required formControlName="clients" multiple>
-              <mat-option *ngFor="let member of clientMembers" [value]="{ id: member.id }">
-                {{ member.displayName }}
-              </mat-option>
+              @for (member of clientMembers; track member) {
+                <mat-option [value]="{ id: member.id }">
+                  {{ member.displayName }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
 
@@ -23,50 +25,58 @@
           <mat-form-field>
             <mat-label>{{ 'labels.inputs.Destination Group' | translate }}</mat-label>
             <input matInput formControlName="destinationGroupId" [matAutocomplete]="groupsAutocomplete" />
-            <mat-error *ngIf="transferClientsForm.controls.destinationGroupId.hasError('required')">
-              {{ 'labels.inputs.Destination Group' | translate }} {{ 'labels.commons.is' | translate }}
-              <strong>{{ 'labels.commons.required' | translate }}</strong>
-            </mat-error>
+            @if (transferClientsForm.controls.destinationGroupId.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Destination Group' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
           </mat-form-field>
         </div>
 
         <mat-autocomplete autoActiveFirstOption #groupsAutocomplete="matAutocomplete" [displayWith]="displayGroup">
-          <mat-option *ngFor="let group of groupsData" [value]="group">
-            {{ group.name }}
-          </mat-option>
+          @for (group of groupsData; track group) {
+            <mat-option [value]="group">
+              {{ group.name }}
+            </mat-option>
+          }
         </mat-autocomplete>
 
-        <div class="mat-table" *ngIf="transferClientsForm.get('destinationGroupId').value?.id">
-          <div class="mat-header-row">
-            <div class="mat-header-cell">{{ 'labels.inputs.Destination Group Details' | translate }}</div>
-          </div>
-          <div class="mat-row">
-            <div class="mat-cell">{{ 'labels.inputs.name' | translate }}</div>
-            <div class="mat-cell">{{ transferClientsForm.get('destinationGroupId').value.name }}</div>
-          </div>
-          <div class="mat-row">
-            <div class="mat-cell">{{ 'labels.inputs.Id' | translate }}</div>
-            <div class="mat-cell">{{ transferClientsForm.get('destinationGroupId').value.id }}</div>
-          </div>
-          <div class="mat-row">
-            <div class="mat-cell">{{ 'labels.inputs.Activation Date' | translate }}</div>
-            <div class="mat-cell">
-              {{ (transferClientsForm.get('destinationGroupId').value.activationDate | dateFormat) || 'Not Activated' }}
+        @if (transferClientsForm.get('destinationGroupId').value?.id) {
+          <div class="mat-table">
+            <div class="mat-header-row">
+              <div class="mat-header-cell">{{ 'labels.inputs.Destination Group Details' | translate }}</div>
+            </div>
+            <div class="mat-row">
+              <div class="mat-cell">{{ 'labels.inputs.name' | translate }}</div>
+              <div class="mat-cell">{{ transferClientsForm.get('destinationGroupId').value.name }}</div>
+            </div>
+            <div class="mat-row">
+              <div class="mat-cell">{{ 'labels.inputs.Id' | translate }}</div>
+              <div class="mat-cell">{{ transferClientsForm.get('destinationGroupId').value.id }}</div>
+            </div>
+            <div class="mat-row">
+              <div class="mat-cell">{{ 'labels.inputs.Activation Date' | translate }}</div>
+              <div class="mat-cell">
+                {{
+                  (transferClientsForm.get('destinationGroupId').value.activationDate | dateFormat) || 'Not Activated'
+                }}
+              </div>
+            </div>
+            <div class="mat-row">
+              <div class="mat-cell">{{ 'labels.inputs.Staff' | translate }}</div>
+              <div class="mat-cell">
+                {{ transferClientsForm.get('destinationGroupId').value.staffName || 'Unassigned' }}
+              </div>
+            </div>
+            <div class="mat-row">
+              <div class="mat-cell">{{ 'labels.inputs.External Id' | translate }}</div>
+              <div class="mat-cell">
+                {{ transferClientsForm.get('destinationGroupId').value.externalId || 'Unassigned' }}
+              </div>
             </div>
           </div>
-          <div class="mat-row">
-            <div class="mat-cell">{{ 'labels.inputs.Staff' | translate }}</div>
-            <div class="mat-cell">
-              {{ transferClientsForm.get('destinationGroupId').value.staffName || 'Unassigned' }}
-            </div>
-          </div>
-          <div class="mat-row">
-            <div class="mat-cell">{{ 'labels.inputs.External Id' | translate }}</div>
-            <div class="mat-cell">
-              {{ transferClientsForm.get('destinationGroupId').value.externalId || 'Unassigned' }}
-            </div>
-          </div>
-        </div>
+        }
       </mat-card-content>
 
       <mat-card-actions class="layout-row align-center gap-5px responsive-column">

src/app/groups/groups-view/group-actions/group-transfer-clients/group-transfer-clients.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, AfterViewInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit, inject } from '@angular/core';
 import { UntypedFormGroup, UntypedFormBuilder, FormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Router, ActivatedRoute, RouterLink } from '@angular/router';
 
@@ -27,6 +27,12 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class GroupTransferClientsComponent implements OnInit, AfterViewInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private route = inject(ActivatedRoute);
+  private router = inject(Router);
+  private groupsService = inject(GroupsService);
+  private settingsService = inject(SettingsService);
+
   /** Transfer Clients form. */
   transferClientsForm: UntypedFormGroup;
   /** Group Data */
@@ -46,13 +52,7 @@ export class GroupTransferClientsComponent implements OnInit, AfterViewInit {
    * @param {GroupsService} groupsService GroupsService.
    * @param {SettingsService} settingsService SettingsService
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private route: ActivatedRoute,
-    private router: Router,
-    private groupsService: GroupsService,
-    private settingsService: SettingsService
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { groupActionData: any }) => {
       this.groupData = data.groupActionData;
       this.clientMembers = this.groupData.clientMembers;

src/app/groups/groups-view/group-actions/manage-group-members/manage-group-members.component.html

@@ -6,9 +6,11 @@
     </mat-form-field>
 
     <mat-autocomplete autoActiveFirstOption #clientsAutocomplete="matAutocomplete" [displayWith]="displayClient">
-      <mat-option *ngFor="let client of clientsData" [value]="client">
-        {{ client.displayName }}
-      </mat-option>
+      @for (client of clientsData; track client) {
+        <mat-option [value]="client">
+          {{ client.displayName }}
+        </mat-option>
+      }
     </mat-autocomplete>
 
     <div class="mat-table">
@@ -36,20 +38,24 @@
   <mat-card class="flex-50">
     <h3 matSubheader>{{ 'labels.heading.Client Members' | translate }}</h3>
 
-    <mat-nav-list *ngIf="clientMembers?.length">
-      <div mat-list-item *ngFor="let client of clientMembers; index as i">
-        <span matLine class="p-t-10">{{ client.displayName }}</span>
-        <div class="flex-fill"></div>
-        <button
-          mat-icon-button
-          color="warn"
-          (click)="removeClient(i, client)"
-          matTooltip="{{ 'tooltips.Remove Client from Group' | translate }}"
-          matTooltipPosition="left"
-        >
-          <fa-icon icon="trash"></fa-icon>
-        </button>
-      </div>
-    </mat-nav-list>
+    @if (clientMembers?.length) {
+      <mat-nav-list>
+        @for (client of clientMembers; track client; let i = $index) {
+          <div mat-list-item>
+            <span matLine class="p-t-10">{{ client.displayName }}</span>
+            <div class="flex-fill"></div>
+            <button
+              mat-icon-button
+              color="warn"
+              (click)="removeClient(i, client)"
+              matTooltip="{{ 'tooltips.Remove Client from Group' | translate }}"
+              matTooltipPosition="left"
+            >
+              <fa-icon icon="trash"></fa-icon>
+            </button>
+          </div>
+        }
+      </mat-nav-list>
+    }
   </mat-card>
 </div>

src/app/groups/groups-view/group-actions/manage-group-members/manage-group-members.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, AfterViewInit } from '@angular/core';
+import { Component, OnInit, AfterViewInit, inject } from '@angular/core';
 import { FormGroup, FormBuilder, UntypedFormControl, Validators, ReactiveFormsModule } from '@angular/forms';
 import { Router, ActivatedRoute } from '@angular/router';
 
@@ -38,6 +38,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ManageGroupMembersComponent implements AfterViewInit {
+  private route = inject(ActivatedRoute);
+  private groupsService = inject(GroupsService);
+  private clientsService = inject(ClientsService);
+  dialog = inject(MatDialog);
+
   /** Group Data */
   groupData: any;
   /** Client data. */
@@ -54,12 +59,7 @@ export class ManageGroupMembersComponent implements AfterViewInit {
    * @param {ClientsService} clientsService Clients Service
    * @param {MatDialog} dialog Mat Dialog
    */
-  constructor(
-    private route: ActivatedRoute,
-    private groupsService: GroupsService,
-    private clientsService: ClientsService,
-    public dialog: MatDialog
-  ) {
+  constructor() {
     this.route.data.subscribe((data: { groupActionData: any }) => {
       this.groupData = data.groupActionData;
       this.clientMembers = data.groupActionData.clientMembers || [];