Chore: Upgraded to Angular v17 and all the refactoring for that

Chore: Updated all dependencies in overlord

overlord/src/app/account/account-detail/account-detail.component.html

@@ -25,9 +25,11 @@
         <mat-form-field class="flex-auto">
           <mat-label>Account Type</mat-label>
           <mat-select formControlName="type">
-            <mat-option *ngFor="let at of accountTypes" [value]="at.id">
-              {{ at.name }}
-            </mat-option>
+            @for (at of accountTypes; track at) {
+              <mat-option [value]="at.id">
+                {{ at.name }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </div>
@@ -39,9 +41,11 @@
         <mat-form-field class="flex-auto">
           <mat-label>Cost Centre</mat-label>
           <mat-select formControlName="costCentre">
-            <mat-option *ngFor="let cs of costCentres" [value]="cs.id">
-              {{ cs.name }}
-            </mat-option>
+            @for (cs of costCentres; track cs) {
+              <mat-option [value]="cs.id">
+                {{ cs.name }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </div>
@@ -49,6 +53,8 @@
   </mat-card-content>
   <mat-card-actions>
     <button mat-raised-button color="primary" (click)="save()" class="mr-5">Save</button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">Delete</button>
+    @if (!!item.id) {
+      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+    }
   </mat-card-actions>
 </mat-card>

overlord/src/app/account/account-list/account-list.component.html

@@ -23,7 +23,9 @@
         <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
         <mat-cell *matCellDef="let row">
           <a [routerLink]="['/accounts', row.id]">
-            <mat-icon matSuffix *ngIf="row.isStarred" class="gold">star </mat-icon>
+            @if (row.isStarred) {
+              <mat-icon matSuffix class="gold">star </mat-icon>
+            }
             {{ row.name }}
           </a>
         </mat-cell>

overlord/src/app/attendance/attendance.component.html

@@ -43,9 +43,11 @@
           <mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
           <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="flex-auto">
             <mat-select formControlName="attendanceType" name="attendanceType">
-              <mat-option *ngFor="let at of attendanceTypes" [value]="at.id">
-                {{ at.name }}
-              </mat-option>
+              @for (at of attendanceTypes; track at) {
+                <mat-option [value]="at.id">
+                  {{ at.name }}
+                </mat-option>
+              }
             </mat-select>
           </mat-cell>
         </ng-container>
@@ -55,19 +57,20 @@
           <mat-header-cell *matHeaderCellDef>Prints</mat-header-cell>
           <mat-cell *matCellDef="let row; let i = index" class="no-bg">
             {{ row.prints }}
-            <mat-icon class="no-bg" *ngIf="!form.controls.attendances.controls[i].controls.attendanceType.pristine"
-              >new_releases</mat-icon
-            >
+            @if (!form.controls.attendances.controls[i].controls.attendanceType.pristine) {
+              <mat-icon class="no-bg">new_releases</mat-icon>
+            }
             <mat-chip-set class="no-bg">
-              <mat-chip-option
-                *ngIf="row.hoursWorked.length"
-                class="no-bg"
-                selected
-                selectable="false"
-                [color]="row.fullDay === true ? 'primary' : 'warn'"
-              >
-                {{ row.hoursWorked }}
-              </mat-chip-option>
+              @if (row.hoursWorked.length) {
+                <mat-chip-option
+                  class="no-bg"
+                  selected
+                  selectable="false"
+                  [color]="row.fullDay === true ? 'primary' : 'warn'"
+                >
+                  {{ row.hoursWorked }}
+                </mat-chip-option>
+              }
             </mat-chip-set>
           </mat-cell>
         </ng-container>

overlord/src/app/attendance/attendance.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { FormArray, FormControl, FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 import { BehaviorSubject } from 'rxjs';
 
 import { AuthService } from '../auth/auth.service';

overlord/src/app/auth/login/login.component.html

@@ -18,13 +18,15 @@
         </mat-form-field>
       </div>
       <mat-divider></mat-divider>
-      <h2 *ngIf="showOtp">Client ID: {{ clientId }}</h2>
-      <div class="flex flex-row justify-around content-start items-start" *ngIf="showOtp">
-        <mat-form-field class="flex-auto">
-          <mat-label>Otp</mat-label>
-          <input matInput formControlName="otp" />
-        </mat-form-field>
-      </div>
+      @if (showOtp) {
+        <h2>Client ID: {{ clientId }}</h2>
+        <div class="flex flex-row justify-around content-start items-start">
+          <mat-form-field class="flex-auto">
+            <mat-label>Otp</mat-label>
+            <input matInput formControlName="otp" />
+          </mat-form-field>
+        </div>
+      }
     </form>
   </mat-card-content>
   <mat-card-actions>

overlord/src/app/balance-sheet/balance-sheet.component.ts

@@ -3,7 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 
 import { BalanceSheet } from './balance-sheet';
 import { BalanceSheetDataSource } from './balance-sheet-datasource';

overlord/src/app/batch-integrity-report/batch-integrity-report.component.html

@@ -8,7 +8,7 @@
       <ng-container matColumnDef="batch">
         <mat-header-cell *matHeaderCellDef>Batch</mat-header-cell>
         <mat-cell *matCellDef="let row">
-          {{ row.product }} dated {{ row.date }} @ {{ row.price | currency: 'INR' }} is showing
+          {{ row.product }} dated {{ row.date }} &#64; {{ row.price | currency: 'INR' }} is showing
           {{ row.showing }} instead of {{ row.actual }}
         </mat-cell>
       </ng-container>
@@ -18,10 +18,12 @@
         <mat-header-cell *matHeaderCellDef>Details</mat-header-cell>
         <mat-cell *matCellDef="let row">
           <ul>
-            <li *ngFor="let detail of row.details">
-              <a [routerLink]="detail.url">{{ detail.type }}</a> on {{ detail.date }} of {{ detail.quantity }} @
-              {{ detail.price | currency: 'INR' }}
-            </li>
+            @for (detail of row.details; track detail) {
+              <li>
+                <a [routerLink]="detail.url">{{ detail.type }}</a> on {{ detail.date }} of {{ detail.quantity }} &#64;
+                {{ detail.price | currency: 'INR' }}
+              </li>
+            }
           </ul>
         </mat-cell>
       </ng-container>

overlord/src/app/cash-flow/cash-flow.component.ts

@@ -1,7 +1,7 @@
 import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 
 import { CashFlow } from './cash-flow';
 import { CashFlowDataSource } from './cash-flow-datasource';

overlord/src/app/client/client-list/client-list.component.html

@@ -40,7 +40,7 @@
       <ng-container matColumnDef="last">
         <mat-header-cell *matHeaderCellDef mat-sort-header>Last Login</mat-header-cell>
         <mat-cell *matCellDef="let row"
-          >{{ row.lastUser }} @ {{ row.lastDate ? (row.lastDate | localTime) : 'Never' }}</mat-cell
+          >{{ row.lastUser }} &#64; {{ row.lastDate ? (row.lastDate | localTime) : 'Never' }}</mat-cell
         >
       </ng-container>
 

overlord/src/app/closing-stock/closing-stock.component.html

@@ -2,9 +2,11 @@
   <mat-card-header>
     <mat-card-title-group>
       <mat-card-title>Closing Stock</mat-card-title>
-      <button mat-icon-button *ngIf="dataSource.data.length" (click)="exportCsv()">
-        <mat-icon>save_alt</mat-icon>
-      </button>
+      @if (dataSource.data.length) {
+        <button mat-icon-button (click)="exportCsv()">
+          <mat-icon>save_alt</mat-icon>
+        </button>
+      }
     </mat-card-title-group>
   </mat-card-header>
   <mat-card-content>
@@ -13,9 +15,11 @@
         <mat-form-field class="flex-auto basis-2/5 mr-5">
           <mat-label>Department</mat-label>
           <mat-select formControlName="costCentre" name="costCentre">
-            <mat-option *ngFor="let at of costCentres" [value]="at.id">
-              {{ at.name }}
-            </mat-option>
+            @for (at of costCentres; track at) {
+              <mat-option [value]="at.id">
+                {{ at.name }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-2/5 mr-5">
@@ -81,9 +85,11 @@
                 name="costCentre"
                 (selectionChange)="updateDepartment($event.value, row)"
               >
-                <mat-option *ngFor="let at of costCentres" [value]="at.id">
-                  {{ at.name }}
-                </mat-option>
+                @for (at of costCentres; track at) {
+                  <mat-option [value]="at.id">
+                    {{ at.name }}
+                  </mat-option>
+                }
               </mat-select>
             </mat-form-field>
           </mat-cell>
@@ -111,16 +117,11 @@
   </mat-card-content>
   <mat-card-actions>
     <button mat-raised-button color="primary" (click)="save()" [disabled]="form.pristine">Save</button>
-    <button
-      mat-raised-button
-      (click)="post()"
-      *ngIf="canDelete()"
-      [disabled]="info.posted || !auth.allowed('post-vouchers')"
-    >
-      {{ info.posted ? 'Posted' : 'Post' }}
-    </button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="canDelete()" [disabled]="!canSave()">
-      Delete
-    </button>
+    @if (canDelete()) {
+      <button mat-raised-button (click)="post()" [disabled]="info.posted || !auth.allowed('post-vouchers')">
+        {{ info.posted ? 'Posted' : 'Post' }}
+      </button>
+      <button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
+    }
   </mat-card-actions>
 </mat-card>

overlord/src/app/closing-stock/closing-stock.component.ts

@@ -5,7 +5,7 @@ import { MatPaginator } from '@angular/material/paginator';
 import { MatSelectChange } from '@angular/material/select';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 
 import { AuthService } from '../auth/auth.service';
 import { CostCentre } from '../core/cost-centre';

overlord/src/app/core/nav-bar/nav-bar.component.html

@@ -69,13 +69,17 @@
     <a mat-menu-item routerLink="/clients">Clients</a>
     <a mat-menu-item routerLink="/settings">Settings</a>
   </mat-menu>
-  <button mat-button [matMenuTriggerFor]="userMenu" *ngIf="(auth.currentUser | async)?.name as name">
-    <mat-icon>account_box</mat-icon>
-    {{ name }}
-  </button>
-  <a mat-button routerLink="/login" *ngIf="(auth.currentUser | async) === null">
-    <mat-icon>account_box</mat-icon>
-    Login</a
-  >
+  @if ((auth.currentUser | async)?.name; as name) {
+    <button mat-button [matMenuTriggerFor]="userMenu">
+      <mat-icon>account_box</mat-icon>
+      {{ name }}
+    </button>
+  }
+  @if ((auth.currentUser | async) === null) {
+    <a mat-button routerLink="/login">
+      <mat-icon>account_box</mat-icon>
+      Login</a
+    >
+  }
 </mat-toolbar>
 <div class="toolbar-fix"></div>

overlord/src/app/daybook/daybook.component.ts

@@ -3,7 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 
 import { Daybook } from './daybook';
 import { DaybookDataSource } from './daybook-datasource';

overlord/src/app/employee-attendance/employee-attendance.component.html

@@ -47,7 +47,9 @@
             [displayWith]="displayFn"
             (optionSelected)="selected($event)"
           >
-            <mat-option *ngFor="let employee of employees | async" [value]="employee">{{ employee.name }}</mat-option>
+            @for (employee of employees | async; track employee) {
+              <mat-option [value]="employee">{{ employee.name }}</mat-option>
+            }
           </mat-autocomplete>
         </mat-form-field>
         <button mat-raised-button class="flex-auto basis-1/5" color="primary" (click)="show()">Show</button>
@@ -64,9 +66,11 @@
           <mat-header-cell *matHeaderCellDef>Status</mat-header-cell>
           <mat-cell *matCellDef="let row; let i = index" [formGroupName]="i" class="flex flex-auto">
             <mat-select formControlName="attendanceType" name="attendanceType">
-              <mat-option *ngFor="let at of attendanceTypes" [value]="at.id">
-                {{ at.name }}
-              </mat-option>
+              @for (at of attendanceTypes; track at) {
+                <mat-option [value]="at.id">
+                  {{ at.name }}
+                </mat-option>
+              }
             </mat-select>
           </mat-cell>
         </ng-container>
@@ -76,19 +80,20 @@
           <mat-header-cell *matHeaderCellDef>Prints</mat-header-cell>
           <mat-cell *matCellDef="let row; let i = index" class="no-bg">
             {{ row.prints }}
-            <mat-icon class="no-bg" *ngIf="!form.controls.attendances.controls[i].controls.attendanceType.pristine"
-              >new_releases</mat-icon
-            >
+            @if (!form.controls.attendances.controls[i].controls.attendanceType.pristine) {
+              <mat-icon class="no-bg">new_releases</mat-icon>
+            }
             <mat-chip-set class="no-bg">
-              <mat-chip-option
-                *ngIf="row.hoursWorked.length"
-                class="no-bg"
-                selected
-                selectable="false"
-                [color]="row.fullDay === true ? 'primary' : 'warn'"
-              >
-                {{ row.hoursWorked }}
-              </mat-chip-option>
+              @if (row.hoursWorked.length) {
+                <mat-chip-option
+                  class="no-bg"
+                  selected
+                  selectable="false"
+                  [color]="row.fullDay === true ? 'primary' : 'warn'"
+                >
+                  {{ row.hoursWorked }}
+                </mat-chip-option>
+              }
             </mat-chip-set>
           </mat-cell>
         </ng-container>

overlord/src/app/employee-attendance/employee-attendance.component.ts

@@ -3,7 +3,7 @@ import { FormArray, FormControl, FormGroup } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
 import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 

overlord/src/app/employee-benefits/employee-benefits.component.html

@@ -29,7 +29,9 @@
             [displayWith]="displayFn"
             (optionSelected)="employeeSelected($event)"
           >
-            <mat-option *ngFor="let employee of employees | async" [value]="employee">{{ employee.name }}</mat-option>
+            @for (employee of employees | async; track employee) {
+              <mat-option [value]="employee">{{ employee.name }}</mat-option>
+            }
           </mat-autocomplete>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-[15%] mr-5">
@@ -117,21 +119,18 @@
     <button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()">
       {{ voucher.id ? 'Update' : 'Save' }}
     </button>
-    <button
-      mat-raised-button
-      (click)="post()"
-      *ngIf="voucher.id"
-      [disabled]="voucher.posted || !auth.allowed('post-vouchers')"
-    >
-      {{ voucher.posted ? 'Posted' : 'Post' }}
-    </button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="voucher.id" [disabled]="!canSave()">
-      Delete
-    </button>
+    @if (voucher.id) {
+      <button mat-raised-button (click)="post()" [disabled]="voucher.posted || !auth.allowed('post-vouchers')">
+        {{ voucher.posted ? 'Posted' : 'Post' }}
+      </button>
+      <button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
+    }
   </mat-card-actions>
-  <mat-card-subtitle *ngIf="voucher.id">
-    Created on <strong>{{ voucher.creationDate | localTime }}</strong> and Last Edited on
-    <strong>{{ voucher.lastEditDate | localTime }}</strong> by <strong>{{ voucher.user.name }}</strong
-    >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
-  </mat-card-subtitle>
+  @if (voucher.id) {
+    <mat-card-subtitle>
+      Created on <strong>{{ voucher.creationDate | localTime }}</strong> and Last Edited on
+      <strong>{{ voucher.lastEditDate | localTime }}</strong> by <strong>{{ voucher.user.name }}</strong
+      >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
+    </mat-card-subtitle>
+  }
 </mat-card>

overlord/src/app/employee-benefits/employee-benefits.component.ts

@@ -3,7 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
 import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 

overlord/src/app/employee-functions/employee-functions.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { MatDatepicker } from '@angular/material/datepicker';
-import * as moment from 'moment';
+import moment from 'moment';
 import { Moment } from 'moment';
 
 import { ToasterService } from '../core/toaster.service';

overlord/src/app/employee/employee-detail/employee-detail.component.html

@@ -46,9 +46,11 @@
         <mat-form-field class="flex-auto">
           <mat-label>Cost Centre</mat-label>
           <mat-select formControlName="costCentre" name="CostCentre">
-            <mat-option *ngFor="let cs of costCentres" [value]="cs.id">
-              {{ cs.name }}
-            </mat-option>
+            @for (cs of costCentres; track cs) {
+              <mat-option [value]="cs.id">
+                {{ cs.name }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </div>
@@ -64,22 +66,26 @@
         <mat-datepicker-toggle matSuffix [for]="joiningDate"></mat-datepicker-toggle>
         <mat-datepicker #joiningDate></mat-datepicker>
       </mat-form-field>
-      <mat-form-field *ngIf="!item.isActive" class="flex-auto">
-        <mat-label>Leaving Date</mat-label>
-        <input
-          matInput
-          [matDatepicker]="leavingDate"
-          (focus)="leavingDate.open()"
-          formControlName="leavingDate"
-          autocomplete="off"
-        />
-        <mat-datepicker-toggle matSuffix [for]="leavingDate"></mat-datepicker-toggle>
-        <mat-datepicker #leavingDate></mat-datepicker>
-      </mat-form-field>
+      @if (!item.isActive) {
+        <mat-form-field class="flex-auto">
+          <mat-label>Leaving Date</mat-label>
+          <input
+            matInput
+            [matDatepicker]="leavingDate"
+            (focus)="leavingDate.open()"
+            formControlName="leavingDate"
+            autocomplete="off"
+          />
+          <mat-datepicker-toggle matSuffix [for]="leavingDate"></mat-datepicker-toggle>
+          <mat-datepicker #leavingDate></mat-datepicker>
+        </mat-form-field>
+      }
     </form>
   </mat-card-content>
   <mat-card-actions>
     <button mat-raised-button color="primary" (click)="save()">Save</button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">Delete</button>
+    @if (!!item.id) {
+      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+    }
   </mat-card-actions>
 </mat-card>

overlord/src/app/employee/employee-detail/employee-detail.component.ts

@@ -2,7 +2,7 @@ import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angula
 import { FormControl, FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 
 import { CostCentre } from '../../core/cost-centre';
 import { ToasterService } from '../../core/toaster.service';

overlord/src/app/employee/employee-list/employee-list.component.html

@@ -2,9 +2,11 @@
   <mat-card-header>
     <mat-card-title-group>
       <mat-card-title>Employees</mat-card-title>
-      <button mat-icon-button *ngIf="dataSource.data.length" (click)="exportCsv()">
-        <mat-icon>save_alt</mat-icon>
-      </button>
+      @if (dataSource.data.length) {
+        <button mat-icon-button (click)="exportCsv()">
+          <mat-icon>save_alt</mat-icon>
+        </button>
+      }
       <a mat-button [routerLink]="['/employees', 'new']">
         <mat-icon>add_box</mat-icon>
         Add
@@ -32,7 +34,9 @@
         <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
         <mat-cell *matCellDef="let row">
           <a [routerLink]="['/employees', row.id]">
-            <mat-icon matSuffix *ngIf="row.isStarred" class="gold">star </mat-icon>
+            @if (row.isStarred) {
+              <mat-icon matSuffix class="gold">star </mat-icon>
+            }
             {{ row.name }}
           </a>
         </mat-cell>

overlord/src/app/entries/entries.component.html

@@ -64,7 +64,9 @@
         <mat-header-cell *matHeaderCellDef>Debit</mat-header-cell>
         <mat-cell *matCellDef="let row">
           <ul>
-            <li *ngFor="let item of row.debitNames">{{ item }}</li>
+            @for (item of row.debitNames; track item) {
+              <li>{{ item }}</li>
+            }
           </ul>
         </mat-cell>
       </ng-container>
@@ -74,7 +76,9 @@
         <mat-header-cell *matHeaderCellDef>Credit</mat-header-cell>
         <mat-cell *matCellDef="let row">
           <ul>
-            <li *ngFor="let item of row.creditNames">{{ item }}</li>
+            @for (item of row.creditNames; track item) {
+              <li>{{ item }}</li>
+            }
           </ul>
         </mat-cell>
       </ng-container>

overlord/src/app/entries/entries.component.ts

@@ -4,7 +4,7 @@ import { MatPaginator } from '@angular/material/paginator';
 import { MatRadioChange } from '@angular/material/radio';
 import { MatSort, SortDirection } from '@angular/material/sort';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 
 import { EntriesDatasource } from './entries-datasource';
 import { Report } from './report';

overlord/src/app/incentive/incentive.component.html

@@ -73,21 +73,18 @@
     <button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()">
       {{ voucher.id ? 'Update' : 'Save' }}
     </button>
-    <button
-      mat-raised-button
-      (click)="post()"
-      *ngIf="voucher.id"
-      [disabled]="voucher.posted || !auth.allowed('post-vouchers')"
-    >
-      {{ voucher.posted ? 'Posted' : 'Post' }}
-    </button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="voucher.id" [disabled]="!canSave()">
-      Delete
-    </button>
+    @if (voucher.id) {
+      <button mat-raised-button (click)="post()" [disabled]="voucher.posted || !auth.allowed('post-vouchers')">
+        {{ voucher.posted ? 'Posted' : 'Post' }}
+      </button>
+      <button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
+    }
   </mat-card-actions>
-  <mat-card-subtitle *ngIf="voucher.id">
-    Created on <strong>{{ voucher.creationDate | localTime }}</strong> and Last Edited on
-    <strong>{{ voucher.lastEditDate | localTime }}</strong> by <strong>{{ voucher.user.name }}</strong
-    >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
-  </mat-card-subtitle>
+  @if (voucher.id) {
+    <mat-card-subtitle>
+      Created on <strong>{{ voucher.creationDate | localTime }}</strong> and Last Edited on
+      <strong>{{ voucher.lastEditDate | localTime }}</strong> by <strong>{{ voucher.user.name }}</strong
+      >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
+    </mat-card-subtitle>
+  }
 </mat-card>

overlord/src/app/incentive/incentive.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { FormArray, FormControl, FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 import { BehaviorSubject } from 'rxjs';
 import { map } from 'rxjs/operators';
 

overlord/src/app/issue/issue-dialog.component.html

@@ -18,7 +18,9 @@
           [displayWith]="displayFn"
           (optionSelected)="batchSelected($event)"
         >
-          <mat-option *ngFor="let batch of batches | async" [value]="batch">{{ batch.name }}</mat-option>
+          @for (batch of batches | async; track batch) {
+            <mat-option [value]="batch">{{ batch.name }}</mat-option>
+          }
         </mat-autocomplete>
       </mat-form-field>
       <mat-form-field class="flex-auto basis-1/3">

overlord/src/app/issue/issue.component.html

@@ -20,16 +20,20 @@
         </mat-form-field>
         <mat-form-field class="flex-auto basis-[28%] mr-5">
           <mat-select formControlName="source">
-            <mat-option *ngFor="let costCentre of costCentres" [value]="costCentre.id">
-              {{ costCentre.name }}
-            </mat-option>
+            @for (costCentre of costCentres; track costCentre) {
+              <mat-option [value]="costCentre.id">
+                {{ costCentre.name }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-[28%] mr-5">
           <mat-select formControlName="destination">
-            <mat-option *ngFor="let costCentre of costCentres" [value]="costCentre.id">
-              {{ costCentre.name }}
-            </mat-option>
+            @for (costCentre of costCentres; track costCentre) {
+              <mat-option [value]="costCentre.id">
+                {{ costCentre.name }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-[16%]">
@@ -56,7 +60,9 @@
             [displayWith]="displayFn"
             (optionSelected)="batchSelected($event)"
           >
-            <mat-option *ngFor="let batch of batches | async" [value]="batch">{{ batch.name }}</mat-option>
+            @for (batch of batches | async; track batch) {
+              <mat-option [value]="batch">{{ batch.name }}</mat-option>
+            }
           </mat-autocomplete>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/4 mr-5">
@@ -123,17 +129,19 @@
     <button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()" class="mr-5">
       {{ voucher.id ? 'Update' : 'Save' }}
     </button>
-    <button mat-raised-button color="warn" (click)="newVoucher()" *ngIf="voucher.id" class="mr-5">New Entry</button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="voucher.id" [disabled]="!canSave()">
-      Delete
-    </button>
+    @if (voucher.id) {
+      <button mat-raised-button color="warn" (click)="newVoucher()" class="mr-5">New Entry</button>
+      <button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
+    }
     <span class="fill-remaining-space"></span>
-    <span *ngIf="voucher.id" class="flex">
-      Created on&nbsp;<strong>{{ voucher.creationDate | localTime }}</strong
-      >&nbsp;and Last Edited on&nbsp; <strong>{{ voucher.lastEditDate | localTime }}</strong
-      >&nbsp;by&nbsp; <strong>{{ voucher.user.name }}</strong
-      >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
-    </span>
+    @if (voucher.id) {
+      <span class="flex">
+        Created on&nbsp;<strong>{{ voucher.creationDate | localTime }}</strong
+        >&nbsp;and Last Edited on&nbsp; <strong>{{ voucher.lastEditDate | localTime }}</strong
+        >&nbsp;by&nbsp; <strong>{{ voucher.user.name }}</strong
+        >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
+      </span>
+    }
   </mat-card-actions>
   <mat-card-header>
     <mat-card-title>Other issues for the day</mat-card-title>

overlord/src/app/issue/issue.component.ts

@@ -5,7 +5,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Hotkey, HotkeysService } from 'angular2-hotkeys';
 import { round } from 'mathjs';
-import * as moment from 'moment';
+import moment from 'moment';
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 

overlord/src/app/journal/journal-dialog.component.html

@@ -18,10 +18,12 @@
           formControlName="account"
           autocomplete="off"
         />
-        <mat-hint *ngIf="accBal">
-          Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
-          <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
-        </mat-hint>
+        @if (accBal) {
+          <mat-hint>
+            Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
+            <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
+          </mat-hint>
+        }
       </mat-form-field>
       <mat-autocomplete
         #auto="matAutocomplete"
@@ -29,7 +31,9 @@
         [displayWith]="displayFn"
         (optionSelected)="accountSelected($event)"
       >
-        <mat-option *ngFor="let account of accounts | async" [value]="account">{{ account.name }}</mat-option>
+        @for (account of accounts | async; track account) {
+          <mat-option [value]="account">{{ account.name }}</mat-option>
+        }
       </mat-autocomplete>
       <mat-form-field class="flex-auto basis-1/4">
         <mat-label>Amount</mat-label>

overlord/src/app/journal/journal.component.html

@@ -46,10 +46,12 @@
             formControlName="account"
             autocomplete="off"
           />
-          <mat-hint *ngIf="accBal">
-            Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
-            <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
-          </mat-hint>
+          @if (accBal) {
+            <mat-hint>
+              Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
+              <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
+            </mat-hint>
+          }
         </mat-form-field>
         <mat-autocomplete
           #auto="matAutocomplete"
@@ -57,7 +59,9 @@
           [displayWith]="displayFn"
           (optionSelected)="accountSelected($event)"
         >
-          <mat-option *ngFor="let account of accounts | async" [value]="account">{{ account.name }}</mat-option>
+          @for (account of accounts | async; track account) {
+            <mat-option [value]="account">{{ account.name }}</mat-option>
+          }
         </mat-autocomplete>
         <mat-form-field class="flex-auto mr-5 basis-1/6">
           <mat-label>Amount</mat-label>
@@ -107,12 +111,14 @@
         <textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
       </mat-form-field>
       <div class="flex flex-row justify-center items-stretch">
-        <div class="img-container" class="flex-auto mr-5 basis-1/5" *ngFor="let item of voucher.files">
-          <img [src]="item.thumbnail" (click)="zoomImage(item)" />
-          <button mat-icon-button class="overlay" (click)="deleteImage(item)">
-            <mat-icon>delete</mat-icon>
-          </button>
-        </div>
+        @for (item of voucher.files; track item) {
+          <div class="img-container" class="flex-auto mr-5 basis-1/5">
+            <img [src]="item.thumbnail" (click)="zoomImage(item)" />
+            <button mat-icon-button class="overlay" (click)="deleteImage(item)">
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
+        }
         <div class="img-container" class="flex flex-auto basis-1/5">
           <label ng-href for="fileUp">
             <img
@@ -135,24 +141,25 @@
     <button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()" class="mr-5">
       {{ voucher.id ? 'Update' : 'Save' }}
     </button>
-    <button
-      mat-raised-button
-      (click)="post()"
-      *ngIf="voucher.id"
-      [disabled]="voucher.posted || !auth.allowed('post-vouchers')"
-      class="mr-5"
-    >
-      {{ voucher.posted ? 'Posted' : 'Post' }}
-    </button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="voucher.id" [disabled]="!canSave()">
-      Delete
-    </button>
+    @if (voucher.id) {
+      <button
+        mat-raised-button
+        (click)="post()"
+        [disabled]="voucher.posted || !auth.allowed('post-vouchers')"
+        class="mr-5"
+      >
+        {{ voucher.posted ? 'Posted' : 'Post' }}
+      </button>
+      <button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
+    }
     <span class="fill-remaining-space"></span>
-    <span *ngIf="voucher.id" class="flex">
-      Created on&nbsp;<strong>{{ voucher.creationDate | localTime }}</strong
-      >&nbsp;and Last Edited on&nbsp; <strong>{{ voucher.lastEditDate | localTime }}</strong
-      >&nbsp;by&nbsp; <strong>{{ voucher.user.name }}</strong
-      >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
-    </span>
+    @if (voucher.id) {
+      <span class="flex">
+        Created on&nbsp;<strong>{{ voucher.creationDate | localTime }}</strong
+        >&nbsp;and Last Edited on&nbsp; <strong>{{ voucher.lastEditDate | localTime }}</strong
+        >&nbsp;by&nbsp; <strong>{{ voucher.user.name }}</strong
+        >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
+      </span>
+    }
   </mat-card-actions>
 </mat-card>

overlord/src/app/journal/journal.component.ts

@@ -5,7 +5,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Hotkey, HotkeysService } from 'angular2-hotkeys';
 import { round } from 'mathjs';
-import * as moment from 'moment';
+import moment from 'moment';
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
 import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 

overlord/src/app/ledger/ledger.component.html

@@ -2,9 +2,11 @@
   <mat-card-header>
     <mat-card-title-group>
       <mat-card-title>Ledger</mat-card-title>
-      <button mat-icon-button *ngIf="dataSource.data.length" (click)="exportCsv()">
-        <mat-icon>save_alt</mat-icon>
-      </button>
+      @if (dataSource.data.length) {
+        <button mat-icon-button (click)="exportCsv()">
+          <mat-icon>save_alt</mat-icon>
+        </button>
+      }
     </mat-card-title-group>
   </mat-card-header>
   <mat-card-content>
@@ -52,7 +54,9 @@
             [displayWith]="displayFn"
             (optionSelected)="selected($event)"
           >
-            <mat-option *ngFor="let account of accounts | async" [value]="account">{{ account.name }}</mat-option>
+            @for (account of accounts | async; track account) {
+              <mat-option [value]="account">{{ account.name }}</mat-option>
+            }
           </mat-autocomplete>
         </mat-form-field>
         <button mat-raised-button class="flex-auto basis-1/5" color="primary" (click)="show()">Show</button>

overlord/src/app/ledger/ledger.component.ts

@@ -4,7 +4,7 @@ import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 import { Observable, of as observableOf } from 'rxjs';
 import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 

overlord/src/app/net-transactions/net-transactions.component.ts

@@ -3,7 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 
 import { NetTransactions } from './net-transactions';
 import { NetTransactionsDataSource } from './net-transactions-datasource';

overlord/src/app/payment/payment-dialog.component.html

@@ -12,10 +12,12 @@
           formControlName="account"
           autocomplete="off"
         />
-        <mat-hint *ngIf="accBal">
-          Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
-          <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
-        </mat-hint>
+        @if (accBal) {
+          <mat-hint>
+            Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
+            <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
+          </mat-hint>
+        }
       </mat-form-field>
       <mat-autocomplete
         #auto="matAutocomplete"
@@ -23,7 +25,9 @@
         (optionSelected)="accountSelected($event)"
         [displayWith]="displayFn"
       >
-        <mat-option *ngFor="let account of accounts | async" [value]="account">{{ account.name }}</mat-option>
+        @for (account of accounts | async; track account) {
+          <mat-option [value]="account">{{ account.name }}</mat-option>
+        }
       </mat-autocomplete>
       <mat-form-field class="flex-auto basis-1/3">
         <mat-label>Amount</mat-label>

overlord/src/app/payment/payment.component.html

@@ -30,9 +30,11 @@
         </mat-form-field>
         <mat-form-field class="flex-auto basis-2/5 mr-5">
           <mat-select formControlName="paymentAccount">
-            <mat-option *ngFor="let account of paymentAccounts" [value]="account.id">
-              {{ account.name }}
-            </mat-option>
+            @for (account of paymentAccounts; track account) {
+              <mat-option [value]="account.id">
+                {{ account.name }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/5">
@@ -53,10 +55,12 @@
             formControlName="account"
             autocomplete="off"
           />
-          <mat-hint *ngIf="accBal">
-            Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
-            <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
-          </mat-hint>
+          @if (accBal) {
+            <mat-hint>
+              Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
+              <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
+            </mat-hint>
+          }
         </mat-form-field>
         <mat-autocomplete
           #auto="matAutocomplete"
@@ -64,7 +68,9 @@
           [displayWith]="displayFn"
           (optionSelected)="accountSelected($event)"
         >
-          <mat-option *ngFor="let account of accounts | async" [value]="account">{{ account.name }}</mat-option>
+          @for (account of accounts | async; track account) {
+            <mat-option [value]="account">{{ account.name }}</mat-option>
+          }
         </mat-autocomplete>
         <mat-form-field class="flex-auto basis-1/4 mr-5">
           <mat-label>Amount</mat-label>
@@ -108,12 +114,14 @@
         <textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
       </mat-form-field>
       <div class="flex flex-row justify-center items-stretch">
-        <div class="img-container" class="flex-auto mr-5 basis-1/5" *ngFor="let item of voucher.files">
-          <img [src]="item.thumbnail" (click)="zoomImage(item)" />
-          <button mat-icon-button class="overlay" (click)="deleteImage(item)">
-            <mat-icon>delete</mat-icon>
-          </button>
-        </div>
+        @for (item of voucher.files; track item) {
+          <div class="img-container" class="flex-auto mr-5 basis-1/5">
+            <img [src]="item.thumbnail" (click)="zoomImage(item)" />
+            <button mat-icon-button class="overlay" (click)="deleteImage(item)">
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
+        }
         <div class="img-container" class="flex flex-auto basis-1/5">
           <label ng-href for="fileUp">
             <img
@@ -136,24 +144,25 @@
     <button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()" class="mr-5">
       {{ voucher.id ? 'Update' : 'Save' }}
     </button>
-    <button
-      mat-raised-button
-      (click)="post()"
-      *ngIf="voucher.id"
-      [disabled]="voucher.posted || !auth.allowed('post-vouchers')"
-      class="mr-5"
-    >
-      {{ voucher.posted ? 'Posted' : 'Post' }}
-    </button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="voucher.id" [disabled]="!canSave()">
-      Delete
-    </button>
+    @if (voucher.id) {
+      <button
+        mat-raised-button
+        (click)="post()"
+        [disabled]="voucher.posted || !auth.allowed('post-vouchers')"
+        class="mr-5"
+      >
+        {{ voucher.posted ? 'Posted' : 'Post' }}
+      </button>
+      <button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
+    }
     <span class="fill-remaining-space"></span>
-    <span *ngIf="voucher.id" class="flex">
-      Created on&nbsp;<strong>{{ voucher.creationDate | localTime }}</strong
-      >&nbsp;and Last Edited on&nbsp; <strong>{{ voucher.lastEditDate | localTime }}</strong
-      >&nbsp;by&nbsp; <strong>{{ voucher.user.name }}</strong
-      >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
-    </span>
+    @if (voucher.id) {
+      <span class="flex">
+        Created on&nbsp;<strong>{{ voucher.creationDate | localTime }}</strong
+        >&nbsp;and Last Edited on&nbsp; <strong>{{ voucher.lastEditDate | localTime }}</strong
+        >&nbsp;by&nbsp; <strong>{{ voucher.user.name }}</strong
+        >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
+      </span>
+    }
   </mat-card-actions>
 </mat-card>

overlord/src/app/payment/payment.component.ts

@@ -5,7 +5,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Hotkey, HotkeysService } from 'angular2-hotkeys';
 import { round } from 'mathjs';
-import * as moment from 'moment';
+import moment from 'moment';
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
 import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 

overlord/src/app/period/period-detail/period-detail.component.html

@@ -24,6 +24,8 @@
   </mat-card-content>
   <mat-card-actions>
     <button mat-raised-button color="primary" (click)="save()" class="mr-5">Save</button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">Delete</button>
+    @if (!!item.id) {
+      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+    }
   </mat-card-actions>
 </mat-card>

overlord/src/app/period/period-detail/period-detail.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { FormControl, FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 
 import { ToasterService } from '../../core/toaster.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';

overlord/src/app/product-ledger/product-ledger.component.html

@@ -2,9 +2,11 @@
   <mat-card-header>
     <mat-card-title-group>
       <mat-card-title>Product Ledger</mat-card-title>
-      <button mat-icon-button *ngIf="dataSource.data.length" (click)="exportCsv()">
-        <mat-icon>save_alt</mat-icon>
-      </button>
+      @if (dataSource.data.length) {
+        <button mat-icon-button (click)="exportCsv()">
+          <mat-icon>save_alt</mat-icon>
+        </button>
+      }
     </mat-card-title-group>
   </mat-card-header>
   <mat-card-content>
@@ -52,7 +54,9 @@
             [displayWith]="displayFn"
             (optionSelected)="selected($event)"
           >
-            <mat-option *ngFor="let product of products | async" [value]="product">{{ product.name }}</mat-option>
+            @for (product of products | async; track product) {
+              <mat-option [value]="product">{{ product.name }}</mat-option>
+            }
           </mat-autocomplete>
         </mat-form-field>
         <button mat-raised-button class="flex-auto basis-1/5" color="primary" (click)="show()">Show</button>

overlord/src/app/product-ledger/product-ledger.component.ts

@@ -4,7 +4,7 @@ import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 import { Observable, of as observableOf } from 'rxjs';
 import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 

overlord/src/app/product/product-detail/product-detail.component.html

@@ -35,9 +35,11 @@
         <mat-form-field class="flex-auto">
           <mat-label>Product Type</mat-label>
           <mat-select formControlName="productGroup" (selectionChange)="updatePG($event.value)">
-            <mat-option *ngFor="let pg of productGroups" [value]="pg.id">
-              {{ pg.name }}
-            </mat-option>
+            @for (pg of productGroups; track pg) {
+              <mat-option [value]="pg.id">
+                {{ pg.name }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </div>
@@ -47,67 +49,72 @@
           <input matInput #nameElement formControlName="allergen" />
         </mat-form-field>
       </div>
-      <h2 *ngIf="item.productGroup?.nutritional ?? false">Nutritional Information</h2>
-      <div
-        class="flex flex-row justify-around content-start items-start"
-        *ngIf="item.productGroup?.nutritional ?? false"
-      >
-        <mat-form-field class="flex-auto mr-5">
-          <mat-label>Protein</mat-label>
-          <input matInput formControlName="protein" />
-        </mat-form-field>
-        <mat-form-field class="flex-auto mr-5">
-          <mat-label>Carbohydrate</mat-label>
-          <input matInput formControlName="carbohydrate" />
-        </mat-form-field>
-        <mat-form-field class="flex-auto mr-5">
-          <mat-label>Total Sugar</mat-label>
-          <input matInput formControlName="totalSugar" />
-        </mat-form-field>
-        <mat-form-field class="flex-auto mr-5">
-          <mat-label>Added Sugar</mat-label>
-          <input matInput formControlName="addedSugar" />
-        </mat-form-field>
-        <mat-form-field class="flex-auto mr-5">
-          <mat-label>Total Fat</mat-label>
-          <input matInput formControlName="totalFat" />
-        </mat-form-field>
-        <mat-form-field class="flex-auto mr-5">
-          <mat-label>Saturated Fat</mat-label>
-          <input matInput formControlName="saturatedFat" />
-        </mat-form-field>
-        <mat-form-field class="flex-auto mr-5">
-          <mat-label>Trans Fat</mat-label>
-          <input matInput formControlName="transFat" />
-        </mat-form-field>
-        <mat-form-field class="flex-auto mr-5">
-          <mat-label>Cholestrol</mat-label>
-          <input matInput formControlName="cholestrol" />
-        </mat-form-field>
-        <mat-form-field class="flex-auto mr-5">
-          <mat-label>Sodium</mat-label>
-          <input matInput formControlName="sodium" />
-        </mat-form-field>
-      </div>
-      <h2 *ngIf="item.productGroup?.iceCream ?? false">Ice Cream Information</h2>
-      <div class="flex flex-row justify-around content-start items-start" *ngIf="item.productGroup?.iceCream ?? false">
-        <mat-form-field class="flex-auto mr-5">
-          <mat-label>MSNF</mat-label>
-          <input matInput formControlName="msnf" />
-        </mat-form-field>
-        <mat-form-field class="flex-auto mr-5">
-          <mat-label>Other Solids</mat-label>
-          <input matInput formControlName="otherSolids" />
-        </mat-form-field>
-        <mat-form-field class="flex-auto mr-5">
-          <mat-label>Total Solids</mat-label>
-          <input matInput formControlName="totalSolids" />
-        </mat-form-field>
-        <mat-form-field class="flex-auto mr-5">
-          <mat-label>Water</mat-label>
-          <input matInput formControlName="water" />
-        </mat-form-field>
-      </div>
+      @if (item.productGroup?.nutritional ?? false) {
+        <h2>Nutritional Information</h2>
+      }
+      @if (item.productGroup?.nutritional ?? false) {
+        <div class="flex flex-row justify-around content-start items-start">
+          <mat-form-field class="flex-auto mr-5">
+            <mat-label>Protein</mat-label>
+            <input matInput formControlName="protein" />
+          </mat-form-field>
+          <mat-form-field class="flex-auto mr-5">
+            <mat-label>Carbohydrate</mat-label>
+            <input matInput formControlName="carbohydrate" />
+          </mat-form-field>
+          <mat-form-field class="flex-auto mr-5">
+            <mat-label>Total Sugar</mat-label>
+            <input matInput formControlName="totalSugar" />
+          </mat-form-field>
+          <mat-form-field class="flex-auto mr-5">
+            <mat-label>Added Sugar</mat-label>
+            <input matInput formControlName="addedSugar" />
+          </mat-form-field>
+          <mat-form-field class="flex-auto mr-5">
+            <mat-label>Total Fat</mat-label>
+            <input matInput formControlName="totalFat" />
+          </mat-form-field>
+          <mat-form-field class="flex-auto mr-5">
+            <mat-label>Saturated Fat</mat-label>
+            <input matInput formControlName="saturatedFat" />
+          </mat-form-field>
+          <mat-form-field class="flex-auto mr-5">
+            <mat-label>Trans Fat</mat-label>
+            <input matInput formControlName="transFat" />
+          </mat-form-field>
+          <mat-form-field class="flex-auto mr-5">
+            <mat-label>Cholestrol</mat-label>
+            <input matInput formControlName="cholestrol" />
+          </mat-form-field>
+          <mat-form-field class="flex-auto mr-5">
+            <mat-label>Sodium</mat-label>
+            <input matInput formControlName="sodium" />
+          </mat-form-field>
+        </div>
+      }
+      @if (item.productGroup?.iceCream ?? false) {
+        <h2>Ice Cream Information</h2>
+      }
+      @if (item.productGroup?.iceCream ?? false) {
+        <div class="flex flex-row justify-around content-start items-start">
+          <mat-form-field class="flex-auto mr-5">
+            <mat-label>MSNF</mat-label>
+            <input matInput formControlName="msnf" />
+          </mat-form-field>
+          <mat-form-field class="flex-auto mr-5">
+            <mat-label>Other Solids</mat-label>
+            <input matInput formControlName="otherSolids" />
+          </mat-form-field>
+          <mat-form-field class="flex-auto mr-5">
+            <mat-label>Total Solids</mat-label>
+            <input matInput formControlName="totalSolids" />
+          </mat-form-field>
+          <mat-form-field class="flex-auto mr-5">
+            <mat-label>Water</mat-label>
+            <input matInput formControlName="water" />
+          </mat-form-field>
+        </div>
+      }
       <h2>Stock Keeping Units</h2>
       <div
         formGroupName="addRow"
@@ -186,6 +193,8 @@
   </mat-card-content>
   <mat-card-actions>
     <button mat-raised-button color="primary" (click)="save()" class="mr-5">Save</button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="!!item.id">Delete</button>
+    @if (!!item.id) {
+      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+    }
   </mat-card-actions>
 </mat-card>

overlord/src/app/product/product-list/product-list.component.html

@@ -2,9 +2,11 @@
   <mat-card-header>
     <mat-card-title-group>
       <mat-card-title>Products</mat-card-title>
-      <button mat-icon-button *ngIf="dataSource.data.length" (click)="exportCsv()">
-        <mat-icon>save_alt</mat-icon>
-      </button>
+      @if (dataSource.data.length) {
+        <button mat-icon-button (click)="exportCsv()">
+          <mat-icon>save_alt</mat-icon>
+        </button>
+      }
       <a mat-button [routerLink]="['/products', 'new']">
         <mat-icon>add_box</mat-icon>
         Add
@@ -26,12 +28,14 @@
         <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
         <mat-cell *matCellDef="let row">
           <ul>
-            <li *ngFor="let sku of row.skus">
-              <a [routerLink]="['/products', row.id]"
-                >{{ row.name }} ({{ showExtended ? sku.fraction + ' ' + row.fractionUnits + ' = 1 ' : ''
-                }}{{ sku.units }})</a
-              >
-            </li>
+            @for (sku of row.skus; track sku) {
+              <li>
+                <a [routerLink]="['/products', row.id]"
+                  >{{ row.name }} ({{ showExtended ? sku.fraction + ' ' + row.fractionUnits + ' = 1 ' : ''
+                  }}{{ sku.units }})</a
+                >
+              </li>
+            }
           </ul>
         </mat-cell>
       </ng-container>
@@ -41,9 +45,11 @@
         <mat-header-cell *matHeaderCellDef mat-sort-header>Cost Price</mat-header-cell>
         <mat-cell *matCellDef="let row">
           <ul>
-            <li *ngFor="let sku of row.skus">
-              {{ sku.costPrice | currency: 'INR' }}
-            </li>
+            @for (sku of row.skus; track sku) {
+              <li>
+                {{ sku.costPrice | currency: 'INR' }}
+              </li>
+            }
           </ul>
         </mat-cell>
       </ng-container>
@@ -53,9 +59,11 @@
         <mat-header-cell *matHeaderCellDef mat-sort-header>Yield</mat-header-cell>
         <mat-cell *matCellDef="let row">
           <ul>
-            <li *ngFor="let sku of row.skus">
-              {{ sku.productYield | percent: '1.2-2' }}
-            </li>
+            @for (sku of row.skus; track sku) {
+              <li>
+                {{ sku.productYield | percent: '1.2-2' }}
+              </li>
+            }
           </ul>
         </mat-cell>
       </ng-container>

overlord/src/app/profit-loss/profit-loss.component.ts

@@ -3,7 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 
 import { ProfitLoss } from './profit-loss';
 import { ProfitLossDataSource } from './profit-loss-datasource';

overlord/src/app/purchase-entries/purchase-entries.component.ts

@@ -3,7 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 
 import { PurchaseEntries } from './purchase-entries';
 import { PurchaseEntriesDataSource } from './purchase-entries-datasource';

overlord/src/app/purchase-return/purchase-return-dialog.component.html

@@ -18,7 +18,9 @@
           [displayWith]="displayFn"
           (optionSelected)="batchSelected($event)"
         >
-          <mat-option *ngFor="let batch of batches | async" [value]="batch">{{ batch.name }}</mat-option>
+          @for (batch of batches | async; track batch) {
+            <mat-option [value]="batch">{{ batch.name }}</mat-option>
+          }
         </mat-autocomplete>
       </mat-form-field>
       <mat-form-field class="flex-auto basis-1/3">

overlord/src/app/purchase-return/purchase-return.component.html

@@ -38,17 +38,21 @@
             formControlName="account"
             autocomplete="off"
           />
-          <mat-hint *ngIf="accBal">
-            Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
-            <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
-          </mat-hint>
+          @if (accBal) {
+            <mat-hint>
+              Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
+              <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
+            </mat-hint>
+          }
           <mat-autocomplete
             #autoA="matAutocomplete"
             autoActiveFirstOption
             [displayWith]="displayFn"
             (optionSelected)="accountSelected($event)"
           >
-            <mat-option *ngFor="let account of accounts | async" [value]="account">{{ account.name }}</mat-option>
+            @for (account of accounts | async; track account) {
+              <mat-option [value]="account">{{ account.name }}</mat-option>
+            }
           </mat-autocomplete>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/5">
@@ -75,7 +79,9 @@
             [displayWith]="displayFn"
             (optionSelected)="batchSelected($event)"
           >
-            <mat-option *ngFor="let batch of batches | async" [value]="batch">{{ batch.name }}</mat-option>
+            @for (batch of batches | async; track batch) {
+              <mat-option [value]="batch">{{ batch.name }}</mat-option>
+            }
           </mat-autocomplete>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/4 mr-5">
@@ -143,12 +149,14 @@
         <textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
       </mat-form-field>
       <div class="flex flex-row justify-center items-stretch mr-5">
-        <div class="img-container" class="flex-auto mr-5 basis-1/5" *ngFor="let item of voucher.files">
-          <img [src]="item.thumbnail" (click)="zoomImage(item)" />
-          <button mat-icon-button class="overlay" (click)="deleteImage(item)">
-            <mat-icon>delete</mat-icon>
-          </button>
-        </div>
+        @for (item of voucher.files; track item) {
+          <div class="img-container" class="flex-auto mr-5 basis-1/5">
+            <img [src]="item.thumbnail" (click)="zoomImage(item)" />
+            <button mat-icon-button class="overlay" (click)="deleteImage(item)">
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
+        }
         <div class="img-container" class="flex flex-auto basis-1/5">
           <label ng-href for="fileUp">
             <img
@@ -171,24 +179,25 @@
     <button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()" class="mr-5">
       {{ voucher.id ? 'Update' : 'Save' }}
     </button>
-    <button
-      mat-raised-button
-      (click)="post()"
-      *ngIf="voucher.id"
-      [disabled]="voucher.posted || !auth.allowed('post-vouchers')"
-      class="mr-5"
-    >
-      {{ voucher.posted ? 'Posted' : 'Post' }}
-    </button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="voucher.id" [disabled]="!canSave()">
-      Delete
-    </button>
+    @if (voucher.id) {
+      <button
+        mat-raised-button
+        (click)="post()"
+        [disabled]="voucher.posted || !auth.allowed('post-vouchers')"
+        class="mr-5"
+      >
+        {{ voucher.posted ? 'Posted' : 'Post' }}
+      </button>
+      <button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
+    }
     <span class="fill-remaining-space"></span>
-    <span *ngIf="voucher.id" class="flex">
-      Created on&nbsp;<strong>{{ voucher.creationDate | localTime }}</strong
-      >&nbsp;and Last Edited on&nbsp; <strong>{{ voucher.lastEditDate | localTime }}</strong
-      >&nbsp;by&nbsp; <strong>{{ voucher.user.name }}</strong
-      >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
-    </span>
+    @if (voucher.id) {
+      <span class="flex">
+        Created on&nbsp;<strong>{{ voucher.creationDate | localTime }}</strong
+        >&nbsp;and Last Edited on&nbsp; <strong>{{ voucher.lastEditDate | localTime }}</strong
+        >&nbsp;by&nbsp; <strong>{{ voucher.user.name }}</strong
+        >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
+      </span>
+    }
   </mat-card-actions>
 </mat-card>

overlord/src/app/purchase-return/purchase-return.component.ts

@@ -5,7 +5,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Hotkey, HotkeysService } from 'angular2-hotkeys';
 import { round } from 'mathjs';
-import * as moment from 'moment';
+import moment from 'moment';
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
 import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 

overlord/src/app/purchase/purchase-dialog.component.html

@@ -18,7 +18,9 @@
           [displayWith]="displayFn"
           (optionSelected)="productSelected($event)"
         >
-          <mat-option *ngFor="let product of products | async" [value]="product">{{ product.name }}</mat-option>
+          @for (product of products | async; track product) {
+            <mat-option [value]="product">{{ product.name }}</mat-option>
+          }
         </mat-autocomplete>
       </mat-form-field>
       <mat-form-field class="flex-auto basis-[12%] mr-5">

overlord/src/app/purchase/purchase.component.html

@@ -38,17 +38,21 @@
             formControlName="account"
             autocomplete="off"
           />
-          <mat-hint *ngIf="accBal">
-            Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
-            <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
-          </mat-hint>
+          @if (accBal) {
+            <mat-hint>
+              Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
+              <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
+            </mat-hint>
+          }
           <mat-autocomplete
             #autoA="matAutocomplete"
             autoActiveFirstOption
             [displayWith]="displayFn"
             (optionSelected)="accountSelected($event)"
           >
-            <mat-option *ngFor="let account of accounts | async" [value]="account">{{ account.name }}</mat-option>
+            @for (account of accounts | async; track account) {
+              <mat-option [value]="account">{{ account.name }}</mat-option>
+            }
           </mat-autocomplete>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/5">
@@ -75,7 +79,9 @@
             [displayWith]="displayFn"
             (optionSelected)="productSelected($event)"
           >
-            <mat-option *ngFor="let product of products | async" [value]="product">{{ product.name }}</mat-option>
+            @for (product of products | async; track product) {
+              <mat-option [value]="product">{{ product.name }}</mat-option>
+            }
           </mat-autocomplete>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/10 mr-5">
@@ -155,12 +161,14 @@
         <textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
       </mat-form-field>
       <div class="flex flex-row justify-center items-stretch mr-5">
-        <div class="img-container" class="flex-auto mr-5 basis-1/5" *ngFor="let item of voucher.files">
-          <img [src]="item.thumbnail" (click)="zoomImage(item)" />
-          <button mat-icon-button class="overlay" (click)="deleteImage(item)">
-            <mat-icon>delete</mat-icon>
-          </button>
-        </div>
+        @for (item of voucher.files; track item) {
+          <div class="img-container" class="flex-auto mr-5 basis-1/5">
+            <img [src]="item.thumbnail" (click)="zoomImage(item)" />
+            <button mat-icon-button class="overlay" (click)="deleteImage(item)">
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
+        }
         <div class="img-container" class="flex flex-auto basis-1/5">
           <label ng-href for="fileUp">
             <img
@@ -183,24 +191,25 @@
     <button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()" class="mr-5">
       {{ voucher.id ? 'Update' : 'Save' }}
     </button>
-    <button
-      mat-raised-button
-      (click)="post()"
-      *ngIf="voucher.id"
-      [disabled]="voucher.posted || !auth.allowed('post-vouchers')"
-      class="mr-5"
-    >
-      {{ voucher.posted ? 'Posted' : 'Post' }}
-    </button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="voucher.id" [disabled]="!canSave()">
-      Delete
-    </button>
+    @if (voucher.id) {
+      <button
+        mat-raised-button
+        (click)="post()"
+        [disabled]="voucher.posted || !auth.allowed('post-vouchers')"
+        class="mr-5"
+      >
+        {{ voucher.posted ? 'Posted' : 'Post' }}
+      </button>
+      <button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
+    }
     <span class="fill-remaining-space"></span>
-    <span *ngIf="voucher.id" class="flex">
-      Created on&nbsp;<strong>{{ voucher.creationDate | localTime }}</strong
-      >&nbsp;and Last Edited on&nbsp; <strong>{{ voucher.lastEditDate | localTime }}</strong
-      >&nbsp;by&nbsp; <strong>{{ voucher.user.name }}</strong
-      >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
-    </span>
+    @if (voucher.id) {
+      <span class="flex">
+        Created on&nbsp;<strong>{{ voucher.creationDate | localTime }}</strong
+        >&nbsp;and Last Edited on&nbsp; <strong>{{ voucher.lastEditDate | localTime }}</strong
+        >&nbsp;by&nbsp; <strong>{{ voucher.user.name }}</strong
+        >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
+      </span>
+    }
   </mat-card-actions>
 </mat-card>

overlord/src/app/purchase/purchase.component.ts

@@ -5,7 +5,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Hotkey, HotkeysService } from 'angular2-hotkeys';
 import { round } from 'mathjs';
-import * as moment from 'moment';
+import moment from 'moment';
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
 import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 

overlord/src/app/purchases/purchases.component.ts

@@ -3,7 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 
 import { Purchases } from './purchases';
 import { PurchasesDataSource } from './purchases-datasource';

overlord/src/app/rate-contract/rate-contract-detail/rate-contract-detail.component.html

@@ -27,7 +27,9 @@
             [displayWith]="displayFn"
             (optionSelected)="accountSelected($event)"
           >
-            <mat-option *ngFor="let account of accounts | async" [value]="account">{{ account.name }}</mat-option>
+            @for (account of accounts | async; track account) {
+              <mat-option [value]="account">{{ account.name }}</mat-option>
+            }
           </mat-autocomplete>
         </mat-form-field>
       </div>
@@ -62,7 +64,9 @@
             [displayWith]="displayFn"
             (optionSelected)="productSelected($event)"
           >
-            <mat-option *ngFor="let product of products | async" [value]="product">{{ product.name }}</mat-option>
+            @for (product of products | async; track product) {
+              <mat-option [value]="product">{{ product.name }}</mat-option>
+            }
           </mat-autocomplete>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/5 mr-5">

overlord/src/app/rate-contract/rate-contract-detail/rate-contract-detail.component.ts

@@ -3,7 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
 import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 

overlord/src/app/rate-contract/rate-contract-list/rate-contract-list.component.html

@@ -29,7 +29,9 @@
         <mat-header-cell *matHeaderCellDef mat-sort-header>Products</mat-header-cell>
         <mat-cell *matCellDef="let row">
           <ul>
-            <li *ngFor="let item of row.items">{{ item.sku.name }} @ {{ item.price | currency: 'INR' }}</li>
+            @for (item of row.items; track item) {
+              <li>{{ item.sku.name }} &#64; {{ item.price | currency: 'INR' }}</li>
+            }
           </ul>
         </mat-cell>
       </ng-container>

overlord/src/app/raw-material-cost/raw-material-cost.component.html

@@ -2,9 +2,11 @@
   <mat-card-header>
     <mat-card-title-group>
       <mat-card-title>Raw Material Cost</mat-card-title>
-      <button mat-icon-button *ngIf="dataSource.data.length" (click)="exportCsv()">
-        <mat-icon>save_alt</mat-icon>
-      </button>
+      @if (dataSource.data.length) {
+        <button mat-icon-button (click)="exportCsv()">
+          <mat-icon>save_alt</mat-icon>
+        </button>
+      }
     </mat-card-title-group>
   </mat-card-header>
   <mat-card-content>
@@ -42,14 +44,13 @@
       <ng-container matColumnDef="name">
         <mat-header-cell *matHeaderCellDef mat-sort-header>Name</mat-header-cell>
         <mat-cell *matCellDef="let row">
-          <a
-            *ngIf="row.url"
-            [routerLink]="row.url"
-            [queryParams]="{ startDate: info.startDate, finishDate: info.finishDate }"
-          >
-            {{ row.name }}
-          </a>
-          <span *ngIf="!row.url">{{ row.name }}</span>
+          @if (row.url) {
+            <a [routerLink]="row.url" [queryParams]="{ startDate: info.startDate, finishDate: info.finishDate }">
+              {{ row.name }}
+            </a>
+          } @else {
+            <span>{{ row.name }}</span>
+          }
         </mat-cell>
         <mat-footer-cell *matFooterCellDef>{{ info.footer?.name }}</mat-footer-cell>
       </ng-container>

overlord/src/app/raw-material-cost/raw-material-cost.component.ts

@@ -3,7 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 
 import { ToCsvService } from '../shared/to-csv.service';
 

overlord/src/app/receipt/receipt-dialog.component.html

@@ -12,10 +12,12 @@
           formControlName="account"
           autocomplete="off"
         />
-        <mat-hint *ngIf="accBal">
-          Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
-          <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
-        </mat-hint>
+        @if (accBal) {
+          <mat-hint>
+            Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
+            <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
+          </mat-hint>
+        }
       </mat-form-field>
       <mat-autocomplete
         #auto="matAutocomplete"
@@ -23,7 +25,9 @@
         [displayWith]="displayFn"
         (optionSelected)="accountSelected($event)"
       >
-        <mat-option *ngFor="let account of accounts | async" [value]="account">{{ account.name }}</mat-option>
+        @for (account of accounts | async; track account) {
+          <mat-option [value]="account">{{ account.name }}</mat-option>
+        }
       </mat-autocomplete>
       <mat-form-field class="flex-auto basis-1/3">
         <mat-label>Amount</mat-label>

overlord/src/app/receipt/receipt.component.html

@@ -30,9 +30,11 @@
         </mat-form-field>
         <mat-form-field class="flex-auto basis-2/5 mr-5">
           <mat-select formControlName="receiptAccount">
-            <mat-option *ngFor="let account of receiptAccounts" [value]="account.id">
-              {{ account.name }}
-            </mat-option>
+            @for (account of receiptAccounts; track account) {
+              <mat-option [value]="account.id">
+                {{ account.name }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/5">
@@ -53,10 +55,12 @@
             formControlName="account"
             autocomplete="off"
           />
-          <mat-hint *ngIf="accBal">
-            Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
-            <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
-          </mat-hint>
+          @if (accBal) {
+            <mat-hint>
+              Balance as on Date: <strong>{{ accBal.date | currency: 'INR' | accounting }}</strong> / Final balance:
+              <strong>{{ accBal.total | currency: 'INR' | accounting }}</strong>
+            </mat-hint>
+          }
         </mat-form-field>
         <mat-autocomplete
           #auto="matAutocomplete"
@@ -64,7 +68,9 @@
           [displayWith]="displayFn"
           (optionSelected)="accountSelected($event)"
         >
-          <mat-option *ngFor="let account of accounts | async" [value]="account">{{ account.name }}</mat-option>
+          @for (account of accounts | async; track account) {
+            <mat-option [value]="account">{{ account.name }}</mat-option>
+          }
         </mat-autocomplete>
         <mat-form-field class="flex-auto basis-1/4 mr-5">
           <mat-label>Amount</mat-label>
@@ -108,12 +114,14 @@
         <textarea matInput matAutosizeMinRows="5" formControlName="narration"></textarea>
       </mat-form-field>
       <div class="flex flex-row justify-center items-stretch">
-        <div class="img-container" class="flex-auto mr-5 basis-1/5" *ngFor="let item of voucher.files">
-          <img [src]="item.thumbnail" (click)="zoomImage(item)" />
-          <button mat-icon-button class="overlay" (click)="deleteImage(item)">
-            <mat-icon>delete</mat-icon>
-          </button>
-        </div>
+        @for (item of voucher.files; track item) {
+          <div class="img-container" class="flex-auto mr-5 basis-1/5">
+            <img [src]="item.thumbnail" (click)="zoomImage(item)" />
+            <button mat-icon-button class="overlay" (click)="deleteImage(item)">
+              <mat-icon>delete</mat-icon>
+            </button>
+          </div>
+        }
         <div class="img-container" class="flex flex-auto basis-1/5">
           <label ng-href for="fileUp">
             <img
@@ -136,24 +144,25 @@
     <button mat-raised-button color="primary" (click)="save()" [disabled]="!canSave()" class="mr-5">
       {{ voucher.id ? 'Update' : 'Save' }}
     </button>
-    <button
-      mat-raised-button
-      (click)="post()"
-      *ngIf="voucher.id"
-      [disabled]="voucher.posted || !auth.allowed('post-vouchers')"
-      class="mr-5"
-    >
-      {{ voucher.posted ? 'Posted' : 'Post' }}
-    </button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="voucher.id" [disabled]="!canSave()">
-      Delete
-    </button>
+    @if (voucher.id) {
+      <button
+        mat-raised-button
+        (click)="post()"
+        [disabled]="voucher.posted || !auth.allowed('post-vouchers')"
+        class="mr-5"
+      >
+        {{ voucher.posted ? 'Posted' : 'Post' }}
+      </button>
+      <button mat-raised-button color="warn" (click)="confirmDelete()" [disabled]="!canSave()">Delete</button>
+    }
     <span class="fill-remaining-space"></span>
-    <span *ngIf="voucher.id" class="flex">
-      Created on&nbsp;<strong>{{ voucher.creationDate | localTime }}</strong
-      >&nbsp;and Last Edited on&nbsp; <strong>{{ voucher.lastEditDate | localTime }}</strong
-      >&nbsp;by&nbsp; <strong>{{ voucher.user.name }}</strong
-      >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
-    </span>
+    @if (voucher.id) {
+      <span class="flex">
+        Created on&nbsp;<strong>{{ voucher.creationDate | localTime }}</strong
+        >&nbsp;and Last Edited on&nbsp; <strong>{{ voucher.lastEditDate | localTime }}</strong
+        >&nbsp;by&nbsp; <strong>{{ voucher.user.name }}</strong
+        >. {{ voucher.poster ? 'Posted by ' + voucher.poster : '' }}
+      </span>
+    }
   </mat-card-actions>
 </mat-card>

overlord/src/app/receipt/receipt.component.ts

@@ -5,7 +5,7 @@ import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
 import { Hotkey, HotkeysService } from 'angular2-hotkeys';
 import { round } from 'mathjs';
-import * as moment from 'moment';
+import moment from 'moment';
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
 import { debounceTime, distinctUntilChanged, switchMap } from 'rxjs/operators';
 

overlord/src/app/recipe-template/recipe-template-detail/recipe-template-detail.component.ts

@@ -2,7 +2,7 @@ import { AfterViewInit, Component, ElementRef, OnInit, ViewChild } from '@angula
 import { FormControl, FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 
 import { ToasterService } from '../../core/toaster.service';
 import { ConfirmDialogComponent } from '../../shared/confirm-dialog/confirm-dialog.component';

overlord/src/app/recipe/recipe-detail/recipe-detail.component.html

@@ -40,7 +40,9 @@
             [displayWith]="displayProduct"
             (optionSelected)="productSelected($event)"
           >
-            <mat-option *ngFor="let product of products | async" [value]="product">{{ product.name }}</mat-option>
+            @for (product of products | async; track product) {
+              <mat-option [value]="product">{{ product.name }}</mat-option>
+            }
           </mat-autocomplete>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/5">
@@ -65,9 +67,9 @@
             [displayWith]="displayIngredient"
             (optionSelected)="ingredientSelected($event)"
           >
-            <mat-option *ngFor="let product of ingredients | async" [value]="product"
-              >{{ product.name }} ({{ product.fractionUnits }})</mat-option
-            >
+            @for (product of ingredients | async; track product) {
+              <mat-option [value]="product">{{ product.name }} ({{ product.fractionUnits }})</mat-option>
+            }
           </mat-autocomplete>
         </mat-form-field>
         <mat-form-field class="flex-auto basis-1/5 mr-5">
@@ -127,6 +129,8 @@
     <button mat-raised-button (click)="save()" color="primary" class="mr-5">
       {{ item.id ? 'Update' : 'Save' }}
     </button>
-    <button mat-raised-button color="warn" (click)="confirmDelete()" *ngIf="item.id">Delete</button>
+    @if (item.id) {
+      <button mat-raised-button color="warn" (click)="confirmDelete()">Delete</button>
+    }
   </mat-card-actions>
 </mat-card>

overlord/src/app/recipe/recipe-detail/recipe-detail.component.ts

@@ -3,7 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms';
 import { MatAutocompleteSelectedEvent } from '@angular/material/autocomplete';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 import { BehaviorSubject, Observable, of as observableOf } from 'rxjs';
 import { debounceTime, distinctUntilChanged, map, switchMap } from 'rxjs/operators';
 import { Period } from 'src/app/period/period';

overlord/src/app/recipe/recipe-list/recipe-list.component.html

@@ -19,16 +19,20 @@
       <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
         <mat-form-field class="flex-auto">
           <mat-select formControlName="period">
-            <mat-option *ngFor="let p of periods" [value]="p"> {{ p.validFrom }} to {{ p.validTill }} </mat-option>
+            @for (p of periods; track p) {
+              <mat-option [value]="p"> {{ p.validFrom }} to {{ p.validTill }} </mat-option>
+            }
           </mat-select>
         </mat-form-field>
         <mat-form-field class="flex-auto">
           <mat-label>Product Type</mat-label>
           <mat-select formControlName="productGroup" (selectionChange)="filterProductGroup($event.value)">
             <mat-option>-- All Products --</mat-option>
-            <mat-option *ngFor="let mc of productGroups" [value]="mc.id">
-              {{ mc.name }}
-            </mat-option>
+            @for (mc of productGroups; track mc) {
+              <mat-option [value]="mc.id">
+                {{ mc.name }}
+              </mat-option>
+            }
           </mat-select>
         </mat-form-field>
       </div>

overlord/src/app/role/role-detail/role-detail.component.html

@@ -13,13 +13,11 @@
         </div>
         <mat-divider></mat-divider>
         <div formArrayName="permissions">
-          <div
-            class="flex flex-row justify-around content-start items-start"
-            *ngFor="let p of item.permissions; index as i"
-            [formGroupName]="i"
-          >
-            <mat-checkbox formControlName="permission" class="flex-auto">{{ p.name }}</mat-checkbox>
-          </div>
+          @for (p of item.permissions; track p; let i = $index) {
+            <div class="flex flex-row justify-around content-start items-start" [formGroupName]="i">
+              <mat-checkbox formControlName="permission" class="flex-auto">{{ p.name }}</mat-checkbox>
+            </div>
+          }
         </div>
       </form>
     </mat-card-content>

overlord/src/app/role/role-list/role-list.component.html

@@ -23,7 +23,9 @@
         <mat-header-cell *matHeaderCellDef mat-sort-header>Permissions</mat-header-cell>
         <mat-cell *matCellDef="let row">
           <ul>
-            <li *ngFor="let permission of row.permissions">{{ permission }}</li>
+            @for (permission of row.permissions; track permission) {
+              <li>{{ permission }}</li>
+            }
           </ul>
         </mat-cell>
       </ng-container>

overlord/src/app/settings/settings.component.html

@@ -5,60 +5,64 @@
         <form [formGroup]="lockInfoForm" class="flex flex-col">
           <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
             <mat-checkbox formControlName="lockOlder" class="flex-auto basis-1/5 mr-5">Lock Older</mat-checkbox>
-            <mat-checkbox formControlName="olderRolling" *ngIf="lockOlder" class="flex-auto basis-1/5 mr-5">
-              Is Rolling
-            </mat-checkbox>
-            <mat-form-field class="flex-auto basis-3/5" *ngIf="lockOlder && !olderRolling">
-              <mat-label>Date</mat-label>
-              <input matInput [matDatepicker]="olderDate" formControlName="olderDate" autocomplete="off" />
-              <mat-datepicker-toggle matSuffix [for]="olderDate"></mat-datepicker-toggle>
-              <mat-datepicker #olderDate></mat-datepicker>
-            </mat-form-field>
-            <mat-form-field class="flex-auto basis-3/5" *ngIf="lockOlder && olderRolling">
-              <mat-label>Days</mat-label>
-              <input matInput formControlName="olderDays" autocomplete="off" />
-            </mat-form-field>
+            @if (lockOlder) {
+              <mat-checkbox formControlName="olderRolling" class="flex-auto basis-1/5 mr-5"> Is Rolling </mat-checkbox>
+            }
+            @if (lockOlder && !olderRolling) {
+              <mat-form-field class="flex-auto basis-3/5">
+                <mat-label>Date</mat-label>
+                <input matInput [matDatepicker]="olderDate" formControlName="olderDate" autocomplete="off" />
+                <mat-datepicker-toggle matSuffix [for]="olderDate"></mat-datepicker-toggle>
+                <mat-datepicker #olderDate></mat-datepicker>
+              </mat-form-field>
+            }
+            @if (lockOlder && olderRolling) {
+              <mat-form-field class="flex-auto basis-3/5">
+                <mat-label>Days</mat-label>
+                <input matInput formControlName="olderDays" autocomplete="off" />
+              </mat-form-field>
+            }
           </div>
           <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
             <mat-checkbox formControlName="lockNewer" class="flex-auto basis-1/5 mr-5">Lock Newer</mat-checkbox>
-            <mat-checkbox formControlName="newerRolling" *ngIf="lockNewer" class="flex-auto basis-1/5 mr-5">
-              Is Rolling
-            </mat-checkbox>
-            <mat-form-field class="flex-auto basis-3/5" *ngIf="lockNewer && !newerRolling">
-              <input
-                matInput
-                [matDatepicker]="newerDate"
-                placehnewer="Date"
-                formControlName="newerDate"
-                autocomplete="off"
-              />
-              <mat-datepicker-toggle matSuffix [for]="newerDate"></mat-datepicker-toggle>
-              <mat-datepicker #newerDate></mat-datepicker>
-            </mat-form-field>
-            <mat-form-field class="flex-auto basis-3/5" *ngIf="lockNewer && newerRolling">
-              <input matInput placehnewer="Days" formControlName="newerDays" autocomplete="off" />
-            </mat-form-field>
+            @if (lockNewer) {
+              <mat-checkbox formControlName="newerRolling" class="flex-auto basis-1/5 mr-5"> Is Rolling </mat-checkbox>
+            }
+            @if (lockNewer && !newerRolling) {
+              <mat-form-field class="flex-auto basis-3/5">
+                <input
+                  matInput
+                  [matDatepicker]="newerDate"
+                  placehnewer="Date"
+                  formControlName="newerDate"
+                  autocomplete="off"
+                />
+                <mat-datepicker-toggle matSuffix [for]="newerDate"></mat-datepicker-toggle>
+                <mat-datepicker #newerDate></mat-datepicker>
+              </mat-form-field>
+            }
+            @if (lockNewer && newerRolling) {
+              <mat-form-field class="flex-auto basis-3/5">
+                <input matInput placehnewer="Days" formControlName="newerDays" autocomplete="off" />
+              </mat-form-field>
+            }
           </div>
           <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
             <div formArrayName="accountTypes">
               <h3>Account Types</h3>
-              <div
-                *ngFor="let at of accountTypes; index as i"
-                [formGroupName]="i"
-                class="flex flex-row justify-around content-start items-start"
-              >
-                <mat-checkbox formControlName="accountType" class="flex-auto">{{ at.name }}</mat-checkbox>
-              </div>
+              @for (at of accountTypes; track at; let i = $index) {
+                <div [formGroupName]="i" class="flex flex-row justify-around content-start items-start">
+                  <mat-checkbox formControlName="accountType" class="flex-auto">{{ at.name }}</mat-checkbox>
+                </div>
+              }
             </div>
             <div formArrayName="voucherTypes">
               <h3>Voucher Types</h3>
-              <div
-                *ngFor="let vt of voucherTypes; index as j"
-                [formGroupName]="j"
-                class="flex flex-row justify-around content-start items-start"
-              >
-                <mat-checkbox formControlName="voucherType" class="flex-auto">{{ vt.name }}</mat-checkbox>
-              </div>
+              @for (vt of voucherTypes; track vt; let j = $index) {
+                <div [formGroupName]="j" class="flex flex-row justify-around content-start items-start">
+                  <mat-checkbox formControlName="voucherType" class="flex-auto">{{ vt.name }}</mat-checkbox>
+                </div>
+              }
             </div>
           </div>
           <div class="flex flex-row justify-around content-start items-start sm:max-lg:flex-col">
@@ -101,7 +105,9 @@
               <mat-header-cell *matHeaderCellDef>Voucher Types</mat-header-cell>
               <mat-cell *matCellDef="let row">
                 <ul>
-                  <li *ngFor="let vt of row.voucherTypes">{{ vt.name }}</li>
+                  @for (vt of row.voucherTypes; track vt) {
+                    <li>{{ vt.name }}</li>
+                  }
                 </ul>
               </mat-cell>
             </ng-container>
@@ -111,7 +117,9 @@
               <mat-header-cell *matHeaderCellDef>Account Types</mat-header-cell>
               <mat-cell *matCellDef="let row">
                 <ul>
-                  <li *ngFor="let at of row.accountTypes">{{ at.name }}</li>
+                  @for (at of row.accountTypes; track at) {
+                    <li>{{ at.name }}</li>
+                  }
                 </ul>
               </mat-cell>
             </ng-container>
@@ -173,13 +181,15 @@
   <mat-tab label="Maintenance Mode">
     <mat-card>
       <mat-card-content>
-        <mat-card-subtitle *ngIf="maintenance.enabled">
-          Maintenance mode is <strong>ENABLED</strong> by user <strong>{{ maintenance.user }}</strong
-          >.
-        </mat-card-subtitle>
-        <mat-card-subtitle *ngIf="!maintenance.enabled">
-          Maintenance mode is <strong>DISABLED</strong>.
-        </mat-card-subtitle>
+        @if (maintenance.enabled) {
+          <mat-card-subtitle>
+            Maintenance mode is <strong>ENABLED</strong> by user <strong>{{ maintenance.user }}</strong
+            >.
+          </mat-card-subtitle>
+        }
+        @if (!maintenance.enabled) {
+          <mat-card-subtitle> Maintenance mode is <strong>DISABLED</strong>. </mat-card-subtitle>
+        }
 
         <button
           mat-raised-button

overlord/src/app/settings/settings.component.ts

@@ -2,7 +2,7 @@ import { Component, OnInit } from '@angular/core';
 import { FormArray, FormControl, FormGroup } from '@angular/forms';
 import { MatDialog } from '@angular/material/dialog';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 import { BehaviorSubject } from 'rxjs';
 
 import { environment } from '../../environments/environment';

overlord/src/app/shared/local-time.pipe.ts

@@ -1,5 +1,5 @@
 import { Pipe, PipeTransform } from '@angular/core';
-import * as moment from 'moment';
+import moment from 'moment';
 
 @Pipe({
   name: 'localTime',

overlord/src/app/stock-movement/stock-movement.component.ts

@@ -3,7 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 
 import { StockMovement } from './stock-movement';
 import { StockMovementDataSource } from './stock-movement-datasource';

overlord/src/app/trial-balance/trial-balance.component.ts

@@ -3,7 +3,7 @@ import { FormControl, FormGroup } from '@angular/forms';
 import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Router } from '@angular/router';
-import * as moment from 'moment';
+import moment from 'moment';
 
 import { TrialBalance } from './trial-balance';
 import { TrialBalanceDataSource } from './trial-balance-datasource';

overlord/src/app/user/user-detail/user-detail.component.html

@@ -23,13 +23,11 @@
         </div>
         <mat-divider></mat-divider>
         <div formArrayName="roles">
-          <div
-            *ngFor="let r of item.roles; index as i"
-            [formGroupName]="i"
-            class="flex flex-row justify-around content-start items-start"
-          >
-            <mat-checkbox formControlName="role" class="flex-auto">{{ r.name }}</mat-checkbox>
-          </div>
+          @for (r of item.roles; track r; let i = $index) {
+            <div [formGroupName]="i" class="flex flex-row justify-around content-start items-start">
+              <mat-checkbox formControlName="role" class="flex-auto">{{ r.name }}</mat-checkbox>
+            </div>
+          }
         </div>
       </form>
     </mat-card-content>

overlord/src/app/user/user-list/user-list.component.html

@@ -29,7 +29,9 @@
         <mat-header-cell *matHeaderCellDef>Roles</mat-header-cell>
         <mat-cell *matCellDef="let row">
           <ul>
-            <li *ngFor="let role of row.roles">{{ role }}</li>
+            @for (role of row.roles; track role) {
+              <li>{{ role }}</li>
+            }
           </ul>
         </mat-cell>
       </ng-container>
@@ -38,7 +40,7 @@
       <ng-container matColumnDef="last">
         <mat-header-cell *matHeaderCellDef>Last Login</mat-header-cell>
         <mat-cell *matCellDef="let row"
-          >{{ row.lastDevice }} @ {{ row.lastDate ? (row.lastDate | localTime) : 'Never' }}</mat-cell
+          >{{ row.lastDevice }} &#64; {{ row.lastDate ? (row.lastDate | localTime) : 'Never' }}</mat-cell
         >
       </ng-container>