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

[Copilot]

• Migrate igx-ts templates from structural directives to built-in Angular control flow
• Remove NgIf/NgFor imports from TS files
• Fix indentation of nested elements inside @if/@for blocks
• Migrate [ngClass] → [class.*] bindings in list/default template
• Migrate [ngClass] → [class.*] bindings in awesome-grid template (2 usages)
• Migrate [ngClass] → [class] binding in weather-forecast template
• Remove NgClass imports from all 3 affected TS files
• No ngStyle usages found — nothing to migrate
• Tested: Created igx-ts project with all 38 components — project builds successfully with zero errors

---

✅ Integration Test Summary

Test: Create igx-ts project with all components and verify build

Steps performed:

1. Built the CLI from the branch (yarn build — success)
2. Created a new igx-ts Angular project using ig new test-app --framework=angular --type=igx-ts
3. Added all 38 available component templates to the project

Components added (all succeeded):

Group	Templates
Layouts	accordion, carousel, dock-manager, stepper, bottom-nav, tabs
Data Entry & Display	autocomplete, enhanced-autocomplete, chip, dropdown, input-group
Gauges	bullet-graph, linear-gauge, radial-gauge
Scheduling	calendar, date-picker, time-picker
Charts	category-chart, financial-chart
Grids & Lists	combo, grid, grid-batch-editing, custom-grid, grid-summaries, grid-multi-column-headers, hierarchical-grid, hierarchical-grid-batch-editing, hierarchical-grid-custom, hierarchical-grid-summaries, list, pivot-grid, select, select-groups, select-in-form, tree, custom-tree-grid
Interactions	dialog, tooltip
Maps	geographic-map
Views	awesome-grid, crm-grid, fintech-grid, fintech-tree-grid, login, weather-forecast

4. Installed dependencies (npm install — success)
5. Ran npx ng build — ✅ Build succeeded with zero errors
   • Build output: 15M in dist/test-app/
   • Only warnings: CommonJS module warnings from third-party dependencies (expected)

Migration verification:

• ✅ No residual *ngFor / *ngIf references in any generated component
• ✅ No residual ngClass / NgClass / ngStyle / NgStyle references in any generated component
• ✅ All templates use the new Angular built-in control flow (@if, @for, @switch)
• ✅ All class bindings use [class.*] syntax instead of [ngClass]

[coveralls]

coverage: 84.816%. remained the same
when pulling e2febe4 on copilot/migrate-code-to-angular-control-flow
into 2f1bd38 on master.

[Copilot]

Pull request overview

