diff --git a/src/app/basic/contextmenu.component.ts b/src/app/basic/contextmenu.component.ts
index 25c8221dc..f7d2defc8 100644
--- a/src/app/basic/contextmenu.component.ts
+++ b/src/app/basic/contextmenu.component.ts
@@ -23,14 +23,21 @@ import { Employee } from '../data.model';
           demonstrates how you would access the <code>contextmenu</code> event to display your own
           custom context menu.
         </p>
-        <p *ngIf="rawEvent">
-          <strong>Mouse position:</strong> <code>(x: {{ rawEvent?.x }}, y: {{ rawEvent?.y }})</code>
-        </p>
-        <p *ngIf="contextmenuRow"><strong>Row:</strong> {{ contextmenuRow?.name }}</p>
-        <p *ngIf="contextmenuColumn">
-          <strong>Header:</strong> name: {{ contextmenuColumn?.name }} prop:
-          {{ contextmenuColumn?.prop }}
-        </p>
+        @if (rawEvent) {
+          <p>
+            <strong>Mouse position:</strong>
+            <code>(x: {{ rawEvent?.x }}, y: {{ rawEvent?.y }})</code>
+          </p>
+        }
+        @if (contextmenuRow) {
+          <p><strong>Row:</strong> {{ contextmenuRow?.name }}</p>
+        }
+        @if (contextmenuColumn) {
+          <p>
+            <strong>Header:</strong> name: {{ contextmenuColumn?.name }} prop:
+            {{ contextmenuColumn?.prop }}
+          </p>
+        }
       </div>
       <ngx-datatable
         class="material"
diff --git a/src/app/basic/footer.component.ts b/src/app/basic/footer.component.ts
index e29fec858..7b3852382 100644
--- a/src/app/basic/footer.component.ts
+++ b/src/app/basic/footer.component.ts
@@ -26,7 +26,7 @@ import { Employee } from '../data.model';
         [headerHeight]="50"
         rowHeight="auto"
       >
-        <ngx-datatable-footer *ngIf="true">
+        <ngx-datatable-footer>
           <ng-template
             ngx-datatable-footer-template
             let-rowCount="rowCount"
diff --git a/src/app/basic/inline.component.ts b/src/app/basic/inline.component.ts
index 1c8cd0e2f..051a09f1c 100644
--- a/src/app/basic/inline.component.ts
+++ b/src/app/basic/inline.component.ts
@@ -34,20 +34,18 @@ import { Employee } from '../data.model';
             let-value="value"
             let-row="row"
           >
-            <span
-              title="Double click to edit"
-              (dblclick)="editing[rowIndex + '-name'] = true"
-              *ngIf="!editing[rowIndex + '-name']"
-            >
-              {{ value }}
-            </span>
-            <input
-              autofocus
-              (blur)="updateValue($event, 'name', rowIndex)"
-              *ngIf="editing[rowIndex + '-name']"
-              type="text"
-              [value]="value"
-            />
+            @if (editing[rowIndex + '-name']) {
+              <input
+                autofocus
+                (blur)="updateValue($event, 'name', rowIndex)"
+                type="text"
+                [value]="value"
+              />
+            } @else {
+              <span title="Double click to edit" (dblclick)="editing[rowIndex + '-name'] = true">
+                {{ value }}
+              </span>
+            }
           </ng-template>
         </ngx-datatable-column>
         <ngx-datatable-column name="Gender">
@@ -57,22 +55,21 @@ import { Employee } from '../data.model';
             let-row="row"
             let-value="value"
           >
