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/clients/client-stepper/client-address-step/client-address-step.component.html

@@ -7,64 +7,70 @@
     </button>
   </div>
 
-  <mat-accordion *ngIf="clientAddressData.length > 0">
-    <mat-expansion-panel *ngFor="let address of clientAddressData; index as i" class="address">
-      <mat-expansion-panel-header>
-        <mat-panel-title>
-          {{ getSelectedValue('addressTypeIdOptions', address.addressTypeId)?.name }}
-        </mat-panel-title>
-
-        <mat-panel-description>
-          {{ address.relationship }}
-        </mat-panel-description>
-      </mat-expansion-panel-header>
-
-      <mat-divider></mat-divider>
-
-      <div class="address-actions layout-row align-end align-items-center">
-        <button mat-button color="primary" (click)="editAddress(address, i)">
-          <fa-icon icon="edit"></fa-icon>
-        </button>
-        <button mat-button color="warn" (click)="deleteAddress(address, i)">
-          <fa-icon icon="trash"></fa-icon>
-        </button>
-        <mat-slide-toggle [checked]="address.isActive" (change)="toggleAddress(address)"></mat-slide-toggle>
-      </div>
-
-      <p>
-        <span *ngIf="isFieldEnabled('street')"
-          >{{ 'labels.inputs.Street' | translate }} : {{ address.street }}<br
-        /></span>
-        <span *ngIf="isFieldEnabled('addressLine1')"
-          >{{ 'labels.inputs.Address Line' | translate }} 1 : {{ address.addressLine1 }}<br
-        /></span>
-        <span *ngIf="isFieldEnabled('addressLine2')"
-          >{{ 'labels.inputs.Address Line' | translate }} 2 : {{ address.addressLine2 }}<br
-        /></span>
-        <span *ngIf="isFieldEnabled('addressLine3')"
-          >{{ 'labels.inputs.Address Line' | translate }} 3 : {{ address.addressLine3 }}<br
-        /></span>
-        <span *ngIf="isFieldEnabled('townVillage')"
-          >{{ 'labels.inputs.Town / Village' | translate }} : {{ address.townVillage }}<br
-        /></span>
-        <span *ngIf="isFieldEnabled('city')">{{ 'labels.inputs.City' | translate }} : {{ address.city }}<br /></span>
-        <span *ngIf="isFieldEnabled('stateProvinceId')"
-          >{{ 'labels.inputs.State / Province' | translate }} :
-          {{ getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name }}<br
-        /></span>
-        <span *ngIf="isFieldEnabled('countryId')"
-          >{{ 'labels.inputs.Country' | translate }} : {{ getSelectedValue('countryIdOptions', address.countryId)?.name
-          }}<br
-        /></span>
-        <span *ngIf="isFieldEnabled('postalCode')"
-          >{{ 'labels.inputs.Postal Code' | translate }} : {{ address.postalCode }}<br
-        /></span>
-        <span *ngIf="isFieldEnabled('isActive')"
-          >{{ 'labels.inputs.Active Status' | translate }} : {{ address.isActive }}<br
-        /></span>
-      </p>
-    </mat-expansion-panel>
-  </mat-accordion>
+  @if (clientAddressData.length > 0) {
+    <mat-accordion>
+      @for (address of clientAddressData; track address; let i = $index) {
+        <mat-expansion-panel class="address">
+          <mat-expansion-panel-header>
+            <mat-panel-title>
+              {{ getSelectedValue('addressTypeIdOptions', address.addressTypeId)?.name }}
+            </mat-panel-title>
+            <mat-panel-description>
+              {{ address.relationship }}
+            </mat-panel-description>
+          </mat-expansion-panel-header>
+          <mat-divider></mat-divider>
+          <div class="address-actions layout-row align-end align-items-center">
+            <button mat-button color="primary" (click)="editAddress(address, i)">
+              <fa-icon icon="edit"></fa-icon>
+            </button>
+            <button mat-button color="warn" (click)="deleteAddress(address, i)">
+              <fa-icon icon="trash"></fa-icon>
+            </button>
+            <mat-slide-toggle [checked]="address.isActive" (change)="toggleAddress(address)"></mat-slide-toggle>
+          </div>
+          <p>
+            @if (isFieldEnabled('street')) {
+              <span>{{ 'labels.inputs.Street' | translate }} : {{ address.street }}<br /></span>
+            }
+            @if (isFieldEnabled('addressLine1')) {
+              <span>{{ 'labels.inputs.Address Line' | translate }} 1 : {{ address.addressLine1 }}<br /></span>
+            }
+            @if (isFieldEnabled('addressLine2')) {
+              <span>{{ 'labels.inputs.Address Line' | translate }} 2 : {{ address.addressLine2 }}<br /></span>
+            }
+            @if (isFieldEnabled('addressLine3')) {
+              <span>{{ 'labels.inputs.Address Line' | translate }} 3 : {{ address.addressLine3 }}<br /></span>
+            }
+            @if (isFieldEnabled('townVillage')) {
+              <span>{{ 'labels.inputs.Town / Village' | translate }} : {{ address.townVillage }}<br /></span>
+            }
+            @if (isFieldEnabled('city')) {
+              <span>{{ 'labels.inputs.City' | translate }} : {{ address.city }}<br /></span>
+            }
+            @if (isFieldEnabled('stateProvinceId')) {
+              <span
+                >{{ 'labels.inputs.State / Province' | translate }} :
+                {{ getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name }}<br
+              /></span>
+            }
+            @if (isFieldEnabled('countryId')) {
+              <span
+                >{{ 'labels.inputs.Country' | translate }} :
+                {{ getSelectedValue('countryIdOptions', address.countryId)?.name }}<br
+              /></span>
+            }
+            @if (isFieldEnabled('postalCode')) {
+              <span>{{ 'labels.inputs.Postal Code' | translate }} : {{ address.postalCode }}<br /></span>
+            }
+            @if (isFieldEnabled('isActive')) {
+              <span>{{ 'labels.inputs.Active Status' | translate }} : {{ address.isActive }}<br /></span>
+            }
+          </p>
+        </mat-expansion-panel>
+      }
+    </mat-accordion>
+  }
 
   <div class="layout-row align-center gap-2percent margin-t responsive-column">
     <button mat-raised-button matStepperPrevious>

