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">
-          {{town}}
-        </igx-drop-down-item>
+        @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,16 +22,19 @@
         [(ngModel)]="townSelected"/>
     </igx-input-group>
     <igx-drop-down #townsEnhancedPanel maxHeight="300px" (selectionChanging)="getPostalCode($event)">
-      <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"
-          [value]="town.name">
-          {{town.name}}
-        </igx-drop-down-item>
-      </igx-drop-down-item-group>
+      @for (eRegion of regions | <%=camelCaseName%>RegionContains:townSelected; track eRegion) {
+        <igx-drop-down-item-group
+          [label]="eRegion.name">
+          @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>
+    <igx-toast #message>Postal Code: {{postalCode}}</igx-toast>
   </div>
 </div>

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">
-      <img [src]="slide.image">
-    </igx-slide>
+    @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-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-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">
-                <img src="assets/images/trophy_gold.svg" alt="First place Trophy image" />
-              </span>
-              <span class="cup" *ngIf="cell.row.index === 1">
-                <img src="assets/images/trophy_silver.svg" alt="Second place Trophy image" />
-              </span>
-              <span class="cup" *ngIf="cell.row.index === 2">
-                <img src="assets/images/trophy_bronze.svg" alt="Third place Trophy image" />
-              </span>
-            </ng-container>
+            @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>
+                }
+                @if (cell.row.index === 1) {
+                  <span class="cup">
+                    <img src="assets/images/trophy_silver.svg" alt="Second place Trophy image" />
+                  </span>
+                }
+                @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>
@@ -101,7 +111,7 @@ <h5 class="switch-sample__title">Boston Marathon 2020</h5>
             </span>
           </div>
           <div class="s-overlay__players">
-            <div class="s-overlay__player" [ngClass]="{'s-overlay__player--winner' : hasWinner}">
+            <div class="s-overlay__player" [class.s-overlay__player--winner]="hasWinner">
               <igx-avatar size="large" [shape]="'square'" [src]="winner.Avatar"></igx-avatar>
               <p class="s-overlay__player-name">{{ winner.Name }}</p>
             </div>
@@ -116,17 +126,21 @@ <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">
-            <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">
-                <span>{{i + 1}}</span>
-                <img [src]="getTrophyUrl(i)" alt="First place Trophy image" />
+          @for (player of top3; track $index; let i = $index) {
+            <ng-container>
+              <div class="s-overlay__player"
+                [class.s-overlay__player--winner]="i === 0"
+                [class.s-overlay__player--second]="i === 1"
+                [class.s-overlay__player--third]="i === 2">
+                <div class="s-overlay__trophy">
+                  <span>{{i + 1}}</span>
+                  <img [src]="getTrophyUrl(i)" alt="First place Trophy image" />
+                </div>
+                <igx-avatar [size]="i === 0 ? 'large': 'medium'" [shape]="'square'" [src]="player.Avatar"></igx-avatar>
+                <p class="s-overlay__player-name">{{ player.Name }}</p>
               </div>
-              <igx-avatar [size]="i === 0 ? 'large': 'medium'" [shape]="'square'" [src]="player.Avatar"></igx-avatar>
-              <p class="s-overlay__player-name">{{ player.Name }}</p>
-            </div>
-          </ng-container>
+            </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 { DecimalPipe } from '@angular/common';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 @Component({
@@ -49,13 +49,10 @@ 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,26 +13,37 @@
           <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">
-                    {{ grid1.lastSearchInfo.activeMatchIndex + 1 }} of {{
-                    grid1.lastSearchInfo.matchInfoCache.length }} results
-                  </span>
-                  <span *ngIf="grid1.lastSearchInfo.matchInfoCache.length === 0">
-                    No results
-                  </span>
-                </div>
+              @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>
+                      }
+                      @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'">
+                    [style.--background]="caseSensitive ? 'rgb(73, 180, 254)' : 'transparent'">
                     <igx-icon class="caseSensitiveIcon" family="material">text_fields</igx-icon>
                   </button>
                 </div>
@@ -46,7 +57,8 @@
                     <igx-icon family="material">navigate_next</igx-icon>
                   </button>
                 </div>
-              </igx-suffix>
+                </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,