Migrates igx-ts standalone component templates from *ngIf/*ngFor to Angular built-in control flow (@if/@for) and removes now-unneeded NgIf/NgFor standalone imports.

Changes:

• Replaced structural directive usage in igx-ts templates with @if/@for blocks (including track expressions).
• Removed NgIf/NgFor imports from @angular/common and from standalone component imports arrays.
• Kept other @angular/common imports that are still required (e.g., NgTemplateOutlet, NgClass, pipes).

Reviewed changes

Copilot reviewed 44 out of 44 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/igx-templates/igx-ts/tree/default/files/src/app/path/filePrefix.ts	Drops NgIf/NgFor imports from standalone component.
packages/igx-templates/igx-ts/tree/default/files/src/app/path/filePrefix.html	Converts *ngFor/*ngIf to @for/@if in tree template.
packages/igx-templates/igx-ts/select/select-in-form/files/src/app/path/filePrefix.ts	Removes NgFor from imports/imports-array.
packages/igx-templates/igx-ts/select/select-in-form/files/src/app/path/filePrefix.html	Converts select item loop to @for.
packages/igx-templates/igx-ts/select/select-groups/files/src/app/path/filePrefix.ts	Removes NgFor from imports/imports-array.
packages/igx-templates/igx-ts/select/select-groups/files/src/app/path/filePrefix.html	Converts grouped select loops to nested @for.
packages/igx-templates/igx-ts/select/default/files/src/app/path/filePrefix.ts	Removes NgFor from imports/imports-array.
packages/igx-templates/igx-ts/select/default/files/src/app/path/filePrefix.html	Converts select items rendering to @for.
packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.ts	Removes NgFor from imports/imports-array.
packages/igx-templates/igx-ts/projects/side-nav/files/src/app/app.html	Converts route list rendering to @for.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login/login.ts	Removes NgIf from imports/imports-array.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login/login.html	Converts conditional social login section/buttons to @if.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.ts	Removes NgIf from imports/imports-array.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-dialog/login-dialog.html	Converts login/register toggling to @if.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-bar/login-bar.ts	Removes NgIf from imports/imports-array.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/authentication/login-bar/login-bar.html	Converts authenticated/unauthenticated UI toggles to @if.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.ts	Removes NgFor from imports/imports-array.
packages/igx-templates/igx-ts/projects/side-nav-auth/files/src/app/app.html	Converts route list rendering to @for.
packages/igx-templates/igx-ts/list/default/files/src/app/path/filePrefix.ts	Removes NgIf/NgFor imports and keeps NgClass.
packages/igx-templates/igx-ts/list/default/files/src/app/path/filePrefix.html	Converts search suffix visibility and list rendering to @if/@for.
packages/igx-templates/igx-ts/input-group/default/files/src/app/path/filePrefix.ts	Removes NgFor from imports/imports-array.
packages/igx-templates/igx-ts/input-group/default/files/src/app/path/filePrefix.html	Converts select-group/item loops to nested @for.
packages/igx-templates/igx-ts/dropdown/default/files/src/app/path/filePrefix.ts	Removes NgFor from imports/imports-array.
packages/igx-templates/igx-ts/dropdown/default/files/src/app/path/filePrefix.html	Converts dropdown items rendering to @for.
packages/igx-templates/igx-ts/custom-templates/weather-forecast/files/src/app/path/filePrefix.ts	Removes NgIf/NgFor imports and keeps NgClass.
packages/igx-templates/igx-ts/custom-templates/weather-forecast/files/src/app/path/filePrefix.html	Converts conditional main/forecast rendering and loop to @if/@for.
packages/igx-templates/igx-ts/custom-templates/login/files/src/app/path/filePrefix.ts	Removes NgIf from imports/imports-array.
packages/igx-templates/igx-ts/custom-templates/login/files/src/app/path/filePrefix.html	Converts form/success visibility toggles to @if.
packages/igx-templates/igx-ts/custom-templates/fintech-tree-grid/files/src/app/path/filePrefix.ts	Removes NgIf import from @angular/common usage.
packages/igx-templates/igx-ts/custom-templates/fintech-tree-grid/files/src/app/path/filePrefix.html	Converts toolbar/text/icon conditionals to @if.
packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/path/filePrefix.ts	Removes NgIf/NgFor imports, retains CurrencyPipe.
packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/path/filePrefix.html	Converts toolbar visibility, editor item loops, and trend icon conditionals to @if/@for.
packages/igx-templates/igx-ts/custom-templates/crm-grid/files/src/app/path/filePrefix.ts	Removes NgIf from imports/imports-array.
packages/igx-templates/igx-ts/custom-templates/crm-grid/files/src/app/path/filePrefix.html	Converts multiple nested *ngIf cases to @if blocks.
packages/igx-templates/igx-ts/custom-templates/awesome-grid/files/src/app/path/filePrefix.ts	Removes NgIf/NgFor imports, keeps NgClass/DecimalPipe.
packages/igx-templates/igx-ts/custom-templates/awesome-grid/files/src/app/path/filePrefix.html	Converts top-3 overlays and badge visibility to @if/@for.
packages/igx-templates/igx-ts/chip/default/files/src/app/path/filePrefix.ts	Removes NgFor from imports/imports-array.
packages/igx-templates/igx-ts/chip/default/files/src/app/path/filePrefix.html	Converts chips and dropdown items rendering to @for.
packages/igx-templates/igx-ts/carousel/default/files/src/app/path/filePrefix.ts	Removes NgFor from imports/imports-array.
packages/igx-templates/igx-ts/carousel/default/files/src/app/path/filePrefix.html	Converts slides rendering to @for.
packages/igx-templates/igx-ts/autocomplete/autocomplete-extended/files/src/app/path/filePrefix.ts	Removes NgFor from imports/imports-array.
packages/igx-templates/igx-ts/autocomplete/autocomplete-extended/files/src/app/path/filePrefix.html	Converts grouped dropdown rendering to nested @for.
packages/igx-templates/igx-ts/autocomplete/autocomplete-custom/files/src/app/path/filePrefix.ts	Removes NgFor from imports/imports-array.
packages/igx-templates/igx-ts/autocomplete/autocomplete-custom/files/src/app/path/filePrefix.html	Converts dropdown items rendering to @for.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[damyanpetev]

@copilot All the newly added @for / @if / etc blocks do not indent their nested elements. Please correct the formatting on the changed control flow locations

[Copilot]

@copilot All the newly added @for / @if / etc blocks do not indent their nested elements. Please correct the formatting on the changed control flow locations

Fixed in 2c37884 — all nested elements inside @for/@if blocks are now properly indented with an additional 2-space level relative to the control flow statement.