Skip to content

Migrate igx-ts templates to Angular signals and inject() function #1586

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
Copilot wants to merge 7 commits into
base: master
Choose a base branch
from
Draft

Migrate igx-ts templates to Angular signals and inject() function #1586

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3711976
Plan: Migrate igx-ts templates to Angular signals and inject()
Copilot Mar 31, 2026
bd95fd5
Migrate igx-ts templates to use Angular signals (viewChild/output) an…
Copilot Mar 31, 2026
8ae3ae7
Merge remote-tracking branch 'origin/master' into copilot/migrate-to-…
damyanpetev Apr 2, 2026
45e91a1
chore: revert lock file changes
damyanpetev Apr 2, 2026
6fb4e68
Merge branch 'master' into copilot/migrate-to-angular-signals
kdinev Apr 2, 2026
1040ead
Merge branch 'master' into copilot/migrate-to-angular-signals
kdinev Apr 2, 2026
48a4100
fix: resolve TypeScript build errors in migrated templates and update…
Copilot Apr 3, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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))
Expand Down
7 changes: 3 additions & 4 deletions ...plates/igx-ts/autocomplete/autocomplete-extended/files/src/app/__path__/__filePrefix__.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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,
Expand Down Expand Up @@ -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;
Expand All @@ -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);
}
}

Expand Down
217 changes: 108 additions & 109 deletions packages/igx-templates/igx-ts/bullet-graph/default/files/src/app/__path__/__filePrefix__.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import {
AfterViewInit,
Component,
ViewEncapsulation,
ViewChild,
viewChild,
} from '@angular/core';
import { IgxButtonDirective, IgxLayoutDirective } from '<%=igxPackage%>';
import {
Expand All @@ -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();
Expand All @@ -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();
Expand All @@ -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();
Expand All @@ -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;
}
}
12 changes: 5 additions & 7 deletions packages/igx-templates/igx-ts/chip/default/files/src/app/__path__/__filePrefix__.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
import { ChangeDetectorRef, Component, inject, viewChild } from '@angular/core';
import {
CloseScrollStrategy,
ConnectedPositioningStrategy,
Expand Down Expand Up @@ -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,
Expand All @@ -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) => {
Expand All @@ -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) {
Expand Down
Loading