refactor(igx-ts): migrate templates to Angular signals and inject() function

CHANGELOG.md

@@ -34,6 +34,7 @@ All scaffolded projects now include AI-ready configuration files to enhance the
 
 A comprehensive modernization of all Angular templates to align with Angular v21+ patterns.
 
+* **Signals and inject() migration:** replaced `@ViewChild` with signal-based `viewChild()` / `viewChild.required()`, `@Output` with `output()`, and constructor-based dependency injection with the `inject()` function across all 34 template files ([#1586](https://github.com/IgniteUI/igniteui-cli/pull/1586))
 * **Control flow migration:** replaced `*ngIf`, `*ngFor`, `*ngSwitch` structural directives with built-in `@if`, `@for`, `@switch` block syntax; migrated `[ngClass]` to `[class]` bindings across all templates ([#1584](https://github.com/IgniteUI/igniteui-cli/pull/1584))
 * **Standalone component adoption:** removed NgModule files (`AuthenticationModule`, `AppModule`) and replaced with provider functions; `provideAuthentication()` consolidates all auth setup ([#1554](https://github.com/IgniteUI/igniteui-cli/pull/1554))
 * **Auth library upgrade:** migrated to `angular-auth-oidc-client` v21 API with configurable social login providers (Google, Microsoft, Facebook) ([#1554](https://github.com/IgniteUI/igniteui-cli/pull/1554))

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

@@ -1,4 +1,4 @@
-import { Component, Pipe, PipeTransform, ViewChild, forwardRef } from '@angular/core';
+import { Component, Pipe, PipeTransform, viewChild, forwardRef } from '@angular/core';
 import {
   IgxToastComponent,
   ISelectionEventArgs,
@@ -44,8 +44,7 @@ export class <%=ClassName%> {
     verticalDirection: VerticalAlignment.Middle
   };
 
-  @ViewChild(IgxToastComponent, { static: true })
-  public toast!: IgxToastComponent;
+  public toast = viewChild.required(IgxToastComponent);
 
   constructor() {
     this.regions = townsExtended;
@@ -59,7 +58,7 @@ export class <%=ClassName%> {
     const townEntry = allTowns.find(t => t.name === e.newSelection.value);
 
     this.postalCode = townEntry?.postalCode;
-    this.toast.open(undefined, this.messagePositionSettings);
+    this.toast().open(undefined, this.messagePositionSettings);
   }
 }
 

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

@@ -2,7 +2,7 @@ import {
 	AfterViewInit,
 	Component,
 	ViewEncapsulation,
-	ViewChild,
+	viewChild,
   } from '@angular/core';
   import { IgxButtonDirective, IgxLayoutDirective } from '<%=igxPackage%>';
   import {
@@ -19,42 +19,41 @@ import {
   imports: [IgxLayoutDirective, IgxButtonDirective, IgxBulletGraphCoreModule]
 })
 export class <%=ClassName%> implements AfterViewInit {
-  @ViewChild('bulletGraph', { static: true })
-  public bulletGraph!: IgxBulletGraphComponent;
+  public bulletGraph = viewChild.required<IgxBulletGraphComponent>('bulletGraph');
 
   public ngAfterViewInit(): void {
     // enabling animation duration (in milliseconds)
-    this.bulletGraph.transitionDuration = 500;
+    this.bulletGraph().transitionDuration = 500;
     this.AnimateToGauge3();
   }
 
   public AnimateToGauge3(): void {
-    this.bulletGraph.minimumValue = 0;
-    this.bulletGraph.maximumValue = 120;
-    this.bulletGraph.value = 70;
-    this.bulletGraph.interval = 10;
+    this.bulletGraph().minimumValue = 0;
+    this.bulletGraph().maximumValue = 120;
+    this.bulletGraph().value = 70;
+    this.bulletGraph().interval = 10;
 
     // setting appearance of labels
-    this.bulletGraph.labelInterval = 10;
-    this.bulletGraph.labelExtent = 0.02;
+    this.bulletGraph().labelInterval = 10;
+    this.bulletGraph().labelExtent = 0.02;
 
     // setting custom appearance of performance bar
-    this.bulletGraph.valueInnerExtent = 0.5;
-    this.bulletGraph.valueOuterExtent = 0.7;
-    this.bulletGraph.valueBrush = '#000000';
+    this.bulletGraph().valueInnerExtent = 0.5;
+    this.bulletGraph().valueOuterExtent = 0.7;
+    this.bulletGraph().valueBrush = '#000000';
 
     // setting custom appearance of target bar
-    this.bulletGraph.targetValueBrush = '#000000';
-    this.bulletGraph.targetValueBreadth = 10;
-    this.bulletGraph.targetValue = 90;
+    this.bulletGraph().targetValueBrush = '#000000';
+    this.bulletGraph().targetValueBreadth = 10;
+    this.bulletGraph().targetValue = 90;
 
     // setting appearance of major/minor ticks
-    this.bulletGraph.minorTickCount = 5;
-    this.bulletGraph.minorTickEndExtent = 0.10;
-    this.bulletGraph.minorTickStartExtent = 0.20;
-    this.bulletGraph.tickStartExtent = 0.20;
-    this.bulletGraph.tickEndExtent = 0.05;
-    this.bulletGraph.tickStrokeThickness = 2;
+    this.bulletGraph().minorTickCount = 5;
+    this.bulletGraph().minorTickEndExtent = 0.10;
+    this.bulletGraph().minorTickStartExtent = 0.20;
+    this.bulletGraph().tickStartExtent = 0.20;
+    this.bulletGraph().tickEndExtent = 0.05;
+    this.bulletGraph().tickStrokeThickness = 2;
 
     // setting custom gauge ranges
     const range1 = new IgxLinearGraphRangeComponent();
@@ -67,64 +66,64 @@ export class <%=ClassName%> implements AfterViewInit {
     range3.startValue = 80;
     range3.endValue = 120;
 
-    this.bulletGraph.rangeBrushes  = [ '#FF9800', '#F96232', '#C62828'];
-    this.bulletGraph.rangeOutlines = [ '#FF9800', '#F96232', '#C62828'];
-    this.bulletGraph.ranges.clear();
-    this.bulletGraph.ranges.add(range1);
-    this.bulletGraph.ranges.add(range2);
-    this.bulletGraph.ranges.add(range3);
+    this.bulletGraph().rangeBrushes  = [ '#FF9800', '#F96232', '#C62828'];
+    this.bulletGraph().rangeOutlines = [ '#FF9800', '#F96232', '#C62828'];
+    this.bulletGraph().ranges.clear();
+    this.bulletGraph().ranges.add(range1);
+    this.bulletGraph().ranges.add(range2);
+    this.bulletGraph().ranges.add(range3);
 
     // setting extent of all gauge ranges
-    for (let i = 0; i < this.bulletGraph.ranges.count; i++) {
-      const range = this.bulletGraph.ranges.item(i);
+    for (let i = 0; i < this.bulletGraph().ranges.count; i++) {
+      const range = this.bulletGraph().ranges.item(i);
       range.innerStartExtent = 0.2;
       range.innerEndExtent = 0.2;
       range.outerStartExtent = 0.95;
       range.outerEndExtent = 0.95;
     }
 
     // setting extent of gauge scale
-    this.bulletGraph.scaleBackgroundThickness = 0.5;
-    this.bulletGraph.scaleBackgroundBrush = '#dbdbdb';
-    this.bulletGraph.scaleBackgroundOutline = 'gray';
-    this.bulletGraph.scaleStartExtent = 0.05;
-    this.bulletGraph.scaleEndExtent = 0.95;
-    this.bulletGraph.scaleBackgroundThickness = 0;
+    this.bulletGraph().scaleBackgroundThickness = 0.5;
+    this.bulletGraph().scaleBackgroundBrush = '#dbdbdb';
+    this.bulletGraph().scaleBackgroundOutline = 'gray';
+    this.bulletGraph().scaleStartExtent = 0.05;
+    this.bulletGraph().scaleEndExtent = 0.95;
+    this.bulletGraph().scaleBackgroundThickness = 0;
 
     // setting appearance of backing fill and outline
-    this.bulletGraph.backingBrush = '#f7f7f7';
-    this.bulletGraph.backingOutline = '#d1d1d1';
-    this.bulletGraph.backingStrokeThickness = 0;
+    this.bulletGraph().backingBrush = '#f7f7f7';
+    this.bulletGraph().backingOutline = '#d1d1d1';
+    this.bulletGraph().backingStrokeThickness = 0;
 
   }
 
   public AnimateToGauge2(): void {
-    this.bulletGraph.minimumValue = 100;
-    this.bulletGraph.maximumValue = 200;
-    this.bulletGraph.value = 120;
-    this.bulletGraph.interval = 10;
+    this.bulletGraph().minimumValue = 100;
+    this.bulletGraph().maximumValue = 200;
+    this.bulletGraph().value = 120;
+    this.bulletGraph().interval = 10;
 
     // setting appearance of labels
-    this.bulletGraph.labelInterval = 10;
-    this.bulletGraph.labelExtent = 0.02;
+    this.bulletGraph().labelInterval = 10;
+    this.bulletGraph().labelExtent = 0.02;
 
     // setting custom appearance of performance bar
-    this.bulletGraph.valueInnerExtent = 0.5;
-    this.bulletGraph.valueOuterExtent = 0.7;
-    this.bulletGraph.valueBrush = '#000000';
+    this.bulletGraph().valueInnerExtent = 0.5;
+    this.bulletGraph().valueOuterExtent = 0.7;
+    this.bulletGraph().valueBrush = '#000000';
 
     // setting custom appearance of target bar
-    this.bulletGraph.targetValueBrush = '#000000';
-    this.bulletGraph.targetValueBreadth = 10;
-    this.bulletGraph.targetValue = 180;
+    this.bulletGraph().targetValueBrush = '#000000';
+    this.bulletGraph().targetValueBreadth = 10;
+    this.bulletGraph().targetValue = 180;
 
     // setting appearance of major/minor ticks
-    this.bulletGraph.minorTickCount = 5;
-    this.bulletGraph.minorTickEndExtent = 0.10;
-    this.bulletGraph.minorTickStartExtent = 0.20;
-    this.bulletGraph.tickStartExtent = 0.20;
-    this.bulletGraph.tickEndExtent = 0.05;
-    this.bulletGraph.tickStrokeThickness = 2;
+    this.bulletGraph().minorTickCount = 5;
+    this.bulletGraph().minorTickEndExtent = 0.10;
+    this.bulletGraph().minorTickStartExtent = 0.20;
+    this.bulletGraph().tickStartExtent = 0.20;
+    this.bulletGraph().tickEndExtent = 0.05;
+    this.bulletGraph().tickStrokeThickness = 2;
 
     // setting custom gauge ranges
     const range1 = new IgxLinearGraphRangeComponent();
@@ -140,64 +139,64 @@ export class <%=ClassName%> implements AfterViewInit {
     range4.startValue = 175;
     range4.endValue = 200;
 
-    this.bulletGraph.rangeBrushes  = [ '#0078C8', '#0099FF', '#21A7FF', '#4FB9FF'];
-    this.bulletGraph.rangeOutlines = [ '#0078C8', '#0099FF', '#21A7FF', '#4FB9FF'];
-    this.bulletGraph.ranges.clear();
-    this.bulletGraph.ranges.add(range1);
-    this.bulletGraph.ranges.add(range2);
-    this.bulletGraph.ranges.add(range3);
-    this.bulletGraph.ranges.add(range4);
+    this.bulletGraph().rangeBrushes  = [ '#0078C8', '#0099FF', '#21A7FF', '#4FB9FF'];
+    this.bulletGraph().rangeOutlines = [ '#0078C8', '#0099FF', '#21A7FF', '#4FB9FF'];
+    this.bulletGraph().ranges.clear();
+    this.bulletGraph().ranges.add(range1);
+    this.bulletGraph().ranges.add(range2);
+    this.bulletGraph().ranges.add(range3);
+    this.bulletGraph().ranges.add(range4);
 
     // setting extent of all gauge ranges
-    for (let i = 0; i < this.bulletGraph.ranges.count; i++) {
-      const range = this.bulletGraph.ranges.item(i);
+    for (let i = 0; i < this.bulletGraph().ranges.count; i++) {
+      const range = this.bulletGraph().ranges.item(i);
       range.innerStartExtent = 0.2;
       range.innerEndExtent = 0.2;
       range.outerStartExtent = 0.95;
       range.outerEndExtent = 0.95;
     }
 
     // setting extent of gauge scale
-    this.bulletGraph.scaleBackgroundThickness = 0.5;
-    this.bulletGraph.scaleBackgroundBrush = '#dbdbdb';
-    this.bulletGraph.scaleBackgroundOutline = 'gray';
-    this.bulletGraph.scaleStartExtent = 0.05;
-    this.bulletGraph.scaleEndExtent = 0.95;
-    this.bulletGraph.scaleBackgroundThickness = 0;
+    this.bulletGraph().scaleBackgroundThickness = 0.5;
+    this.bulletGraph().scaleBackgroundBrush = '#dbdbdb';
+    this.bulletGraph().scaleBackgroundOutline = 'gray';
+    this.bulletGraph().scaleStartExtent = 0.05;
+    this.bulletGraph().scaleEndExtent = 0.95;
+    this.bulletGraph().scaleBackgroundThickness = 0;
 
     // setting appearance of backing fill and outline
-    this.bulletGraph.backingBrush = '#f7f7f7';
-    this.bulletGraph.backingOutline = '#d1d1d1';
-    this.bulletGraph.backingStrokeThickness = 0;
+    this.bulletGraph().backingBrush = '#f7f7f7';
+    this.bulletGraph().backingOutline = '#d1d1d1';
+    this.bulletGraph().backingStrokeThickness = 0;
   }
 
   public AnimateToGauge1(): void {
-    this.bulletGraph.minimumValue = 0;
-    this.bulletGraph.maximumValue = 80;
-    this.bulletGraph.value = 70;
-    this.bulletGraph.interval = 20;
+    this.bulletGraph().minimumValue = 0;
+    this.bulletGraph().maximumValue = 80;
+    this.bulletGraph().value = 70;
+    this.bulletGraph().interval = 20;
 
     // setting appearance of labels
-    this.bulletGraph.labelInterval = 20;
-    this.bulletGraph.labelExtent = 0.02;
+    this.bulletGraph().labelInterval = 20;
+    this.bulletGraph().labelExtent = 0.02;
 
     // setting custom appearance of performance bar
-    this.bulletGraph.valueInnerExtent = 0.5;
-    this.bulletGraph.valueOuterExtent = 0.7;
-    this.bulletGraph.valueBrush = '#000000';
+    this.bulletGraph().valueInnerExtent = 0.5;
+    this.bulletGraph().valueOuterExtent = 0.7;
+    this.bulletGraph().valueBrush = '#000000';
 
     // setting custom appearance of target bar
-    this.bulletGraph.targetValueBrush = '#000000';
-    this.bulletGraph.targetValueBreadth = 10;
-    this.bulletGraph.targetValue = 60;
+    this.bulletGraph().targetValueBrush = '#000000';
+    this.bulletGraph().targetValueBreadth = 10;
+    this.bulletGraph().targetValue = 60;
 
     // setting appearance of major/minor ticks
-    this.bulletGraph.minorTickCount = 5;
-    this.bulletGraph.minorTickEndExtent = 0.10;
-    this.bulletGraph.minorTickStartExtent = 0.20;
-    this.bulletGraph.tickStartExtent = 0.20;
-    this.bulletGraph.tickEndExtent = 0.05;
-    this.bulletGraph.tickStrokeThickness = 2;
+    this.bulletGraph().minorTickCount = 5;
+    this.bulletGraph().minorTickEndExtent = 0.10;
+    this.bulletGraph().minorTickStartExtent = 0.20;
+    this.bulletGraph().tickStartExtent = 0.20;
+    this.bulletGraph().tickEndExtent = 0.05;
+    this.bulletGraph().tickStrokeThickness = 2;
 
     // setting custom gauge ranges
     const range1 = new IgxLinearGraphRangeComponent();
@@ -207,32 +206,32 @@ export class <%=ClassName%> implements AfterViewInit {
     range2.startValue = 40;
     range2.endValue = 80;
 
-    this.bulletGraph.rangeBrushes  = [ '#a4bd29', '#F86232' ];
-    this.bulletGraph.rangeOutlines = [ '#a4bd29', '#F86232' ];
-    this.bulletGraph.ranges.clear();
-    this.bulletGraph.ranges.add(range1);
-    this.bulletGraph.ranges.add(range2);
+    this.bulletGraph().rangeBrushes  = [ '#a4bd29', '#F86232' ];
+    this.bulletGraph().rangeOutlines = [ '#a4bd29', '#F86232' ];
+    this.bulletGraph().ranges.clear();
+    this.bulletGraph().ranges.add(range1);
+    this.bulletGraph().ranges.add(range2);
 
     // setting extent of all gauge ranges
-    for (let i = 0; i < this.bulletGraph.ranges.count; i++) {
-      const range = this.bulletGraph.ranges.item(i);
+    for (let i = 0; i < this.bulletGraph().ranges.count; i++) {
+      const range = this.bulletGraph().ranges.item(i);
       range.innerStartExtent = 0.2;
       range.innerEndExtent = 0.2;
       range.outerStartExtent = 0.95;
       range.outerEndExtent = 0.95;
     }
 
     // setting extent of gauge scale
-    this.bulletGraph.scaleBackgroundThickness = 0.5;
-    this.bulletGraph.scaleBackgroundBrush = '#dbdbdb';
-    this.bulletGraph.scaleBackgroundOutline = 'gray';
-    this.bulletGraph.scaleStartExtent = 0.05;
-    this.bulletGraph.scaleEndExtent = 0.95;
-    this.bulletGraph.scaleBackgroundThickness = 0;
+    this.bulletGraph().scaleBackgroundThickness = 0.5;
+    this.bulletGraph().scaleBackgroundBrush = '#dbdbdb';
+    this.bulletGraph().scaleBackgroundOutline = 'gray';
+    this.bulletGraph().scaleStartExtent = 0.05;
+    this.bulletGraph().scaleEndExtent = 0.95;
+    this.bulletGraph().scaleBackgroundThickness = 0;
 
     // setting appearance of backing fill and outline
-    this.bulletGraph.backingBrush = '#f7f7f7';
-    this.bulletGraph.backingOutline = '#d1d1d1';
-    this.bulletGraph.backingStrokeThickness = 0;
+    this.bulletGraph().backingBrush = '#f7f7f7';
+    this.bulletGraph().backingOutline = '#d1d1d1';
+    this.bulletGraph().backingStrokeThickness = 0;
   }
 }

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

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, inject, viewChild } from '@angular/core';
 import {
   CloseScrollStrategy,
   ConnectedPositioningStrategy,
@@ -73,11 +73,9 @@ export class <%=ClassName%> {
 
   public chipList: NamedEntry[] = [];
 
-  @ViewChild('chipsArea', { static: true, read: IgxChipsAreaComponent })
-  public chipsArea!: IgxChipsAreaComponent;
+  public chipsArea = viewChild.required('chipsArea', { read: IgxChipsAreaComponent });
 
-  @ViewChild(IgxDropDownComponent, { static: true })
-  public igxDropDown!: IgxDropDownComponent;
+  public igxDropDown = viewChild.required(IgxDropDownComponent);
 
   private positionSettings = {
     horizontalStartPoint: HorizontalAlignment.Left,
@@ -91,7 +89,7 @@ export class <%=ClassName%> {
     scrollStrategy: new CloseScrollStrategy()
   };
 
-  constructor(public cdr: ChangeDetectorRef) { }
+  public cdr = inject(ChangeDetectorRef);
 
   public chipRemoved(event: IBaseChipEventArgs) {
     this.chipList = this.chipList.filter((item) => {
@@ -102,7 +100,7 @@ export class <%=ClassName%> {
 
   public toggleDropDown(ev: MouseEvent) {
     this.overlaySettings.target = ev.target as HTMLButtonElement;
-    this.igxDropDown.toggle(this.overlaySettings);
+    this.igxDropDown().toggle(this.overlaySettings);
   }
 
   public itemSelection(ev: ISelectionEventArgs) {