Migrate simple igx-ts templates to Angular built-in control flow

Copilot · damyanpetev · web-flow · commit 186d2b69ecd4 · 2026-03-30T14:41:28.000Z
Migrated carousel, dropdown, chip, select (default, groups, in-form), autocomplete (custom, extended), input-group, list, and tree templates from *ngIf/*ngFor to @if/@for syntax. Removed NgIf/NgFor imports. Agent-Logs-Url: https://github.com/IgniteUI/igniteui-cli/sessions/375664ee-c0d9-49d6-a1d2-9efb61015c44 Co-authored-by: damyanpetev <3198469+damyanpetev@users.noreply.github.com>
diff --git a/packages/igx-templates/igx-ts/autocomplete/autocomplete-custom/files/src/app/__path__/__filePrefix__.html b/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>
diff --git a/packages/igx-templates/igx-ts/autocomplete/autocomplete-custom/files/src/app/__path__/__filePrefix__.ts b/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),
   ],
diff --git a/packages/igx-templates/igx-ts/autocomplete/autocomplete-extended/files/src/app/__path__/__filePrefix__.html b/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>
diff --git a/packages/igx-templates/igx-ts/autocomplete/autocomplete-extended/files/src/app/__path__/__filePrefix__.ts b/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,
diff --git a/packages/igx-templates/igx-ts/carousel/default/files/src/app/__path__/__filePrefix__.html b/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>
diff --git a/packages/igx-templates/igx-ts/carousel/default/files/src/app/__path__/__filePrefix__.ts b/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[] = [];
diff --git a/packages/igx-templates/igx-ts/chip/default/files/src/app/__path__/__filePrefix__.html b/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>
diff --git a/packages/igx-templates/igx-ts/chip/default/files/src/app/__path__/__filePrefix__.ts b/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,
diff --git a/packages/igx-templates/igx-ts/dropdown/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/dropdown/default/files/src/app/__path__/__filePrefix__.html
@@ -6,8 +6,10 @@
 <div class="sample-wrapper drop-down-wrapper">
   <button #button igxButton="raised" igxRipple [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown">Toggle dropdown</button>
   <igx-drop-down width="200px" #dropdown>
-    <igx-drop-down-item *ngFor="let item of items" [disabled]="!!item.disabled" [isHeader]="!!item.header">
+    @for (item of items; track item) {
+    <igx-drop-down-item [disabled]="!!item.disabled" [isHeader]="!!item.header">
       {{ item.name }}
     </igx-drop-down-item>
+    }
   </igx-drop-down>
 </div>
diff --git a/packages/igx-templates/igx-ts/dropdown/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/dropdown/default/files/src/app/__path__/__filePrefix__.ts
@@ -8,7 +8,6 @@ import {
   IgxDropDownComponent,
   IgxDropDownItemComponent,
 } from '<%=igxPackage%>';
-import { NgFor } from '@angular/common';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
@@ -20,7 +19,6 @@ import { NgFor } from '@angular/common';
     IgxToggleActionDirective,
     IgxDropDownItemNavigationDirective,
     IgxDropDownComponent,
-    NgFor,
     IgxDropDownItemComponent,
   ]
 })
diff --git a/packages/igx-templates/igx-ts/input-group/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/input-group/default/files/src/app/__path__/__filePrefix__.html
@@ -40,11 +40,15 @@
         <h4>Book your movie ticket</h4>
         <div class="container">
           <igx-select #select name="movies" formControlName="movie">
-            <igx-select-item-group *ngFor="let genre of genres" [label]="genre.type">
-              <igx-select-item *ngFor="let movie of genre.movies" [value]="movie">
+            @for (genre of genres; track genre) {
+            <igx-select-item-group [label]="genre.type">
+              @for (movie of genre.movies; track movie) {
+              <igx-select-item [value]="movie">
                 {{ movie }}
               </igx-select-item>
+              }
             </igx-select-item-group>
+            }
             <label igxLabel for="movies">Movie</label>
             <ng-template igxSelectToggleIcon>
               <igx-icon family="material">local_movies</igx-icon>
diff --git a/packages/igx-templates/igx-ts/input-group/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/input-group/default/files/src/app/__path__/__filePrefix__.ts
@@ -19,7 +19,6 @@ import {
   IgxButtonDirective,
   IgxRippleDirective,
 } from '<%=igxPackage%>';
-import { NgFor } from '@angular/common';
 
 interface Genre {
   type: string;
@@ -33,7 +32,6 @@ interface Genre {
   imports: [
     ReactiveFormsModule,
     IgxSelectComponent,
-    NgFor,
     IgxSelectGroupComponent,
     IgxSelectItemComponent,
     IgxLabelDirective,
diff --git a/packages/igx-templates/igx-ts/list/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/list/default/files/src/app/__path__/__filePrefix__.html
@@ -10,13 +10,16 @@
     <igx-icon>search</igx-icon>
   </igx-prefix>
   <input #search igxInput placeholder="Search Contacts" [(ngModel)]="searchContact">
-  <igx-suffix *ngIf="search.value.length > 0" (click)="searchContact = ''">
+  @if (search.value.length > 0) {
+  <igx-suffix (click)="searchContact = ''">
     <igx-icon>clear</igx-icon>
   </igx-suffix>
+  }
 </igx-input-group>
 <igx-list>
   <igx-list-item [isHeader]="true"> Contacts </igx-list-item>
-  <igx-list-item #item *ngFor="let contact of contacts | igxFilter: filterContacts;">
+  @for (contact of contacts | igxFilter: filterContacts; track contact) {
+  <igx-list-item #item>
     <div class="item-container">
       <div class="contact">
         <igx-avatar [src]="contact.photo" [shape]="'square'"></igx-avatar>
@@ -29,4 +32,5 @@
       </igx-icon>
     </div>
   </igx-list-item>
+  }
 </igx-list>
diff --git a/packages/igx-templates/igx-ts/list/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/list/default/files/src/app/__path__/__filePrefix__.ts
@@ -11,7 +11,7 @@ import {
   IgxAvatarComponent,
   IgxFilterPipe,
 } from '<%=igxPackage%>';
-import { NgIf, NgFor, NgClass } from '@angular/common';
+import { NgClass } from '@angular/common';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 interface Contact {
@@ -35,8 +35,6 @@ interface Contact {
     IgxSuffixDirective,
     IgxListComponent,
     IgxAvatarComponent,
-    NgIf,
-    NgFor,
     NgClass,
     ReactiveFormsModule,
     FormsModule
diff --git a/packages/igx-templates/igx-ts/select/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/select/default/files/src/app/__path__/__filePrefix__.html
@@ -9,8 +9,10 @@
 <div class="select-wrapper">
   <igx-select #select id="simple-select">
     <label igxLabel for="simple-select">Simple Select</label>
-    <igx-select-item *ngFor="let item of items" [value]="item">
+    @for (item of items; track item) {
+    <igx-select-item [value]="item">
       {{item}}
     </igx-select-item>
+    }
   </igx-select>
 </div>
diff --git a/packages/igx-templates/igx-ts/select/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/select/default/files/src/app/__path__/__filePrefix__.ts
@@ -1,12 +1,11 @@
 import { Component } from '@angular/core';
-import { NgFor } from '@angular/common';
 import { IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent } from '<%=igxPackage%>';;
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: './<%=filePrefix%>.html',
   styleUrl: './<%=filePrefix%>.scss',
-  imports: [IgxSelectComponent, IgxLabelDirective, NgFor, IgxSelectItemComponent]
+  imports: [IgxSelectComponent, IgxLabelDirective, IgxSelectItemComponent]
 })
 export class <%=ClassName%> {
   public items: string[] = ['Orange', 'Apple', 'Banana', 'Mango', 'Pineapple'];
diff --git a/packages/igx-templates/igx-ts/select/select-groups/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/select/select-groups/files/src/app/__path__/__filePrefix__.html
@@ -10,13 +10,19 @@
 <div class="select-wrapper">
   <igx-select #select id="selectWithGroups">
     <label igxLabel for="selectWithGroups">Select With Groups</label>
-    <igx-select-item-group *ngFor="let item of items" [label]="item.type">
-      <igx-select-item *ngFor="let fruit of item.fruits" [value]="fruit">
+    @for (item of items; track item) {
+    <igx-select-item-group [label]="item.type">
+      @for (fruit of item.fruits; track fruit) {
+      <igx-select-item [value]="fruit">
         {{fruit}}
       </igx-select-item>
-      <igx-select-item *ngFor="let vegetable of item.vegetables" [value]="vegetable">
+      }
+      @for (vegetable of item.vegetables; track vegetable) {
+      <igx-select-item [value]="vegetable">
         {{vegetable}}
       </igx-select-item>
+      }
     </igx-select-item-group>
+    }
   </igx-select>
 </div>
diff --git a/packages/igx-templates/igx-ts/select/select-groups/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/select/select-groups/files/src/app/__path__/__filePrefix__.ts
@@ -1,12 +1,11 @@
 import { Component } from '@angular/core';
-import { NgFor } from '@angular/common';
 import { IgxSelectComponent, IgxLabelDirective, IgxSelectGroupComponent, IgxSelectItemComponent } from '<%=igxPackage%>';
 
 @Component({
   selector: 'app-<%=filePrefix%>',
   templateUrl: '<%=filePrefix%>.html',
   styleUrl: '<%=filePrefix%>.scss',
-  imports: [IgxSelectComponent, IgxLabelDirective, NgFor, IgxSelectGroupComponent, IgxSelectItemComponent]
+  imports: [IgxSelectComponent, IgxLabelDirective, IgxSelectGroupComponent, IgxSelectItemComponent]
 })
 export class <%=ClassName%> {
   public items: any[] = [
diff --git a/packages/igx-templates/igx-ts/select/select-in-form/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/select/select-in-form/files/src/app/__path__/__filePrefix__.html
@@ -15,9 +15,11 @@
         <label igxLabel for="fruitSelect">Favorite fruit</label>
         <igx-prefix>Fruit</igx-prefix>
         <igx-select-item> None </igx-select-item>
-        <igx-select-item *ngFor="let fruit of fruits" [value]="fruit">
+        @for (fruit of fruits; track fruit) {
+        <igx-select-item [value]="fruit">
           {{fruit}}
         </igx-select-item>
+        }
       </igx-select>
     </div>
     <div class="actions">
diff --git a/packages/igx-templates/igx-ts/select/select-in-form/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/select/select-in-form/files/src/app/__path__/__filePrefix__.ts
@@ -10,7 +10,6 @@ import {
   IgxSelectItemComponent,
   IgxButtonDirective,
 } from '<%=igxPackage%>';
-import { NgFor } from '@angular/common';
 import { ReactiveFormsModule, FormsModule } from '@angular/forms';
 
 @Component({
@@ -24,7 +23,6 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
     IgxLabelDirective,
     IgxPrefixDirective,
     IgxSelectItemComponent,
-    NgFor,
     IgxButtonDirective,
     IgxToastComponent
   ]
diff --git a/packages/igx-templates/igx-ts/tree/default/files/src/app/__path__/__filePrefix__.html b/packages/igx-templates/igx-ts/tree/default/files/src/app/__path__/__filePrefix__.html
@@ -6,29 +6,41 @@
 
 <div class="sample-wrapper">
   <igx-tree selection="Cascading">
-    <igx-tree-node *ngFor="let root of data" [expanded]="true" [data]="root">
+    @for (root of data; track root) {
+    <igx-tree-node [expanded]="true" [data]="root">
       <ng-template *ngTemplateOutlet="nodeTemplate; context: { $implicit: root }"></ng-template>
-      <igx-tree-node #subfolder *ngFor="let folder of root.Files" [data]="folder">
+      @for (folder of root.Files; track folder) {
+      <igx-tree-node #subfolder [data]="folder">
         <ng-template *ngTemplateOutlet="nodeTemplate; context: { $implicit: folder }"></ng-template>
-        <igx-tree-node *ngFor="let file of folder.Files" [data]="file">
+        @for (file of folder.Files; track file) {
+        <igx-tree-node [data]="file">
           <ng-template *ngTemplateOutlet="nodeTemplate; context: { $implicit: file }"></ng-template>
         </igx-tree-node>
+        }
       </igx-tree-node>
+      }
     </igx-tree-node>
+    }
     <igx-tree-node #remote [loading]="loading" [disabled]="loading" [data]="remoteRoot"
       (expandedChange)="getNodeData(remote, $event)">
       <div class="node">
         <igx-icon class="tree-node-icon">{{ remoteRoot.Icon }}</igx-icon>
         <span class="node-title">{{ remoteRoot.Name }}</span>
-        <igx-icon *ngIf="showRefresh" class="tree-node-icon node-refresh" (click)="refreshData(remote)"
+        @if (showRefresh) {
+        <igx-icon class="tree-node-icon node-refresh" (click)="refreshData(remote)"
           [showDelay]="600" [hideDelay]="100" igxTooltipTarget="tooltipRef">refresh</igx-icon>
+        }
       </div>
-      <igx-tree-node #dummyNode *ngIf="!remoteData?.length && !remote.loading" [data]="{}" [disabled]="true">
+      @if (!remoteData?.length && !remote.loading) {
+      <igx-tree-node #dummyNode [data]="{}" [disabled]="true">
       </igx-tree-node>
-      <igx-tree-node *ngFor="let entry of remoteData" [data]="entry" [selected]="!!entry.Selected"
+      }
+      @for (entry of remoteData; track entry) {
+      <igx-tree-node [data]="entry" [selected]="!!entry.Selected"
         (selectedChange)="handleSelection(entry, $event)">
         <ng-template *ngTemplateOutlet="nodeTemplate; context: { $implicit: entry }"></ng-template>
       </igx-tree-node>
+      }
     </igx-tree-node>
   </igx-tree>
   <ng-template #nodeTemplate let-data>
diff --git a/packages/igx-templates/igx-ts/tree/default/files/src/app/__path__/__filePrefix__.ts b/packages/igx-templates/igx-ts/tree/default/files/src/app/__path__/__filePrefix__.ts
@@ -1,5 +1,5 @@
 import { Component, OnDestroy } from '@angular/core';
-import { NgFor, NgTemplateOutlet, NgIf } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import {
   IgxTreeNodeComponent,
   IgxTreeComponent,
@@ -19,11 +19,9 @@ import { Data } from './services/data';
   providers: [Data],
   imports: [
     IgxTreeComponent,
-    NgFor,
     IgxTreeNodeComponent,
     NgTemplateOutlet,
     IgxIconComponent,
-    NgIf,
     IgxTooltipTargetDirective,
     IgxTooltipDirective
   ]