-            <span
-              title="Double click to edit"
-              (dblclick)="editing[rowIndex + '-gender'] = true"
-              *ngIf="!editing[rowIndex + '-gender']"
-            >
-              {{ value }}
-            </span>
-            <select
-              *ngIf="editing[rowIndex + '-gender']"
-              (blur)="editing[rowIndex + '-gender'] = false"
-              (change)="updateValue($event, 'gender', rowIndex)"
-              [value]="value"
-            >
-              <option value="male">Male</option>
-              <option value="female">Female</option>
-            </select>
+            @if (!editing[rowIndex + '-gender']) {
+              <span title="Double click to edit" (dblclick)="editing[rowIndex + '-gender'] = true">
+                {{ value }}
+              </span>
+            }
+            @if (editing[rowIndex + '-gender']) {
+              <select
+                (blur)="editing[rowIndex + '-gender'] = false"
+                (change)="updateValue($event, 'gender', rowIndex)"
+                [value]="value"
+              >
+                <option value="male">Male</option>
+                <option value="female">Female</option>
+              </select>
+            }
           </ng-template>
         </ngx-datatable-column>
         <ngx-datatable-column name="Age">
diff --git a/src/app/basic/scrolling-dynamically.component.ts b/src/app/basic/scrolling-dynamically.component.ts
index def44776c..a34d4762f 100644
--- a/src/app/basic/scrolling-dynamically.component.ts
+++ b/src/app/basic/scrolling-dynamically.component.ts
@@ -37,20 +37,18 @@ import { Employee } from '../data.model';
             let-value="value"
             let-row="row"
           >
-            <span
-              title="Double click to edit"
-              (dblclick)="editing[rowIndex + '-name'] = true"
-              *ngIf="!editing[rowIndex + '-name']"
-            >
-              {{ value }}
-            </span>
-            <input
-              autofocus
-              (blur)="updateValue($event, 'name', rowIndex)"
-              *ngIf="editing[rowIndex + '-name']"
-              type="text"
-              [value]="value"
-            />
+            @if (editing[rowIndex + '-name']) {
+              <input
+                autofocus
+                (blur)="updateValue($event, 'name', rowIndex)"
+                type="text"
+                [value]="value"
+              />
+            } @else {
+              <span title="Double click to edit" (dblclick)="editing[rowIndex + '-name'] = true">
+                {{ value }}
+              </span>
+            }
           </ng-template>
         </ngx-datatable-column>
         <ngx-datatable-column name="Gender">
@@ -60,22 +58,21 @@ import { Employee } from '../data.model';
             let-row="row"
             let-value="value"
           >
-            <span
-              title="Double click to edit"
-              (dblclick)="editing[rowIndex + '-gender'] = true"
-              *ngIf="!editing[rowIndex + '-gender']"
-            >
-              {{ value }}
-            </span>
-            <select
-              *ngIf="editing[rowIndex + '-gender']"
-              (blur)="editing[rowIndex + '-gender'] = false"
-              (change)="updateValue($event, 'gender', rowIndex)"
-              [value]="value"
-            >
-              <option value="male">Male</option>
-              <option value="female">Female</option>
-            </select>
+            @if (!editing[rowIndex + '-gender']) {
+              <span title="Double click to edit" (dblclick)="editing[rowIndex + '-gender'] = true">
+                {{ value }}
+              </span>
+            }
+            @if (editing[rowIndex + '-gender']) {
+              <select
+                (blur)="editing[rowIndex + '-gender'] = false"
+                (change)="updateValue($event, 'gender', rowIndex)"
+                [value]="value"
+              >
+                <option value="male">Male</option>
+                <option value="female">Female</option>
+              </select>
+            }
           </ng-template>
         </ngx-datatable-column>
         <ngx-datatable-column name="Age">
diff --git a/src/app/basic/tabs.component.ts b/src/app/basic/tabs.component.ts
index c6207a779..ab52f168f 100644
--- a/src/app/basic/tabs.component.ts
+++ b/src/app/basic/tabs.component.ts
@@ -46,22 +46,24 @@ import { FullEmployee } from '../data.model';
           </ngx-datatable>
         </div>
 