src/app/clients/client-stepper/client-address-step/client-address-step.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Models */
@@ -46,6 +46,9 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ClientAddressStepComponent {
+  private dialog = inject(MatDialog);
+  private translateService = inject(TranslateService);
+
   /** Client Address Field Config */
   @Input() clientAddressFieldConfig: any;
   /** Client Template */
@@ -58,10 +61,7 @@ export class ClientAddressStepComponent {
    * @param {MatDialog} dialog Mat Dialog
    * @param {TranslateService} translateService Translate Service.
    */
-  constructor(
-    private dialog: MatDialog,
-    private translateService: TranslateService
-  ) {
+  constructor() {
     this.clientAddressData = [];
   }
 

src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.html

@@ -1,58 +1,49 @@
 <form [formGroup]="datatableForm">
   <div class="layout-row-wrap gap-2px responsive-column">
-    <div *ngFor="let datatableInput of datatableInputs" class="flex-48">
-      <mat-form-field class="flex-100" *ngIf="!isBoolean(datatableInput.columnDisplayType)">
-        <mat-label>{{ getInputName(datatableInput) }}</mat-label>
-
-        <mat-select
-          *ngIf="isDropdown(datatableInput.columnDisplayType)"
-          formControlName="{{ datatableInput.controlName }}"
-        >
-          <mat-option *ngFor="let code of datatableInput.columnValues" [value]="code.id">
-            {{ code.value }}
-          </mat-option>
-        </mat-select>
-
-        <input
-          matInput
-          type="number"
-          *ngIf="isNumeric(datatableInput.columnDisplayType)"
-          formControlName="{{ datatableInput.controlName }}"
-        />
-
-        <input
-          matInput
-          *ngIf="isString(datatableInput.columnDisplayType)"
-          formControlName="{{ datatableInput.controlName }}"
-        />
-
-        <textarea
-          matInput
-          *ngIf="isText(datatableInput.columnDisplayType)"
-          formControlName="{{ datatableInput.controlName }}"
-        ></textarea>
-
-        <span *ngIf="isDate(datatableInput.columnDisplayType)" (click)="datePicker.open()">
-          <input
-            matInput
-            [matDatepicker]="datePicker"
-            formControlName="{{ datatableInput.controlName }}"
-            class="date-picker"
-          />
-          <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
-          <mat-datepicker #datePicker></mat-datepicker>
-        </span>
-      </mat-form-field>
-
-      <mat-checkbox
-        *ngIf="isBoolean(datatableInput.columnDisplayType)"
-        formControlName="{{ datatableInput.controlName }}"
-        labelPosition="before"
-        class="margin-v"
-      >
-        {{ getInputName(datatableInput) }}
-      </mat-checkbox>
-    </div>
+    @for (datatableInput of datatableInputs; track datatableInput) {
+      <div class="flex-48">
+        @if (!isBoolean(datatableInput.columnDisplayType)) {
+          <mat-form-field class="flex-100">
+            <mat-label>{{ getInputName(datatableInput) }}</mat-label>
+            @if (isDropdown(datatableInput.columnDisplayType)) {
+              <mat-select formControlName="{{ datatableInput.controlName }}">
+                @for (code of datatableInput.columnValues; track code) {
+                  <mat-option [value]="code.id">
+                    {{ code.value }}
+                  </mat-option>
+                }
+              </mat-select>
+            }
+            @if (isNumeric(datatableInput.columnDisplayType)) {
+              <input matInput type="number" formControlName="{{ datatableInput.controlName }}" />
+            }
+            @if (isString(datatableInput.columnDisplayType)) {
+              <input matInput formControlName="{{ datatableInput.controlName }}" />
+            }
+            @if (isText(datatableInput.columnDisplayType)) {
+              <textarea matInput formControlName="{{ datatableInput.controlName }}"></textarea>
+            }
+            @if (isDate(datatableInput.columnDisplayType)) {
+              <span (click)="datePicker.open()">
+                <input
+                  matInput
+                  [matDatepicker]="datePicker"
+                  formControlName="{{ datatableInput.controlName }}"
+                  class="date-picker"
+                />
+                <mat-datepicker-toggle matSuffix [for]="datePicker"></mat-datepicker-toggle>
+                <mat-datepicker #datePicker></mat-datepicker>
+              </span>
+            }
+          </mat-form-field>
+        }
+        @if (isBoolean(datatableInput.columnDisplayType)) {
+          <mat-checkbox formControlName="{{ datatableInput.controlName }}" labelPosition="before" class="margin-v">
+            {{ getInputName(datatableInput) }}
+          </mat-checkbox>
+        }
+      </div>
+    }
   </div>
 
   <div class="layout-row align-center gap-2percent margin-t responsive-column">

src/app/clients/client-stepper/client-datatable-step/client-datatable-step.component.ts

@@ -1,4 +1,4 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { Component, Input, OnInit, inject } from '@angular/core';
 import {
   UntypedFormBuilder,
   UntypedFormControl,
@@ -26,6 +26,10 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ClientDatatableStepComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private settingsService = inject(SettingsService);
+  private datatableService = inject(Datatables);
+
   /** Input Fields Data */
   @Input() datatableData: any;
   /** Create Input Form */
@@ -33,12 +37,6 @@ export class ClientDatatableStepComponent implements OnInit {
 
   datatableInputs: any = [];
 
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private settingsService: SettingsService,
-    private datatableService: Datatables
-  ) {}
-
   ngOnInit(): void {
     this.datatableInputs = this.datatableService.filterSystemColumns(this.datatableData.columnHeaderData);
     const inputItems: any = {};

src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.html

@@ -5,10 +5,12 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
       <input formControlName="firstName" required matInput />
-      <mat-error *ngIf="familyMemberForm.controls.firstName.hasError('required')">
-        {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
+      @if (familyMemberForm.controls.firstName.hasError('required')) {
+        <mat-error>
+          {{ 'labels.inputs.First Name' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+      }
     </mat-form-field>
 
     <mat-form-field class="flex-48">
@@ -19,10 +21,12 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
       <input formControlName="lastName" required matInput />
-      <mat-error *ngIf="familyMemberForm.controls.lastName.hasError('required')">
-        {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
+      @if (familyMemberForm.controls.lastName.hasError('required')) {
+        <mat-error>
+          {{ 'labels.inputs.Last Name' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+      }
     </mat-form-field>
 
     <mat-form-field class="flex-48">
@@ -42,44 +46,56 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Relationship' | translate }}</mat-label>
       <mat-select formControlName="relationshipId" required>
-        <mat-option *ngFor="let relation of data.options.relationshipIdOptions" [value]="relation.id">
-          {{ relation.name | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (relation of data.options.relationshipIdOptions; track relation) {
+          <mat-option [value]="relation.id">
+            {{ relation.name | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
-      <mat-error *ngIf="familyMemberForm.controls.relationshipId.hasError('required')">
-        {{ 'labels.inputs.Relationship' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
+      @if (familyMemberForm.controls.relationshipId.hasError('required')) {
+        <mat-error>
+          {{ 'labels.inputs.Relationship' | 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.Gender' | translate }}</mat-label>
       <mat-select formControlName="genderId" required>
-        <mat-option *ngFor="let gender of data.options.genderIdOptions" [value]="gender.id">
-          {{ gender.name | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (gender of data.options.genderIdOptions; track gender) {
+          <mat-option [value]="gender.id">
+            {{ gender.name | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
-      <mat-error *ngIf="familyMemberForm.controls.genderId.hasError('required')">
-        {{ 'labels.inputs.Gender' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
+      @if (familyMemberForm.controls.genderId.hasError('required')) {
+        <mat-error>
+          {{ 'labels.inputs.Gender' | 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.Profession' | translate }}</mat-label>
       <mat-select formControlName="professionId">
-        <mat-option *ngFor="let profession of data.options.professionIdOptions" [value]="profession.id">
-          {{ profession.name | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (profession of data.options.professionIdOptions; track profession) {
+          <mat-option [value]="profession.id">
+            {{ profession.name | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Marital Status' | translate }}</mat-label>
       <mat-select formControlName="maritalStatusId">
-        <mat-option *ngFor="let maritalStatus of data.options.maritalStatusIdOptions" [value]="maritalStatus.id">
-          {{ maritalStatus.name | translateKey: 'catalogs' }}
-        </mat-option>
+        @for (maritalStatus of data.options.maritalStatusIdOptions; track maritalStatus) {
+          <mat-option [value]="maritalStatus.id">
+            {{ maritalStatus.name | translateKey: 'catalogs' }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 

src/app/clients/client-stepper/client-family-members-step/client-family-member-dialog/client-family-member-dialog.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Inject } from '@angular/core';
+import { Component, OnInit, inject } from '@angular/core';
 import {
   MatDialogRef,
   MAT_DIALOG_DATA,
@@ -31,27 +31,18 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ClientFamilyMemberDialogComponent implements OnInit {
+  dialogRef = inject<MatDialogRef<ClientFamilyMemberDialogComponent>>(MatDialogRef);
+  private formBuilder = inject(UntypedFormBuilder);
+  private dateUtils = inject(Dates);
+  data = inject(MAT_DIALOG_DATA);
+  private settingsService = inject(SettingsService);
+
   /** Maximum Due Date allowed. */
   maxDate = new Date();
 
   /** Add/Edit family member form. */
   familyMemberForm: UntypedFormGroup;
 
-  /**
-   * @param {MatDialogRef} dialogRef Client Family Member Dialog Reference
-   * @param {FormBuilder} formBuilder Form Builder
-   * @param {Dates} dateUtils Date Utils
-   * @param {any} data Dialog Data
-   * @param {SettingsService} settingsService Setting service
-   */
-  constructor(
-    public dialogRef: MatDialogRef<ClientFamilyMemberDialogComponent>,
-    private formBuilder: UntypedFormBuilder,
-    private dateUtils: Dates,
-    @Inject(MAT_DIALOG_DATA) public data: any,
-    private settingsService: SettingsService
-  ) {}
-
   ngOnInit() {
     this.maxDate = this.settingsService.businessDate;
     this.createFamilyMemberForm();

src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.html

@@ -8,48 +8,46 @@
   </div>
 
   <mat-accordion>
-    <mat-expansion-panel *ngFor="let member of clientFamilyMembers; index as i" class="family-member">
-      <mat-expansion-panel-header>
-        <mat-panel-title>
-          {{ member.firstName }} {{ member.middleName ? member.middleName + ' ' + member.lastName : member.lastName }}
-        </mat-panel-title>
-
-        <mat-panel-description>
-          {{ member.relationship }}
-        </mat-panel-description>
-      </mat-expansion-panel-header>
-
-      <mat-divider></mat-divider>
-
-      <div class="family-member-actions layout-row align-end">
-        <button mat-button color="primary">
-          <fa-icon icon="edit" (click)="editFamilyMember(member, i)"></fa-icon>
-        </button>
-        <button mat-button color="warn" (click)="deleteFamilyMember(member.firstName, i)">
-          <fa-icon icon="trash"></fa-icon>
-        </button>
-      </div>
-
-      <p>
-        {{ 'labels.inputs.First Name' | translate }} : {{ member.firstName }}<br />
-        {{ 'labels.inputs.Middle Name' | translate }} : {{ member.middleName }}<br />
-        {{ 'labels.inputs.Last Name' | translate }} : {{ member.lastName }}<br />
-        {{ 'labels.inputs.Qualification' | translate }} : {{ member.qualification }}<br />
-        {{ 'labels.inputs.Relationship' | translate }} :
-        {{ member.relationshipId | find: clientTemplate.familyMemberOptions.relationshipIdOptions : 'id' : 'name'
-        }}<br />
-        {{ 'labels.inputs.Age' | translate }} : {{ member.age }}<br />
-        {{ 'labels.inputs.Is Dependent' | translate }} : {{ member.isDependent ? 'Yes' : 'No' }}<br />
-        {{ 'labels.inputs.Marital Status' | translate }} :
-        {{ member.maritalStatusId | find: clientTemplate.familyMemberOptions.maritalStatusIdOptions : 'id' : 'name'
-        }}<br />
-        {{ 'labels.inputs.Gender' | translate }} :
-        {{ member.genderId | find: clientTemplate.familyMemberOptions.genderIdOptions : 'id' : 'name' }}<br />
-        {{ 'labels.inputs.Profession' | translate }} :
-        {{ member.professionId | find: clientTemplate.familyMemberOptions.professionIdOptions : 'id' : 'name' }}<br />
-        {{ 'labels.inputs.Date Of Birth' | translate }} : {{ member.dateOfBirth | dateFormat }}<br />
-      </p>
-    </mat-expansion-panel>
+    @for (member of clientFamilyMembers; track member; let i = $index) {
+      <mat-expansion-panel class="family-member">
+        <mat-expansion-panel-header>
+          <mat-panel-title>
+            {{ member.firstName }} {{ member.middleName ? member.middleName + ' ' + member.lastName : member.lastName }}
+          </mat-panel-title>
+          <mat-panel-description>
+            {{ member.relationship }}
+          </mat-panel-description>
+        </mat-expansion-panel-header>
+        <mat-divider></mat-divider>
+        <div class="family-member-actions layout-row align-end">
+          <button mat-button color="primary">
+            <fa-icon icon="edit" (click)="editFamilyMember(member, i)"></fa-icon>
+          </button>
+          <button mat-button color="warn" (click)="deleteFamilyMember(member.firstName, i)">
+            <fa-icon icon="trash"></fa-icon>
+          </button>
+        </div>
+        <p>
+          {{ 'labels.inputs.First Name' | translate }} : {{ member.firstName }}<br />
+          {{ 'labels.inputs.Middle Name' | translate }} : {{ member.middleName }}<br />
+          {{ 'labels.inputs.Last Name' | translate }} : {{ member.lastName }}<br />
+          {{ 'labels.inputs.Qualification' | translate }} : {{ member.qualification }}<br />
+          {{ 'labels.inputs.Relationship' | translate }} :
+          {{ member.relationshipId | find: clientTemplate.familyMemberOptions.relationshipIdOptions : 'id' : 'name'
+          }}<br />
+          {{ 'labels.inputs.Age' | translate }} : {{ member.age }}<br />
+          {{ 'labels.inputs.Is Dependent' | translate }} : {{ member.isDependent ? 'Yes' : 'No' }}<br />
+          {{ 'labels.inputs.Marital Status' | translate }} :
+          {{ member.maritalStatusId | find: clientTemplate.familyMemberOptions.maritalStatusIdOptions : 'id' : 'name'
+          }}<br />
+          {{ 'labels.inputs.Gender' | translate }} :
+          {{ member.genderId | find: clientTemplate.familyMemberOptions.genderIdOptions : 'id' : 'name' }}<br />
+          {{ 'labels.inputs.Profession' | translate }} :
+          {{ member.professionId | find: clientTemplate.familyMemberOptions.professionIdOptions : 'id' : 'name' }}<br />
+          {{ 'labels.inputs.Date Of Birth' | translate }} : {{ member.dateOfBirth | dateFormat }}<br />
+        </p>
+      </mat-expansion-panel>
+    }
   </mat-accordion>
 
   <div class="layout-row align-center gap-2percent margin-t responsive-column">

src/app/clients/client-stepper/client-family-members-step/client-family-members-step.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, Input } from '@angular/core';
+import { Component, Input, inject } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 
 /** Custom Components */
@@ -43,20 +43,14 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ClientFamilyMembersStepComponent {
+  dialog = inject(MatDialog);
+  private translateService = inject(TranslateService);
+
   /** Cient Template */
   @Input() clientTemplate: any;
   /** Client Family Members */
   clientFamilyMembers: any[] = [];
 
-  /**
-   * @param {MatDialog} dialog Mat Dialog
-   * @param {TranslateService} translateService Translate Service.
-   */
-  constructor(
-    public dialog: MatDialog,
-    private translateService: TranslateService
-  ) {}
-
   /**
    * Adds a family member.
    */

src/app/clients/client-stepper/client-general-step/client-general-step.component.html

@@ -3,22 +3,28 @@
     <mat-form-field class="flex-fill flex-23">
       <mat-label>{{ 'labels.inputs.Office' | translate }}</mat-label>
       <mat-select required formControlName="officeId">
-        <mat-option *ngFor="let office of officeOptions" [value]="office.id">
-          {{ office.name }}
-        </mat-option>
+        @for (office of officeOptions; track office) {
+          <mat-option [value]="office.id">
+            {{ office.name }}
+          </mat-option>
+        }
       </mat-select>
-      <mat-error *ngIf="createClientForm.controls.officeId.hasError('required')">
-        {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
+      @if (createClientForm.controls.officeId.hasError('required')) {
+        <mat-error>
+          {{ 'labels.inputs.Office' | translate }} {{ 'labels.commons.is' | translate }}
+          <strong>{{ 'labels.commons.required' | translate }}</strong>
+        </mat-error>
+      }
     </mat-form-field>
 
     <mat-form-field class="flex-fill flex-23">
       <mat-label>{{ 'labels.inputs.Legal Form' | translate }}</mat-label>
       <mat-select required formControlName="legalFormId">
-        <mat-option *ngFor="let legalForm of legalFormOptions" [value]="legalForm.id">
-          {{ legalForm.value | translateKey: 'inputs' }}
-        </mat-option>
+        @for (legalForm of legalFormOptions; track legalForm) {
+          <mat-option [value]="legalForm.id">
+            {{ legalForm.value | translateKey: 'inputs' }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
@@ -27,64 +33,86 @@
       <input matInput formControlName="externalId" />
     </mat-form-field>
 
-    <mat-form-field *ngIf="createClientForm.contains('fullname')" class="flex-48">
-      <mat-label>
-        {{ 'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Name', 'Entity Name']) | translate }}
-      </mat-label>
-      <input matInput required formControlName="fullname" />
-      <mat-error *ngIf="createClientForm.controls.fullname.hasError('required')">
-        {{ 'labels.inputs.Client name' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
-      <mat-error *ngIf="createClientForm.controls.fullname.hasError('pattern')">
-        {{ 'labels.inputs.Client name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
-        {{ 'labels.commons.begin with a special character or number' | translate }}
-      </mat-error>
-    </mat-form-field>
-
-    <div
-      class="name-fields-row"
-      *ngIf="
-        createClientForm.contains('firstname') ||
-        createClientForm.contains('middlename') ||
-        createClientForm.contains('lastname')
-      "
-    >
-      <mat-form-field *ngIf="createClientForm.contains('firstname')" class="name-field first-name">
-        <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
-        <input matInput required formControlName="firstname" />
-        <mat-error *ngIf="createClientForm.controls.firstname.hasError('required')">
-          {{ 'labels.inputs.Client first name' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
-        <mat-error *ngIf="createClientForm.controls.firstname.hasError('pattern')">
-          {{ 'labels.inputs.Client first name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
-          {{ 'labels.commons.begin with a special character or number' | translate }}
-        </mat-error>
+    @if (createClientForm.contains('fullname')) {
+      <mat-form-field class="flex-48">
+        <mat-label>
+          {{ 'labels.inputs.' + getDateLabel(createClientForm.value.legalFormId, ['Name', 'Entity Name']) | translate }}
+        </mat-label>
+        <input matInput required formControlName="fullname" />
+        @if (createClientForm.controls.fullname.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.Client name' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
+        @if (createClientForm.controls.fullname.hasError('pattern')) {
+          <mat-error>
+            {{ 'labels.inputs.Client name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+            {{ 'labels.commons.begin with a special character or number' | translate }}
+          </mat-error>
+        }
       </mat-form-field>
+    }
 
-      <mat-form-field *ngIf="createClientForm.contains('middlename')" class="name-field middle-name">
-        <mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
-        <input matInput formControlName="middlename" />
-        <mat-error *ngIf="createClientForm.controls.middlename.hasError('pattern')">
-          {{ 'labels.inputs.Client middle name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
-          {{ 'labels.commons.begin with a special character or number' | translate }}
-        </mat-error>
-      </mat-form-field>
-
-      <mat-form-field *ngIf="createClientForm.contains('lastname')" class="name-field last-name">
-        <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
-        <input matInput required formControlName="lastname" />
-        <mat-error *ngIf="createClientForm.controls.lastname.hasError('required')">
-          {{ 'labels.inputs.Client last name' | translate }} {{ 'labels.commons.is' | translate }}
-          <strong>{{ 'labels.commons.required' | translate }}</strong>
-        </mat-error>
-        <mat-error *ngIf="createClientForm.controls.lastname.hasError('pattern')">
-          {{ 'labels.inputs.Client last name' | translate }} <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
-          {{ 'labels.commons.begin with a special character or number' | translate }}
-        </mat-error>
-      </mat-form-field>
-    </div>
+    @if (
+      createClientForm.contains('firstname') ||
+      createClientForm.contains('middlename') ||
+      createClientForm.contains('lastname')
+    ) {
+      <div class="name-fields-row">
+        @if (createClientForm.contains('firstname')) {
+          <mat-form-field class="name-field first-name">
+            <mat-label>{{ 'labels.inputs.First Name' | translate }}</mat-label>
+            <input matInput required formControlName="firstname" />
+            @if (createClientForm.controls.firstname.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Client first name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
+            @if (createClientForm.controls.firstname.hasError('pattern')) {
+              <mat-error>
+                {{ 'labels.inputs.Client first name' | translate }}
+                <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+                {{ 'labels.commons.begin with a special character or number' | translate }}
+              </mat-error>
+            }
+          </mat-form-field>
+        }
+        @if (createClientForm.contains('middlename')) {
+          <mat-form-field class="name-field middle-name">
+            <mat-label>{{ 'labels.inputs.Middle Name' | translate }}</mat-label>
+            <input matInput formControlName="middlename" />
+            @if (createClientForm.controls.middlename.hasError('pattern')) {
+              <mat-error>
+                {{ 'labels.inputs.Client middle name' | translate }}
+                <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+                {{ 'labels.commons.begin with a special character or number' | translate }}
+              </mat-error>
+            }
+          </mat-form-field>
+        }
+        @if (createClientForm.contains('lastname')) {
+          <mat-form-field class="name-field last-name">
+            <mat-label>{{ 'labels.inputs.Last Name' | translate }}</mat-label>
+            <input matInput required formControlName="lastname" />
+            @if (createClientForm.controls.lastname.hasError('required')) {
+              <mat-error>
+                {{ 'labels.inputs.Client last name' | translate }} {{ 'labels.commons.is' | translate }}
+                <strong>{{ 'labels.commons.required' | translate }}</strong>
+              </mat-error>
+            }
+            @if (createClientForm.controls.lastname.hasError('pattern')) {
+              <mat-error>
+                {{ 'labels.inputs.Client last name' | translate }}
+                <strong>{{ 'labels.inputs.cannot' | translate }}</strong>
+                {{ 'labels.commons.begin with a special character or number' | translate }}
+              </mat-error>
+            }
+          </mat-form-field>
+        }
+      </div>
+    }
 
     <mat-divider></mat-divider>
 
@@ -100,79 +128,80 @@
       <mat-datepicker #dateOfBirthDatePicker></mat-datepicker>
     </mat-form-field>
 
-    <div
-      class="flex-100 layout-row-wrap responsive-column gap-4percent"
-      formGroupName="clientNonPersonDetails"
-      *ngIf="createClientForm.get('clientNonPersonDetails')"
-    >
+    @if (createClientForm.get('clientNonPersonDetails')) {
+      <div class="flex-100 layout-row-wrap responsive-column gap-4percent" formGroupName="clientNonPersonDetails">
+        <mat-form-field class="flex-48">
+          <mat-label>{{ 'labels.inputs.Constitution' | translate }}</mat-label>
+          <mat-select formControlName="constitutionId" required>
+            @for (constitution of constitutionOptions; track constitution) {
+              <mat-option [value]="constitution.id">
+                {{ constitution.name }}
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field class="flex-48">
+          <mat-label>{{ 'labels.inputs.Main Business Line' | translate }}</mat-label>
+          <mat-select formControlName="mainBusinessLineId">
+            @for (business of businessLineOptions; track business) {
+              <mat-option [value]="business.id">
+                {{ business.name }}
+              </mat-option>
+            }
+          </mat-select>
+        </mat-form-field>
+        <mat-form-field class="flex-48" (click)="incorpValidityTillDateDatePicker.open()">
+          <mat-label>{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</mat-label>
+          <input
+            matInput
+            [min]="minDate"
+            [max]="maxDate"
+            [matDatepicker]="incorpValidityTillDateDatePicker"
+            formControlName="incorpValidityTillDate"
+          />
+          <mat-datepicker-toggle matSuffix [for]="incorpValidityTillDateDatePicker"></mat-datepicker-toggle>
+          <mat-datepicker #incorpValidityTillDateDatePicker></mat-datepicker>
+        </mat-form-field>
+        <mat-form-field class="flex-48">
+          <mat-label>{{ 'labels.inputs.Incorporation Number' | translate }}</mat-label>
+          <input matInput formControlName="incorpNumber" />
+        </mat-form-field>
+        <mat-form-field class="flex-98">
+          <mat-label>{{ 'labels.inputs.Remarks' | translate }}</mat-label>
+          <textarea matInput formControlName="remarks" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
+        </mat-form-field>
+      </div>
+    }
+
+    @if (createClientForm.value.legalFormId === 1) {
       <mat-form-field class="flex-48">
-        <mat-label>{{ 'labels.inputs.Constitution' | translate }}</mat-label>
-        <mat-select formControlName="constitutionId" required>
-          <mat-option *ngFor="let constitution of constitutionOptions" [value]="constitution.id">
-            {{ constitution.name }}
-          </mat-option>
+        <mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
+        <mat-select formControlName="genderId">
+          @for (gender of genderOptions; track gender) {
+            <mat-option [value]="gender.id">
+              {{ gender.name }}
+            </mat-option>
+          }
         </mat-select>
       </mat-form-field>
-
-      <mat-form-field class="flex-48">
-        <mat-label>{{ 'labels.inputs.Main Business Line' | translate }}</mat-label>
-        <mat-select formControlName="mainBusinessLineId">
-          <mat-option *ngFor="let business of businessLineOptions" [value]="business.id">
-            {{ business.name }}
-          </mat-option>
-        </mat-select>
-      </mat-form-field>
-
-      <mat-form-field class="flex-48" (click)="incorpValidityTillDateDatePicker.open()">
-        <mat-label>{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</mat-label>
-        <input
-          matInput
-          [min]="minDate"
-          [max]="maxDate"
-          [matDatepicker]="incorpValidityTillDateDatePicker"
-          formControlName="incorpValidityTillDate"
-        />
-        <mat-datepicker-toggle matSuffix [for]="incorpValidityTillDateDatePicker"></mat-datepicker-toggle>
-        <mat-datepicker #incorpValidityTillDateDatePicker></mat-datepicker>
-      </mat-form-field>
-
-      <mat-form-field class="flex-48">
-        <mat-label>{{ 'labels.inputs.Incorporation Number' | translate }}</mat-label>
-        <input matInput formControlName="incorpNumber" />
-      </mat-form-field>
-
-      <mat-form-field class="flex-98">
-        <mat-label>{{ 'labels.inputs.Remarks' | translate }}</mat-label>
-        <textarea matInput formControlName="remarks" cdkTextareaAutosize cdkAutosizeMinRows="2"></textarea>
-      </mat-form-field>
-    </div>
-
-    <mat-form-field *ngIf="createClientForm.value.legalFormId === 1" class="flex-48">
-      <mat-label>{{ 'labels.inputs.Gender' | translate }}</mat-label>
-      <mat-select formControlName="genderId">
-        <mat-option *ngFor="let gender of genderOptions" [value]="gender.id">
-          {{ gender.name }}
-        </mat-option>
-      </mat-select>
-    </mat-form-field>
+    }
 
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Staff' | translate }}</mat-label>
       <mat-select formControlName="staffId">
-        <mat-option *ngFor="let staff of staffOptions" [value]="staff.id">
-          {{ staff.displayName }}
-        </mat-option>
+        @for (staff of staffOptions; track staff) {
+          <mat-option [value]="staff.id">
+            {{ staff.displayName }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
-    <mat-checkbox
-      *ngIf="createClientForm.value.legalFormId === 1"
-      class="flex-48 margin-v"
-      labelPosition="before"
-      formControlName="isStaff"
-    >
-      {{ 'labels.inputs.Is staff' | translate }}?
-    </mat-checkbox>
+    @if (createClientForm.value.legalFormId === 1) {
+      <mat-checkbox class="flex-48 margin-v" labelPosition="before" formControlName="isStaff">
+        {{ 'labels.inputs.Is staff' | translate }}?
+      </mat-checkbox>
+    }
 
     <mat-divider class="flex-98"></mat-divider>
 
@@ -184,29 +213,32 @@
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Email Address' | translate }}</mat-label>
       <input matInput formControlName="emailAddress" />
-      <mat-error *ngIf="createClientForm.controls.emailAddress.errors?.email">
-        {{ 'error.Email not valid' | translate }}
-      </mat-error>
+      @if (createClientForm.controls.emailAddress.errors?.email) {
+        <mat-error>
+          {{ 'error.Email not valid' | translate }}
+        </mat-error>
+      }
     </mat-form-field>
 
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Client Type' | translate }}</mat-label>
       <mat-select formControlName="clientTypeId">
-        <mat-option *ngFor="let clientType of clientTypeOptions" [value]="clientType.id">
-          {{ clientType.name }}
-        </mat-option>
+        @for (clientType of clientTypeOptions; track clientType) {
+          <mat-option [value]="clientType.id">
+            {{ clientType.name }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
     <mat-form-field class="flex-48">
       <mat-label>{{ 'labels.inputs.Client Classification' | translate }}</mat-label>
       <mat-select formControlName="clientClassificationId">
-        <mat-option
-          *ngFor="let clientClassification of clientClassificationTypeOptions"
-          [value]="clientClassification.id"
-        >
-          {{ clientClassification.name }}
-        </mat-option>
+        @for (clientClassification of clientClassificationTypeOptions; track clientClassification) {
+          <mat-option [value]="clientClassification.id">
+            {{ clientClassification.name }}
+          </mat-option>
+        }
       </mat-select>
     </mat-form-field>
 
@@ -230,44 +262,50 @@
       {{ 'labels.inputs.Active' | translate }}?
     </mat-checkbox>
 
-    <mat-form-field
-      *ngIf="createClientForm.contains('activationDate')"
-      class="flex-48"
-      (click)="activatedOnDatePicker.open()"
-    >
-      <mat-label>{{ 'labels.inputs.Activation Date' | translate }}</mat-label>
-      <input
-        matInput
-        [min]="createClientForm.value.submittedOnDate"
-        [max]="maxDate"
-        [matDatepicker]="activatedOnDatePicker"
-        required
-        formControlName="activationDate"
-      />
-      <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
-      <mat-datepicker #activatedOnDatePicker></mat-datepicker>
-      <mat-error *ngIf="createClientForm.controls.activationDate.hasError('required')">
-        {{ 'labels.inputs.Activation Date' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
-    </mat-form-field>
+    @if (createClientForm.contains('activationDate')) {
+      <mat-form-field class="flex-48" (click)="activatedOnDatePicker.open()">
+        <mat-label>{{ 'labels.inputs.Activation Date' | translate }}</mat-label>
+        <input
+          matInput
+          [min]="createClientForm.value.submittedOnDate"
+          [max]="maxDate"
+          [matDatepicker]="activatedOnDatePicker"
+          required
+          formControlName="activationDate"
+        />
+        <mat-datepicker-toggle matSuffix [for]="activatedOnDatePicker"></mat-datepicker-toggle>
+        <mat-datepicker #activatedOnDatePicker></mat-datepicker>
+        @if (createClientForm.controls.activationDate.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.Activation Date' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
+      </mat-form-field>
+    }
 
     <mat-checkbox labelPosition="before" formControlName="addSavings" class="margin-v flex-48">
       {{ 'labels.inputs.Open Savings Account' | translate }}?
     </mat-checkbox>
 
-    <mat-form-field *ngIf="createClientForm.contains('savingsProductId')" class="flex-48">
-      <mat-label>{{ 'labels.inputs.Savings Product' | translate }}</mat-label>
-      <mat-select required formControlName="savingsProductId">
-        <mat-option *ngFor="let product of savingProductOptions" [value]="product.id">
-          {{ product.name }}
-        </mat-option>
-      </mat-select>
-      <mat-error *ngIf="createClientForm.controls.savingsProductId.hasError('required')">
-        {{ 'labels.inputs.Savings Product' | translate }} {{ 'labels.commons.is' | translate }}
-        <strong>{{ 'labels.commons.required' | translate }}</strong>
-      </mat-error>
-    </mat-form-field>
+    @if (createClientForm.contains('savingsProductId')) {
+      <mat-form-field class="flex-48">
+        <mat-label>{{ 'labels.inputs.Savings Product' | translate }}</mat-label>
+        <mat-select required formControlName="savingsProductId">
+          @for (product of savingProductOptions; track product) {
+            <mat-option [value]="product.id">
+              {{ product.name }}
+            </mat-option>
+          }
+        </mat-select>
+        @if (createClientForm.controls.savingsProductId.hasError('required')) {
+          <mat-error>
+            {{ 'labels.inputs.Savings Product' | translate }} {{ 'labels.commons.is' | translate }}
+            <strong>{{ 'labels.commons.required' | translate }}</strong>
+          </mat-error>
+        }
+      </mat-form-field>
+    }
   </div>
 
   <div class="layout-row align-center gap-2percent margin-t responsive-column">

src/app/clients/client-stepper/client-general-step/client-general-step.component.ts

@@ -1,5 +1,5 @@
 /** Angular Imports */
-import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { Component, OnInit, Input, Output, EventEmitter, inject } from '@angular/core';
 import {
   UntypedFormBuilder,
   UntypedFormGroup,
@@ -37,6 +37,11 @@ import { STANDALONE_SHARED_IMPORTS } from 'app/standalone-shared.module';
   ]
 })
 export class ClientGeneralStepComponent implements OnInit {
+  private formBuilder = inject(UntypedFormBuilder);
+  private dateUtils = inject(Dates);
+  private settingsService = inject(SettingsService);
+  private clientService = inject(ClientsService);
+
   @Output() legalFormChangeEvent = new EventEmitter<{ legalForm: number }>();
 
   /** Minimum date allowed. */
@@ -74,12 +79,7 @@ export class ClientGeneralStepComponent implements OnInit {
    * @param {SettingsService} settingsService Setting service
    * @param {ClientsService} clientService Client service
    */
-  constructor(
-    private formBuilder: UntypedFormBuilder,
-    private dateUtils: Dates,
-    private settingsService: SettingsService,
-    private clientService: ClientsService
-  ) {
+  constructor() {
     this.setClientForm();
   }
 
@@ -152,14 +152,16 @@ export class ClientGeneralStepComponent implements OnInit {
           'firstname',
           new UntypedFormControl('', [
             Validators.required,
-            Validators.pattern('(^[A-z]).*')])
+            Validators.pattern('(^[A-z]).*')
+          ])
         );
         this.createClientForm.addControl('middlename', new UntypedFormControl('', Validators.pattern('(^[A-z]).*')));
         this.createClientForm.addControl(
           'lastname',
           new UntypedFormControl('', [
             Validators.required,
-            Validators.pattern('(^[A-z]).*')])
+            Validators.pattern('(^[A-z]).*')
+          ])
         );
       } else {
         this.createClientForm.removeControl('firstname');
@@ -169,7 +171,8 @@ export class ClientGeneralStepComponent implements OnInit {
           'fullname',
           new UntypedFormControl('', [
             Validators.required,
-            Validators.pattern('(^[A-z]).*')])
+            Validators.pattern('(^[A-z]).*')
+          ])
         );
         this.createClientForm.addControl(
           'clientNonPersonDetails',

src/app/clients/client-stepper/client-preview-step/client-preview-step.component.html

@@ -5,11 +5,15 @@
 
   <div class="flex-fill">
     <span class="flex-40">{{ 'labels.inputs.name' | translate }}</span>
-    <span class="flex-60" *ngIf="client.legalFormId === 2">{{ client.fullname }}</span>
-    <span class="flex-60" *ngIf="client.legalFormId === 1"
-      >{{ client.firstname }}
-      {{ client.middlename ? client.middlename + ' ' + client.lastname : client.lastname }}</span
-    >
+    @if (client.legalFormId === 2) {
+      <span class="flex-60">{{ client.fullname }}</span>
+    }
+    @if (client.legalFormId === 1) {
+      <span class="flex-60"
+        >{{ client.firstname }}
+        {{ client.middlename ? client.middlename + ' ' + client.lastname : client.lastname }}</span
+      >
+    }
   </div>
 
   <div class="flex-fill">
@@ -22,209 +26,239 @@
     <span class="flex-60">{{ client.legalFormId | find: clientTemplate.clientLegalFormOptions : 'id' : 'value' }}</span>
   </div>
 
-  <div class="flex-fill" *ngIf="client.staffId">
-    <span class="flex-40">{{ 'labels.inputs.Staff' | translate }}</span>
-    <span class="flex-60">{{ client.staffId | find: clientTemplate.staffOptions : 'id' : 'displayName' }}</span>
-  </div>
+  @if (client.staffId) {
+    <div class="flex-fill">
+      <span class="flex-40">{{ 'labels.inputs.Staff' | translate }}</span>
+      <span class="flex-60">{{ client.staffId | find: clientTemplate.staffOptions : 'id' : 'displayName' }}</span>
+    </div>
+  }
 
-  <div class="flex-fill" *ngIf="client.dateOfBirth">
-    <span class="flex-40">{{ client.legalFormId === 1 ? 'Date of Birth' : 'Incorporation Date' }}</span>
-    <span class="flex-60">{{ client.dateOfBirth | dateFormat }}</span>
-  </div>
+  @if (client.dateOfBirth) {
+    <div class="flex-fill">
+      <span class="flex-40">{{ client.legalFormId === 1 ? 'Date of Birth' : 'Incorporation Date' }}</span>
+      <span class="flex-60">{{ client.dateOfBirth | dateFormat }}</span>
+    </div>
+  }
 
-  <div class="flex-fill" *ngIf="client.externalId">
-    <span class="flex-40">{{ 'labels.inputs.External Id' | translate }}</span>
-    <span class="flex-60">
-      <mifosx-external-identifier externalId="{{ client.externalId }}"></mifosx-external-identifier>
-    </span>
-  </div>
+  @if (client.externalId) {
+    <div class="flex-fill">
+      <span class="flex-40">{{ 'labels.inputs.External Id' | translate }}</span>
+      <span class="flex-60">
+        <mifosx-external-identifier externalId="{{ client.externalId }}"></mifosx-external-identifier>
+      </span>
+    </div>
+  }
 
-  <div class="flex-fill" *ngIf="client.mobileNo">
-    <span class="flex-40">{{ 'labels.inputs.Mobile No' | translate }}</span>
-    <span class="flex-60">{{ client.mobileNo }}</span>
-  </div>
+  @if (client.mobileNo) {
+    <div class="flex-fill">
+      <span class="flex-40">{{ 'labels.inputs.Mobile No' | translate }}</span>
+      <span class="flex-60">{{ client.mobileNo }}</span>
+    </div>
+  }
 
-  <div class="flex-fill" *ngIf="client.emailAddress">
-    <span class="flex-40">{{ 'labels.inputs.Email Address' | translate }}</span>
-    <span class="flex-60">{{ client.emailAddress }}</span>
-  </div>
+  @if (client.emailAddress) {
+    <div class="flex-fill">
+      <span class="flex-40">{{ 'labels.inputs.Email Address' | translate }}</span>
+      <span class="flex-60">{{ client.emailAddress }}</span>
+    </div>
+  }
 
-  <div class="flex-fill" *ngIf="client.clientTypeId">
-    <span class="flex-40">{{ 'labels.inputs.Client Type' | translate }}</span>
-    <span class="flex-60">{{ client.clientTypeId | find: clientTemplate.clientTypeOptions : 'id' : 'name' }}</span>
-  </div>
+  @if (client.clientTypeId) {
+    <div class="flex-fill">
+      <span class="flex-40">{{ 'labels.inputs.Client Type' | translate }}</span>
+      <span class="flex-60">{{ client.clientTypeId | find: clientTemplate.clientTypeOptions : 'id' : 'name' }}</span>
+    </div>
+  }
 
-  <div class="flex-fill" *ngIf="client.clientClassificationId">
-    <span class="flex-40">{{ 'labels.inputs.Client Classification' | translate }}</span>
-    <span class="flex-60">{{
-      client.clientClassificationId | find: clientTemplate.clientClassificationOptions : 'id' : 'name'
-    }}</span>
-  </div>
+  @if (client.clientClassificationId) {
+    <div class="flex-fill">
+      <span class="flex-40">{{ 'labels.inputs.Client Classification' | translate }}</span>
+      <span class="flex-60">{{
+        client.clientClassificationId | find: clientTemplate.clientClassificationOptions : 'id' : 'name'
+      }}</span>
+    </div>
+  }
 
-  <div class="flex-fill" *ngIf="client.savingsProductId">
-    <span class="flex-40">{{ 'labels.inputs.Savings Product' | translate }}</span>
-    <span class="flex-60">{{
-      client.savingsProductId | find: clientTemplate.savingProductOptions : 'id' : 'name'
-    }}</span>
-  </div>
+  @if (client.savingsProductId) {
+    <div class="flex-fill">
+      <span class="flex-40">{{ 'labels.inputs.Savings Product' | translate }}</span>
+      <span class="flex-60">{{
+        client.savingsProductId | find: clientTemplate.savingProductOptions : 'id' : 'name'
+      }}</span>
+    </div>
+  }
 
-  <div class="flex-fill" *ngIf="client.submittedOnDate">
-    <span class="flex-40">{{ 'labels.inputs.Submitted On Date' | translate }}</span>
-    <span class="flex-60">{{ client.submittedOnDate | dateFormat }}</span>
-  </div>
+  @if (client.submittedOnDate) {
+    <div class="flex-fill">
+      <span class="flex-40">{{ 'labels.inputs.Submitted On Date' | translate }}</span>
+      <span class="flex-60">{{ client.submittedOnDate | dateFormat }}</span>
+    </div>
+  }
 
   <div class="flex-fill">
     <span class="flex-40">{{ 'labels.inputs.Active' | translate }}?</span>
     <span class="flex-60">{{ client.active | yesNo }}</span>
   </div>
 
-  <div class="flex-fill" *ngIf="client.activationDate">
-    <span class="flex-40">{{ 'labels.inputs.Activation Date' | translate }}</span>
-    <span class="flex-60">{{ client.activationDate | dateFormat }}</span>
-  </div>
-
-  <ng-container *ngIf="client.legalFormId === 1">
-    <div class="flex-fill" *ngIf="client.genderId">
-      <span class="flex-40">{{ 'labels.inputs.Gender' | translate }}</span>
-      <span class="flex-60">{{ client.genderId | find: clientTemplate.genderOptions : 'id' : 'name' }}</span>
+  @if (client.activationDate) {
+    <div class="flex-fill">
+      <span class="flex-40">{{ 'labels.inputs.Activation Date' | translate }}</span>
+      <span class="flex-60">{{ client.activationDate | dateFormat }}</span>
     </div>
+  }
 
+  @if (client.legalFormId === 1) {
+    @if (client.genderId) {
+      <div class="flex-fill">
+        <span class="flex-40">{{ 'labels.inputs.Gender' | translate }}</span>
+        <span class="flex-60">{{ client.genderId | find: clientTemplate.genderOptions : 'id' : 'name' }}</span>
+      </div>
+    }
     <div class="flex-fill">
       <span class="flex-40">{{ 'labels.inputs.Is staff' | translate }}?</span>
       <span class="flex-60">{{ client.isStaff | yesNo }}</span>
     </div>
-  </ng-container>
-
-  <ng-container *ngIf="client.legalFormId === 2">
-    <div class="flex-fill" *ngIf="client.clientNonPersonDetails.incorpValidityTillDate">
-      <span class="flex-40">{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</span>
-      <span class="flex-60">{{ client.clientNonPersonDetails.incorpValidityTillDate | dateFormat }}</span>
-    </div>
+  }
 
+  @if (client.legalFormId === 2) {
+    @if (client.clientNonPersonDetails.incorpValidityTillDate) {
+      <div class="flex-fill">
+        <span class="flex-40">{{ 'labels.inputs.Incorporation Validity Till Date' | translate }}</span>
+        <span class="flex-60">{{ client.clientNonPersonDetails.incorpValidityTillDate | dateFormat }}</span>
+      </div>
+    }
     <div class="flex-fill">
       <span class="flex-40">{{ 'labels.inputs.Incorportation Number' | translate }}</span>
       <span class="flex-60">{{ client.clientNonPersonDetails.incorpNumber || 'Not Provided' }}</span>
     </div>
-
-    <div class="flex-fill" *ngIf="client.clientNonPersonDetails.mainBusinessLineId">
-      <span class="flex-40">{{ 'labels.inputs.Main Business Line' | translate }}</span>
-      <span class="flex-60">{{
-        client.clientNonPersonDetails.mainBusinessLineId
-          | find: clientTemplate.clientNonPersonMainBusinessLineOptions : 'id' : 'name'
-      }}</span>
-    </div>
-
-    <div class="flex-fill" *ngIf="client.clientNonPersonDetails.constitutionId">
-      <span class="flex-40">{{ 'labels.inputs.Constitution' | translate }}</span>
-      <span class="flex-60">{{
-        client.clientNonPersonDetails.constitutionId
-          | find: clientTemplate.clientNonPersonConstitutionOptions : 'id' : 'name'
-      }}</span>
-    </div>
-
+    @if (client.clientNonPersonDetails.mainBusinessLineId) {
+      <div class="flex-fill">
+        <span class="flex-40">{{ 'labels.inputs.Main Business Line' | translate }}</span>
+        <span class="flex-60">{{
+          client.clientNonPersonDetails.mainBusinessLineId
+            | find: clientTemplate.clientNonPersonMainBusinessLineOptions : 'id' : 'name'
+        }}</span>
+      </div>
+    }
+    @if (client.clientNonPersonDetails.constitutionId) {
+      <div class="flex-fill">
+        <span class="flex-40">{{ 'labels.inputs.Constitution' | translate }}</span>
+        <span class="flex-60">{{
+          client.clientNonPersonDetails.constitutionId
+            | find: clientTemplate.clientNonPersonConstitutionOptions : 'id' : 'name'
+        }}</span>
+      </div>
+    }
     <div class="flex-fill">
       <span class="flex-40">{{ 'labels.inputs.Remarks' | translate }}</span>
       <span class="flex-60">{{ client.clientNonPersonDetails.remarks || 'N/A' }}</span>
     </div>
-  </ng-container>
+  }
 
-  <div *ngIf="client.familyMembers.length" class="layout-row-wrap responsive-column flex-fill m-b-20">
-    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Family Members' | translate }}</h3>
+  @if (client.familyMembers.length) {
+    <div class="layout-row-wrap responsive-column flex-fill m-b-20">
+      <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Family Members' | translate }}</h3>
+      <mat-divider class="flex-fill"></mat-divider>
+      <mat-accordion class="flex-fill m-t-5">
+        @for (member of client.familyMembers; track member) {
+          <mat-expansion-panel class="family-member">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                {{ member.firstName }}
+                {{ member.middleName ? member.middleName + ' ' + member.lastName : member.lastName }}
+              </mat-panel-title>
+              <mat-panel-description>
+                {{ member.relationship }}
+              </mat-panel-description>
+            </mat-expansion-panel-header>
+            <mat-divider></mat-divider>
+            <p>
+              {{ 'labels.inputs.First Name' | translate }} : {{ member.firstName }}<br />
+              {{ 'labels.inputs.Middle Name' | translate }} : {{ member.middleName }}<br />
+              {{ 'labels.inputs.Last Name' | translate }} : {{ member.lastName }}<br />
+              {{ 'labels.inputs.Qualification' | translate }} : {{ member.qualification }}<br />
+              {{ 'labels.inputs.Relationship' | translate }} :
+              {{ member.relationshipId | find: clientTemplate.familyMemberOptions.relationshipIdOptions : 'id' : 'name'
+              }}<br />
+              {{ 'labels.inputs.Age' | translate }} : {{ member.age }}<br />
+              {{ 'labels.inputs.Is Dependent' | translate }} : {{ member.isDependent ? 'Yes' : 'No' }}<br />
+              {{ 'labels.inputs.Marital Status' | translate }} :
+              {{
+                member.maritalStatusId
+                  | find: clientTemplate.familyMemberOptions.maritalStatusIdOptions : 'id' : 'name'
+              }}<br />
+              {{ 'labels.inputs.Gender' | translate }} :
+              {{ member.genderId | find: clientTemplate.familyMemberOptions.genderIdOptions : 'id' : 'name' }}<br />
+              {{ 'labels.inputs.Profession' | translate }} :
+              {{ member.professionId | find: clientTemplate.familyMemberOptions.professionIdOptions : 'id' : 'name'
+              }}<br />
+              {{ 'labels.inputs.Date Of Birth' | translate }} : {{ member.dateOfBirth | dateFormat }}<br />
+            </p>
+          </mat-expansion-panel>
+        }
+      </mat-accordion>
+    </div>
+  }
 
-    <mat-divider class="flex-fill"></mat-divider>
-    <mat-accordion class="flex-fill m-t-5">
-      <mat-expansion-panel *ngFor="let member of client.familyMembers" class="family-member">
-        <mat-expansion-panel-header>
-          <mat-panel-title>
-            {{ member.firstName }} {{ member.middleName ? member.middleName + ' ' + member.lastName : member.lastName }}
-          </mat-panel-title>
-
-          <mat-panel-description>
-            {{ member.relationship }}
-          </mat-panel-description>
-        </mat-expansion-panel-header>
-
-        <mat-divider></mat-divider>
-
-        <p>
-          {{ 'labels.inputs.First Name' | translate }} : {{ member.firstName }}<br />
-          {{ 'labels.inputs.Middle Name' | translate }} : {{ member.middleName }}<br />
-          {{ 'labels.inputs.Last Name' | translate }} : {{ member.lastName }}<br />
-          {{ 'labels.inputs.Qualification' | translate }} : {{ member.qualification }}<br />
-          {{ 'labels.inputs.Relationship' | translate }} :
-          {{ member.relationshipId | find: clientTemplate.familyMemberOptions.relationshipIdOptions : 'id' : 'name'
-          }}<br />
-          {{ 'labels.inputs.Age' | translate }} : {{ member.age }}<br />
-          {{ 'labels.inputs.Is Dependent' | translate }} : {{ member.isDependent ? 'Yes' : 'No' }}<br />
-          {{ 'labels.inputs.Marital Status' | translate }} :
-          {{ member.maritalStatusId | find: clientTemplate.familyMemberOptions.maritalStatusIdOptions : 'id' : 'name'
-          }}<br />
-          {{ 'labels.inputs.Gender' | translate }} :
-          {{ member.genderId | find: clientTemplate.familyMemberOptions.genderIdOptions : 'id' : 'name' }}<br />
-          {{ 'labels.inputs.Profession' | translate }} :
-          {{ member.professionId | find: clientTemplate.familyMemberOptions.professionIdOptions : 'id' : 'name' }}<br />
-          {{ 'labels.inputs.Date Of Birth' | translate }} : {{ member.dateOfBirth | dateFormat }}<br />
-        </p>
-      </mat-expansion-panel>
-    </mat-accordion>
-  </div>
-
-  <div
-    class="flex-fill layout-row-wrap responsive-column"
-    *ngIf="clientTemplate.isAddressEnabled && client.address && client.address.length"
-  >
-    <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Address' | translate }}</h3>
-
-    <mat-divider class="flex-fill"></mat-divider>
-    <mat-accordion class="flex-fill m-t-5">
-      <mat-expansion-panel *ngFor="let address of client.address" class="address">
-        <mat-expansion-panel-header>
-          <mat-panel-title>
-            {{ getSelectedValue('addressTypeIdOptions', address.addressTypeId)?.name }}
-          </mat-panel-title>
-
-          <mat-panel-description>
-            {{ address.relationship }}
-          </mat-panel-description>
-        </mat-expansion-panel-header>
-
-        <mat-divider></mat-divider>
-
-        <p>
-          <span *ngIf="isFieldEnabled('street')"
-            >{{ 'labels.inputs.Street' | translate }} : {{ address.street }}<br
-          /></span>
-          <span *ngIf="isFieldEnabled('addressLine1')"
-            >{{ 'labels.inputs.Address Line' | translate }} 1 : {{ address.addressLine1 }}<br
-          /></span>
-          <span *ngIf="isFieldEnabled('addressLine2')"
-            >{{ 'labels.inputs.Address Line' | translate }} 2 : {{ address.addressLine2 }}<br
-          /></span>
-          <span *ngIf="isFieldEnabled('addressLine3')"
-            >{{ 'labels.inputs.Address Line' | translate }} 3 : {{ address.addressLine3 }}<br
-          /></span>
-          <span *ngIf="isFieldEnabled('townVillage')"
-            >{{ 'labels.inputs.Town / Village' | translate }} : {{ address.townVillage }}<br
-          /></span>
-          <span *ngIf="isFieldEnabled('city')">{{ 'labels.inputs.City' | translate }} : {{ address.city }}<br /></span>
-          <span *ngIf="isFieldEnabled('stateProvinceId')"
-            >{{ 'labels.inputs.State / Province' | translate }} :
-            {{ getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name }}<br
-          /></span>
-          <span *ngIf="isFieldEnabled('countryId')"
-            >{{ 'labels.inputs.Country' | translate }} :
-            {{ getSelectedValue('countryIdOptions', address.countryId)?.name }}<br
-          /></span>
-          <span *ngIf="isFieldEnabled('postalCode')"
-            >{{ 'labels.inputs.Postal Code' | translate }} : {{ address.postalCode }}<br
-          /></span>
-          <span *ngIf="isFieldEnabled('isActive')"
-            >{{ 'labels.inputs.Active Status' | translate }} : {{ address.isActive }}<br
-          /></span>
-        </p>
-      </mat-expansion-panel>
-    </mat-accordion>
-  </div>
+  @if (clientTemplate.isAddressEnabled && client.address && client.address.length) {
+    <div class="flex-fill layout-row-wrap responsive-column">
+      <h3 class="mat-h3 flex-fill">{{ 'labels.heading.Address' | translate }}</h3>
+      <mat-divider class="flex-fill"></mat-divider>
+      <mat-accordion class="flex-fill m-t-5">
+        @for (address of client.address; track address) {
+          <mat-expansion-panel class="address">
+            <mat-expansion-panel-header>
+              <mat-panel-title>
+                {{ getSelectedValue('addressTypeIdOptions', address.addressTypeId)?.name }}
+              </mat-panel-title>
+              <mat-panel-description>
+                {{ address.relationship }}
+              </mat-panel-description>
+            </mat-expansion-panel-header>
+            <mat-divider></mat-divider>
+            <p>
+              @if (isFieldEnabled('street')) {
+                <span>{{ 'labels.inputs.Street' | translate }} : {{ address.street }}<br /></span>
+              }
+              @if (isFieldEnabled('addressLine1')) {
+                <span>{{ 'labels.inputs.Address Line' | translate }} 1 : {{ address.addressLine1 }}<br /></span>
+              }
+              @if (isFieldEnabled('addressLine2')) {
+                <span>{{ 'labels.inputs.Address Line' | translate }} 2 : {{ address.addressLine2 }}<br /></span>
+              }
+              @if (isFieldEnabled('addressLine3')) {
+                <span>{{ 'labels.inputs.Address Line' | translate }} 3 : {{ address.addressLine3 }}<br /></span>
+              }
+              @if (isFieldEnabled('townVillage')) {
+                <span>{{ 'labels.inputs.Town / Village' | translate }} : {{ address.townVillage }}<br /></span>
+              }
+              @if (isFieldEnabled('city')) {
+                <span>{{ 'labels.inputs.City' | translate }} : {{ address.city }}<br /></span>
+              }
+              @if (isFieldEnabled('stateProvinceId')) {
+                <span
+                  >{{ 'labels.inputs.State / Province' | translate }} :
+                  {{ getSelectedValue('stateProvinceIdOptions', address.stateProvinceId)?.name }}<br
+                /></span>
+              }
+              @if (isFieldEnabled('countryId')) {
+                <span
+                  >{{ 'labels.inputs.Country' | translate }} :
+                  {{ getSelectedValue('countryIdOptions', address.countryId)?.name }}<br
+                /></span>
+              }
+              @if (isFieldEnabled('postalCode')) {
+                <span>{{ 'labels.inputs.Postal Code' | translate }} : {{ address.postalCode }}<br /></span>
+              }
+              @if (isFieldEnabled('isActive')) {
+                <span>{{ 'labels.inputs.Active Status' | translate }} : {{ address.isActive }}<br /></span>
+              }
+            </p>
+          </mat-expansion-panel>
+        }
+      </mat-accordion>
+    </div>
+  }
 </div>
 
 <div class="layout-row responsive-column align-center gap-2px margin-t">