refactor(igx-ts): control flow and class migration

packages/igx-templates/igx-ts/autocomplete/autocomplete-custom/files/src/app/__path__/__filePrefix__.html

@@ -11,9 +11,11 @@
         <input igxInput name="town" type="text" [igxAutocomplete]="townsPanel" [(ngModel)]="townSelected" />
       </igx-input-group>
       <igx-drop-down #townsPanel maxHeight="300px">
-        <igx-drop-down-item *ngFor="let town of towns | <%=camelCaseName%>StartsWith:townSelected" [value]="town">
+        @for (town of towns | <%=camelCaseName%>StartsWith:townSelected; track town) {
+        <igx-drop-down-item [value]="town">
           {{town}}
         </igx-drop-down-item>
+        }
       </igx-drop-down>
     </form>
   </article>

packages/igx-templates/igx-ts/autocomplete/autocomplete-custom/files/src/app/__path__/__filePrefix__.ts

@@ -1,6 +1,5 @@
 import { Component, Pipe, PipeTransform, forwardRef } from '@angular/core';
 import { Towns } from './towns-data';
-import { NgFor } from '@angular/common';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 import {
   IgxInputGroupComponent,
@@ -23,7 +22,6 @@ import {
     IgxInputDirective,
     IgxAutocompleteDirective,
     IgxDropDownComponent,
-    NgFor,
     IgxDropDownItemComponent,
     forwardRef(() => <%=ClassName%>PipeStartsWith),
   ],

packages/igx-templates/igx-ts/autocomplete/autocomplete-extended/files/src/app/__path__/__filePrefix__.html

@@ -22,14 +22,17 @@
         [(ngModel)]="townSelected"/>
     </igx-input-group>
     <igx-drop-down #townsEnhancedPanel maxHeight="300px" (selectionChanging)="getPostalCode($event)">
+      @for (eRegion of regions | <%=camelCaseName%>RegionContains:townSelected; track eRegion) {
       <igx-drop-down-item-group
-	  *ngFor="let eRegion of regions | <%=camelCaseName%>RegionContains:townSelected"
         [label]="eRegion.name">
-        <igx-drop-down-item *ngFor="let town of eRegion.towns | <%=camelCaseName%>StartsWith:townSelected"
+        @for (town of eRegion.towns | <%=camelCaseName%>StartsWith:townSelected; track town) {
+        <igx-drop-down-item
           [value]="town.name">
           {{town.name}}
         </igx-drop-down-item>
+        }
       </igx-drop-down-item-group>
+      }
     </igx-drop-down>
 
     <igx-toast #message>Postal Code: {{postalCode}}"</igx-toast>

packages/igx-templates/igx-ts/autocomplete/autocomplete-extended/files/src/app/__path__/__filePrefix__.ts

@@ -14,7 +14,6 @@ import {
   IgxLabelDirective,
 } from '<%=igxPackage%>';
 import { Region, Town, townsExtended } from './towns-data-extended';
-import { NgFor } from '@angular/common';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 @Component({
@@ -29,7 +28,6 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
     IgxAutocompleteDirective,
     FormsModule,
     IgxDropDownComponent,
-    NgFor,
     IgxDropDownGroupComponent,
     IgxDropDownItemComponent,
     IgxToastComponent,

packages/igx-templates/igx-ts/carousel/default/files/src/app/__path__/__filePrefix__.html

@@ -4,8 +4,10 @@
 <a href="https://www.infragistics.com/products/ignite-ui-angular/angular/components/carousel" target="_blank">official documentation page</a>.</p>
 <div class="carousel-container">
   <igx-carousel [interval]="interval" [pause]="pause" [loop]="loop">
-    <igx-slide *ngFor="let slide of slides;" [active]="!!slide.active">
+    @for (slide of slides; track slide) {
+    <igx-slide [active]="!!slide.active">
       <img [src]="slide.image">
     </igx-slide>
+    }
   </igx-carousel>
 </div>

packages/igx-templates/igx-ts/carousel/default/files/src/app/__path__/__filePrefix__.ts

@@ -1,12 +1,11 @@
 import { Component, OnInit } from '@angular/core';
-import { NgFor } from '@angular/common';
 import { IgxCarouselComponent, IgxSlideComponent } from '<%=igxPackage%>';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.html',
   styleUrl: './<%=filePrefix%>.scss',
-  imports: [IgxCarouselComponent, NgFor, IgxSlideComponent]
+  imports: [IgxCarouselComponent, IgxSlideComponent]
 })
 export class <%=ClassName%> implements OnInit {
   public slides: Slide[] = [];

packages/igx-templates/igx-ts/chip/default/files/src/app/__path__/__filePrefix__.html

@@ -8,19 +8,23 @@
   <span class="header">Selected Events</span>
   <div class="chipsArea">
     <igx-chips-area #chipsArea class="chiparea">
-      <igx-chip class="chipStyle" *ngFor="let chip of chipList" [id]="chip.id" [removable]="true" (remove)="chipRemoved($event)">
+      @for (chip of chipList; track chip.id) {
+      <igx-chip class="chipStyle" [id]="chip.id" [removable]="true" (remove)="chipRemoved($event)">
           <span #label [class]="'igx-chip__text'">{{chip.name}}</span>
       </igx-chip>
+      }
     </igx-chips-area>
   </div>
   <div class="chips">
     <button #openButton igxButton="raised" (click)="toggleDropDown($event)" [igxDropDownItemNavigation]="dropdown">Talks</button>
     <igx-drop-down #dropdown (selectionChanging)="itemSelection($event)">
-      <igx-drop-down-item *ngFor="let item of dropDownList" [value]="item.name">
+      @for (item of dropDownList; track item.id) {
+      <igx-drop-down-item [value]="item.name">
           <div class="ig-drop-down__item-template">
             <span>{{item.name}}</span>
           </div>
       </igx-drop-down-item>
+      }
     </igx-drop-down>
   </div>
 </div>

packages/igx-templates/igx-ts/chip/default/files/src/app/__path__/__filePrefix__.ts

@@ -15,7 +15,6 @@ import {
   IgxDropDownItemNavigationDirective,
   IgxDropDownItemComponent,
 } from '<%=igxPackage%>';
-import { NgFor } from '@angular/common';
 
 interface NamedEntry {
   id: string;
@@ -29,7 +28,6 @@ interface NamedEntry {
  imports: [
     IgxLayoutDirective,
     IgxChipsAreaComponent,
-    NgFor,
     IgxChipComponent,
     IgxButtonDirective,
     IgxDropDownItemNavigationDirective,

packages/igx-templates/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.html

@@ -20,17 +20,25 @@ <h5 class="switch-sample__title">Boston Marathon 2020</h5>
         <ng-template igxCell let-cell="cell">
           <div class="cell__inner">
             <div>{{ paginator.page * paginator.perPage + cell.row.index + 1 }}</div>
-            <ng-container *ngIf="isTop3(cell)">
-              <span class="cup" *ngIf="cell.row.index === 0">
+            @if (isTop3(cell)) {
+            <ng-container>
+              @if (cell.row.index === 0) {
+              <span class="cup">
                 <img src="assets/images/trophy_gold.svg" alt="First place Trophy image" />
               </span>
-              <span class="cup" *ngIf="cell.row.index === 1">
+              }
+              @if (cell.row.index === 1) {
+              <span class="cup">
                 <img src="assets/images/trophy_silver.svg" alt="Second place Trophy image" />
               </span>
-              <span class="cup" *ngIf="cell.row.index === 2">
+              }
+              @if (cell.row.index === 2) {
+              <span class="cup">
                 <img src="assets/images/trophy_bronze.svg" alt="Third place Trophy image" />
               </span>
+              }
             </ng-container>
+            }
           </div>
         </ng-template>
       </igx-column>
@@ -40,7 +48,9 @@ <h5 class="switch-sample__title">Boston Marathon 2020</h5>
           <div class="cell__inner">
             <igx-avatar [src]="cell.row.data.Avatar" [shape]="'square'" size="small"> </igx-avatar><span
               class="athlete_name">{{ cell.value }}</span>
-            <igx-badge *ngIf="live" [type]="getBadgeType(cell)" [icon]="getIconType(cell)"></igx-badge>
+            @if (live) {
+            <igx-badge [type]="getBadgeType(cell)" [icon]="getIconType(cell)"></igx-badge>
+            }
           </div>
 
         </ng-template>
@@ -116,7 +126,8 @@ <h5 class="switch-sample__title">Boston Marathon 2020</h5>
           <span>Finish</span>
         </div>
         <div class="s-overlay__players">
-          <ng-container *ngFor="let player of top3; let i = index">
+          @for (player of top3; track $index; let i = $index) {
+          <ng-container>
             <div class="s-overlay__player"
               [ngClass]="i === 0 ? 's-overlay__player--winner' : i === 1 ? 's-overlay__player--second' : 's-overlay__player--third'">
               <div class="s-overlay__trophy">
@@ -127,6 +138,7 @@ <h5 class="switch-sample__title">Boston Marathon 2020</h5>
               <p class="s-overlay__player-name">{{ player.Name }}</p>
             </div>
           </ng-container>
+          }
         </div>
       </div>
     </div>

packages/igx-templates/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.ts

@@ -32,7 +32,7 @@ import {
   IgxSparklineCoreModule,
 } from 'igniteui-angular-charts';
 import { Athlete, AthletesData, SpeedEntry } from './services/data';
-import { NgIf, NgClass, NgFor, DecimalPipe } from '@angular/common';
+import { NgClass, DecimalPipe } from '@angular/common';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 @Component({
@@ -49,13 +49,11 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
     IgxPaginatorComponent,
     IgxColumnComponent,
     IgxCellTemplateDirective,
-    NgIf,
     IgxAvatarComponent,
     IgxBadgeComponent,
     IgxSparklineCoreModule,
     IgxCircularProgressBarComponent,
     NgClass,
-    NgFor,
     DecimalPipe,
   ],
 })

packages/igx-templates/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.html

@@ -13,23 +13,34 @@
           <div class="sample-flex-container">
             <igx-input-group type="search" class="searchInputGroup">
               <igx-prefix>
-                <igx-icon class="prefixIcon" *ngIf="searchText.length === 0">search</igx-icon>
-                <igx-icon class="prefixIcon" *ngIf="searchText.length > 0" (click)="clearSearch()">clear</igx-icon>
+                @if (searchText.length === 0) {
+                <igx-icon class="prefixIcon">search</igx-icon>
+                }
+                @if (searchText.length > 0) {
+                <igx-icon class="prefixIcon" (click)="clearSearch()">clear</igx-icon>
+                }
               </igx-prefix>
 
               <input #search1 id="search1" class="searchInput" igxInput placeholder="Search" [(ngModel)]="searchText"
                 (ngModelChange)="grid1.findNext(searchText, caseSensitive)" (keydown)="searchKeyDown($event)" />
 
-              <igx-suffix *ngIf="searchText.length > 0">
-                <div class="resultsText" *ngIf="grid1.lastSearchInfo">
-                  <span *ngIf="grid1.lastSearchInfo.matchInfoCache.length > 0">
+              @if (searchText.length > 0) {
+              <igx-suffix>
+                @if (grid1.lastSearchInfo) {
+                <div class="resultsText">
+                  @if (grid1.lastSearchInfo.matchInfoCache.length > 0) {
+                  <span>
                     {{ grid1.lastSearchInfo.activeMatchIndex + 1 }} of {{
                     grid1.lastSearchInfo.matchInfoCache.length }} results
                   </span>
-                  <span *ngIf="grid1.lastSearchInfo.matchInfoCache.length === 0">
+                  }
+                  @if (grid1.lastSearchInfo.matchInfoCache.length === 0) {
+                  <span>
                     No results
                   </span>
+                  }
                 </div>
+                }
                 <div class="caseSensitiveButton">
                   <button igxButton="icon" igxRipple [igxRippleCentered]="true" (click)="updateSearch()"
                     igxButtonBackground="caseSensitive? 'rgb(73, 180, 254)' : 'transparent'">
@@ -47,6 +58,7 @@
                   </button>
                 </div>
               </igx-suffix>
+              }
             </igx-input-group>
           </div>
         </div>

packages/igx-templates/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.ts

@@ -45,7 +45,6 @@ import {
 import { SparklineDisplayType, IgxSparklineCoreModule } from 'igniteui-angular-charts';
 import { DATA, DealsDescriptor, Employee } from './data';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
@@ -57,7 +56,6 @@ import { NgIf } from '@angular/common';
     IgxGridToolbarTitleComponent,
     IgxInputGroupComponent,
     IgxPrefixDirective,
-    NgIf,
     IgxIconComponent,
     ReactiveFormsModule,
     IgxInputDirective,

packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.html

@@ -30,23 +30,28 @@
     </div>
   </div>
   <div class="sample-toolbar">
-    <span *ngIf="buttonSelected === 1">Feeding {{volume}} records every {{frequency / 1000}} sec.
+    @if (buttonSelected === 1) {
+    <span>Feeding {{volume}} records every {{frequency / 1000}} sec.
       {{volume}} records updated. </span>
-    <span *ngIf="buttonSelected === 0">Feeding {{volume}} records every {{frequency / 1000}} sec.
+    }
+    @if (buttonSelected === 0) {
+    <span>Feeding {{volume}} records every {{frequency / 1000}} sec.
       ~{{volume/5}} records updated.</span>
+    }
   </div>
   <igx-grid #grid1 igxPreventDocumentScroll (rowSelectionChanging)="rowSelectionChanging($event)" [data]="data"
     width="100%" height="90%" [autoGenerate]="false" displayDensity="compact" primaryKey="ID" hiddenColumnsText="Hidden"
     [rowSelection]="selectionMode" [allowFiltering]="true" filterMode="excelStyleFilter"
     (keydown)="gridKeydown($event)" (gridKeydown)="customKeydown($event)" [moving]="true">
-    <igx-grid-toolbar *ngIf="showToolbar">
+    @if (showToolbar) {
+    <igx-grid-toolbar>
       <igx-grid-toolbar-actions>
         <igx-grid-toolbar-hiding title="Indicators"></igx-grid-toolbar-hiding>
         <igx-grid-toolbar-pinning title=" "></igx-grid-toolbar-pinning>
         <igx-grid-toolbar-exporter [exportCSV]="false"></igx-grid-toolbar-exporter>
       </igx-grid-toolbar-actions>
     </igx-grid-toolbar>
-
+    }
 
     <!-- Empty templates for Sorting,Moving,Hiding, Pinning actions inside ESF dialog -->
     <!-- <ng-template igxExcelStyleSorting></ng-template>
@@ -61,7 +66,9 @@
     <igx-column field="Contract" width="110px" [groupable]="true" [sortable]="true" [editable]="true">
       <ng-template igxCellEditor let-cell="cell" let-value>
         <igx-select [placeholder]="value" [(ngModel)]="cell.editValue" [igxFocus]="true">
-          <igx-select-item *ngFor="let c of contracts" [value]="c">{{ c }}</igx-select-item>
+          @for (c of contracts; track c) {
+          <igx-select-item [value]="c">{{ c }}</igx-select-item>
+          }
         </igx-select>
       </ng-template>
     </igx-column>
@@ -71,7 +78,9 @@
     <igx-column field="Region" width="110px" [groupable]="true" [sortable]="true" [editable]="true">
       <ng-template igxCellEditor let-cell="cell" let-value>
         <igx-select [placeholder]="value" [(ngModel)]="cell.editValue" [igxFocus]="true">
-          <igx-select-item *ngFor="let r of regions" [value]="r.Region">{{ r.Region }}</igx-select-item>
+          @for (r of regions; track r) {
+          <igx-select-item [value]="r.Region">{{ r.Region }}</igx-select-item>
+          }
         </igx-select>
       </ng-template>
     </igx-column>
@@ -84,8 +93,12 @@
       <ng-template igxCell let-cell="cell">
         <div class="fintech-icons">
           <span>{{cell.value | currency:'USD':'symbol':'1.4-4'}}</span>
-          <igx-icon *ngIf="trends.positive(cell.row.data)">trending_up</igx-icon>
-          <igx-icon *ngIf="trends.negative(cell.row.data)">trending_down</igx-icon>
+          @if (trends.positive(cell.row.data)) {
+          <igx-icon>trending_up</igx-icon>
+          }
+          @if (trends.negative(cell.row.data)) {
+          <igx-icon>trending_down</igx-icon>
+          }
         </div>
       </ng-template>
     </igx-column>

packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.ts

@@ -46,7 +46,7 @@ import { timer } from 'rxjs';
 import { debounce } from 'rxjs/operators';
 import { LocalData } from './local-data';
 import { Contract, REGIONS } from './data/financialData';
-import { NgIf, NgFor, CurrencyPipe } from '@angular/common';
+import { CurrencyPipe } from '@angular/common';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 @Component({
@@ -60,7 +60,6 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
     FormsModule,
     IgxSliderComponent,
     IgxButtonGroupComponent,
-    NgIf,
     IgxGridComponent,
     IgxGridToolbarComponent,
     IgxGridToolbarActionsComponent,
@@ -71,7 +70,6 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
     IgxCellEditorTemplateDirective,
     IgxSelectComponent,
     IgxFocusDirective,
-    NgFor,
     IgxSelectItemComponent,
     IgxCellTemplateDirective,
     IgxIconComponent,