-        <div *ngIf="tab3">
-          <h4>ngIf Table</h4>
-          <ngx-datatable
-            class="material"
-            [rows]="rows"
-            [columnMode]="ColumnMode.force"
-            [headerHeight]="50"
-            [footerHeight]="50"
-            [rowHeight]="50"
-            [scrollbarV]="true"
-          >
-            <ngx-datatable-column name="Name" [width]="200"></ngx-datatable-column>
-            <ngx-datatable-column name="Gender" [width]="300"></ngx-datatable-column>
-            <ngx-datatable-column name="Age" [width]="80"></ngx-datatable-column>
-          </ngx-datatable>
-        </div>
+        @if (tab3) {
+          <div>
+            <h4>ngIf Table</h4>
+            <ngx-datatable
+              class="material"
+              [rows]="rows"
+              [columnMode]="ColumnMode.force"
+              [headerHeight]="50"
+              [footerHeight]="50"
+              [rowHeight]="50"
+              [scrollbarV]="true"
+            >
+              <ngx-datatable-column name="Name" [width]="200"></ngx-datatable-column>
+              <ngx-datatable-column name="Gender" [width]="300"></ngx-datatable-column>
+              <ngx-datatable-column name="Age" [width]="80"></ngx-datatable-column>
+            </ngx-datatable>
+          </div>
+        }
       </div>
     </div>
   `
diff --git a/src/app/columns/column-toggle.component.ts b/src/app/columns/column-toggle.component.ts
index 87a1dcd88..5feefb527 100644
--- a/src/app/columns/column-toggle.component.ts
+++ b/src/app/columns/column-toggle.component.ts
@@ -26,22 +26,25 @@ import { Employee } from '../data.model';
           [footerHeight]="50"
           rowHeight="auto"
         >
-          <ngx-datatable-column *ngFor="let col of columns" [name]="col.name">
-          </ngx-datatable-column>
+          @for (col of columns; track col) {
+            <ngx-datatable-column [name]="col.name"> </ngx-datatable-column>
+          }
         </ngx-datatable>
       </div>
       <div class="selected-column">
         <h4>Available Columns</h4>
         <ul>
-          <li *ngFor="let col of allColumns">
-            <input
-              type="checkbox"
-              [id]="col.name"
-              (click)="toggle(col)"
-              [checked]="isChecked(col)"
-            />
-            <label [attr.for]="col.name">{{ col.name }}</label>
-          </li>
+          @for (col of allColumns; track col) {
+            <li>
+              <input
+                type="checkbox"
+                [id]="col.name"
+                (click)="toggle(col)"
+                [checked]="isChecked(col)"
+              />
+              <label [attr.for]="col.name">{{ col.name }}</label>
+            </li>
+          }
         </ul>
       </div>
     </div>
diff --git a/src/app/selection/selection-chkbox-template.component.ts b/src/app/selection/selection-chkbox-template.component.ts
index f88dadfae..080308a21 100644
--- a/src/app/selection/selection-chkbox-template.component.ts
+++ b/src/app/selection/selection-chkbox-template.component.ts
@@ -71,10 +71,14 @@ import { Employee } from '../data.model';
           Selections <small>({{ selected?.length }})</small>
         </h4>
         <ul>
-          <li *ngFor="let sel of selected">
-            {{ sel.name }}
-          </li>
-          <li *ngIf="!selected?.length">No Selections</li>
+          @for (sel of selected; track sel) {
+            <li>
+              {{ sel.name }}
+            </li>
+          }
+          @if (!selected?.length) {
+            <li>No Selections</li>
+          }
         </ul>
       </div>
     </div>
diff --git a/src/app/selection/selection-chkbox.component.ts b/src/app/selection/selection-chkbox.component.ts
index 52cb1f100..43b161849 100644
--- a/src/app/selection/selection-chkbox.component.ts
+++ b/src/app/selection/selection-chkbox.component.ts
@@ -60,10 +60,14 @@ import { Employee } from '../data.model';
           Selections <small>({{ selected?.length }})</small>
         </h4>
         <ul>
-          <li *ngFor="let sel of selected">
-            {{ sel.name }}
-          </li>
-          <li *ngIf="!selected?.length">No Selections</li>
+          @for (sel of selected; track sel) {
+            <li>
+              {{ sel.name }}
+            </li>
+          }
+          @if (!selected?.length) {
+            <li>No Selections</li>
+          }
         </ul>
       </div>
     </div>
diff --git a/src/app/selection/selection-disabled.component.ts b/src/app/selection/selection-disabled.component.ts
index 8abbe523f..353bece49 100644
--- a/src/app/selection/selection-disabled.component.ts
+++ b/src/app/selection/selection-disabled.component.ts
@@ -39,10 +39,14 @@ import { Employee } from '../data.model';
       <div class="selected-column">
         <h4>Selections</h4>
         <ul>
-          <li *ngFor="let sel of selected">
-            {{ sel.name }}
-          </li>
-          <li *ngIf="!selected.length">No Selections</li>
+          @for (sel of selected; track sel) {
+            <li>
+              {{ sel.name }}
+            </li>
+          }
+          @if (!selected.length) {
+            <li>No Selections</li>
+          }
         </ul>
       </div>
     </div>
diff --git a/src/app/selection/selection-multi-click-chkbox.component.ts b/src/app/selection/selection-multi-click-chkbox.component.ts
index 903555f15..9441cfb4f 100644
--- a/src/app/selection/selection-multi-click-chkbox.component.ts
+++ b/src/app/selection/selection-multi-click-chkbox.component.ts
@@ -61,10 +61,14 @@ import { Employee } from '../data.model';
           Selections <small>({{ selected?.length }})</small>
         </h4>
         <ul>
-          <li *ngFor="let sel of selected">
-            {{ sel.name }}
-          </li>
-          <li *ngIf="!selected?.length">No Selections</li>
+          @for (sel of selected; track sel) {
+            <li>
+              {{ sel.name }}
+            </li>
+          }
+          @if (!selected?.length) {
+            <li>No Selections</li>
+          }
         </ul>
       </div>
     </div>
diff --git a/src/app/selection/selection-multi-click.component.ts b/src/app/selection/selection-multi-click.component.ts
index 9ed02395e..5ad474fe6 100644
--- a/src/app/selection/selection-multi-click.component.ts
+++ b/src/app/selection/selection-multi-click.component.ts
@@ -42,10 +42,14 @@ import { Employee } from '../data.model';
       <div class="selected-column">
         <h4>Selections</h4>
         <ul>
-          <li *ngFor="let sel of selected">
-            {{ sel.name }}
-          </li>
-          <li *ngIf="!selected.length">No Selections</li>
+          @for (sel of selected; track sel) {
+            <li>
+              {{ sel.name }}
+            </li>
+          }
+          @if (!selected.length) {
+            <li>No Selections</li>
+          }
         </ul>
       </div>
     </div>
diff --git a/src/app/selection/selection-multi.component.ts b/src/app/selection/selection-multi.component.ts
index 70218bc84..3a4f7972a 100644
--- a/src/app/selection/selection-multi.component.ts
+++ b/src/app/selection/selection-multi.component.ts
@@ -45,10 +45,14 @@ import { Employee } from '../data.model';
       <div class="selected-column">
         <h4>Selections</h4>
         <ul>
-          <li *ngFor="let sel of selected">
-            {{ sel.name }}
-          </li>
-          <li *ngIf="!selected.length">No Selections</li>
+          @for (sel of selected; track sel) {
+            <li>
+              {{ sel.name }}
+            </li>
+          }
+          @if (!selected.length) {
+            <li>No Selections</li>
+          }
         </ul>
       </div>
     </div>
diff --git a/src/app/selection/selection-single.component.ts b/src/app/selection/selection-single.component.ts
index cca0aaed0..2bd633a1a 100644
--- a/src/app/selection/selection-single.component.ts
+++ b/src/app/selection/selection-single.component.ts
@@ -45,10 +45,14 @@ import { Employee } from '../data.model';
       <div class="selected-column">
         <h4>Selections</h4>
         <ul>
-          <li *ngFor="let sel of selected">
-            {{ sel.name }}
-          </li>
-          <li *ngIf="!selected.length">No Selections</li>
+          @for (sel of selected; track sel) {
+            <li>
+              {{ sel.name }}
+            </li>
+          }
+          @if (!selected.length) {
+            <li>No Selections</li>
+          }
         </ul>
       </div>
     </div>
diff --git a/src/app/summary/summary-row-custom-template.component.ts b/src/app/summary/summary-row-custom-template.component.ts
index d39d1d9bc..583dfc46a 100644
--- a/src/app/summary/summary-row-custom-template.component.ts
+++ b/src/app/summary/summary-row-custom-template.component.ts
@@ -29,9 +29,11 @@ import { Employee } from '../data.model';
       </ngx-datatable>
       <ng-template #nameSummaryCell let-row="row" let-value="value">
         <div class="name-container">
-          <div class="chip" *ngFor="let name of getNames()">
-            <span class="chip-content">{{ name }}</span>
-          </div>
+          @for (name of getNames(); track name) {
+            <div class="chip">
+              <span class="chip-content">{{ name }}</span>
+            </div>
+          }
         </div>
       </ng-template>
     </div>
diff --git a/src/app/summary/summary-row-inline-html.component.ts b/src/app/summary/summary-row-inline-html.component.ts
index 8603d519e..d858aafff 100644
--- a/src/app/summary/summary-row-inline-html.component.ts
+++ b/src/app/summary/summary-row-inline-html.component.ts
@@ -35,9 +35,11 @@ import { Employee } from '../data.model';
       </ngx-datatable>
       <ng-template #nameSummaryCell>
         <div class="name-container">
-          <div class="chip" *ngFor="let name of getNames()">
-            <span class="chip-content">{{ name }}</span>
-          </div>
+          @for (name of getNames(); track name) {
+            <div class="chip">
+              <span class="chip-content">{{ name }}</span>
+            </div>
+          }
         </div>
       </ng-template>
     </div>
diff --git a/src/app/templates/template-obj.component.ts b/src/app/templates/template-obj.component.ts
index 9b0a9a01e..1198d454d 100644
--- a/src/app/templates/template-obj.component.ts
+++ b/src/app/templates/template-obj.component.ts
@@ -33,16 +33,12 @@ import { Employee } from '../data.model';
       </ng-template>
 
       <ng-template #editTmpl let-row="row" let-value="value">
-        <img
-          *ngIf="value === 'male'"
-          width="150"
-          src="https://media.giphy.com/media/I8nepxWwlEuqI/giphy.gif"
-        />
-        <img
-          *ngIf="value === 'female'"
-          width="150"
-          src="https://media.giphy.com/media/sxSVG3XHf7yww/giphy.gif"
-        />
+        @if (value === 'male') {
+          <img width="150" src="https://media.giphy.com/media/I8nepxWwlEuqI/giphy.gif" />
+        }
+        @if (value === 'female') {
+          <img width="150" src="https://media.giphy.com/media/sxSVG3XHf7yww/giphy.gif" />
+        }
       </ng-template>
     </div>
   `
diff --git a/src/app/tree/fullscreen.component.ts b/src/app/tree/fullscreen.component.ts
index 772a42366..1b14ee52a 100644
--- a/src/app/tree/fullscreen.component.ts
+++ b/src/app/tree/fullscreen.component.ts
@@ -40,10 +40,18 @@ import { Employee } from '../data.model';
         >
           <ng-template ngx-datatable-tree-toggle let-tree="cellContext">
             <button [disabled]="tree.treeStatus === 'disabled'" (click)="tree.onTreeAction()">
-              <span *ngIf="tree.treeStatus === 'loading'"> ... </span>
-              <span *ngIf="tree.treeStatus === 'collapsed'"> ↑ </span>
-              <span *ngIf="tree.treeStatus === 'expanded'"> ↓ </span>
-              <span *ngIf="tree.treeStatus === 'disabled'"> ⃠ </span>
+              @if (tree.treeStatus === 'loading') {
+                <span> ... </span>
+              }
+              @if (tree.treeStatus === 'collapsed') {
+                <span> ↑ </span>
+              }
+              @if (tree.treeStatus === 'expanded') {
+                <span> ↓ </span>
+              }
+              @if (tree.treeStatus === 'disabled') {
+                <span> ⃠ </span>
+              }
             </button>
           </ng-template>
         </ngx-datatable-column>