Skip to content

Commit 285482a

Browse files
CopilotCopilot
authored
Merge pull request #1586 from IgniteUI/copilot/migrate-to-angular-signals
refactor(igx-ts): migrate templates to Angular signals and inject() function
1 parent c8a3e55 commit 285482a

35 files changed

Lines changed: 676 additions & 702 deletions

File tree

‎CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@ All scaffolded projects now include AI-ready configuration files to enhance the
3434

3535
A comprehensive modernization of all Angular templates to align with Angular v21+ patterns.
3636

37+
* **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))
3738
* **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))
3839
* **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))
3940
* **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‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { Component, Pipe, PipeTransform, ViewChild, forwardRef } from '@angular/core';
1+
import { Component, Pipe, PipeTransform, viewChild, forwardRef } from '@angular/core';
22
import {
33
IgxToastComponent,
44
ISelectionEventArgs,
@@ -44,8 +44,7 @@ export class <%=ClassName%> {
4444
verticalDirection: VerticalAlignment.Middle
4545
};
4646

47-
@ViewChild(IgxToastComponent, { static: true })
48-
public toast!: IgxToastComponent;
47+
public toast = viewChild.required(IgxToastComponent);
4948

5049
constructor() {
5150
this.regions = townsExtended;
@@ -59,7 +58,7 @@ export class <%=ClassName%> {
5958
const townEntry = allTowns.find(t => t.name === e.newSelection.value);
6059

6160
this.postalCode = townEntry?.postalCode;
62-
this.toast.open(undefined, this.messagePositionSettings);
61+
this.toast().open(undefined, this.messagePositionSettings);
6362
}
6463
}
6564

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

Lines changed: 108 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import {
22
AfterViewInit,
33
Component,
44
ViewEncapsulation,
5-
ViewChild,
5+
viewChild,
66
} from '@angular/core';
77
import { IgxButtonDirective, IgxLayoutDirective } from '<%=igxPackage%>';
88
import {
@@ -19,42 +19,41 @@ import {
1919
imports: [IgxLayoutDirective, IgxButtonDirective, IgxBulletGraphCoreModule]
2020
})
2121
export class <%=ClassName%> implements AfterViewInit {
22-
@ViewChild('bulletGraph', { static: true })
23-
public bulletGraph!: IgxBulletGraphComponent;
22+
public bulletGraph = viewChild.required<IgxBulletGraphComponent>('bulletGraph');
2423

2524
public ngAfterViewInit(): void {
2625
// enabling animation duration (in milliseconds)
27-
this.bulletGraph.transitionDuration = 500;
26+
this.bulletGraph().transitionDuration = 500;
2827
this.AnimateToGauge3();
2928
}
3029

3130
public AnimateToGauge3(): void {
32-
this.bulletGraph.minimumValue = 0;
33-
this.bulletGraph.maximumValue = 120;
34-
this.bulletGraph.value = 70;
35-
this.bulletGraph.interval = 10;
31+
this.bulletGraph().minimumValue = 0;
32+
this.bulletGraph().maximumValue = 120;
33+
this.bulletGraph().value = 70;
34+
this.bulletGraph().interval = 10;
3635

3736
// setting appearance of labels
38-
this.bulletGraph.labelInterval = 10;
39-
this.bulletGraph.labelExtent = 0.02;
37+
this.bulletGraph().labelInterval = 10;
38+
this.bulletGraph().labelExtent = 0.02;
4039

4140
// setting custom appearance of performance bar
42-
this.bulletGraph.valueInnerExtent = 0.5;
43-
this.bulletGraph.valueOuterExtent = 0.7;
44-
this.bulletGraph.valueBrush = '#000000';
41+
this.bulletGraph().valueInnerExtent = 0.5;
42+
this.bulletGraph().valueOuterExtent = 0.7;
43+
this.bulletGraph().valueBrush = '#000000';
4544

4645
// setting custom appearance of target bar
47-
this.bulletGraph.targetValueBrush = '#000000';
48-
this.bulletGraph.targetValueBreadth = 10;
49-
this.bulletGraph.targetValue = 90;
46+
this.bulletGraph().targetValueBrush = '#000000';
47+
this.bulletGraph().targetValueBreadth = 10;
48+
this.bulletGraph().targetValue = 90;
5049

5150
// setting appearance of major/minor ticks
52-
this.bulletGraph.minorTickCount = 5;
53-
this.bulletGraph.minorTickEndExtent = 0.10;
54-
this.bulletGraph.minorTickStartExtent = 0.20;
55-
this.bulletGraph.tickStartExtent = 0.20;
56-
this.bulletGraph.tickEndExtent = 0.05;
57-
this.bulletGraph.tickStrokeThickness = 2;
51+
this.bulletGraph().minorTickCount = 5;
52+
this.bulletGraph().minorTickEndExtent = 0.10;
53+
this.bulletGraph().minorTickStartExtent = 0.20;
54+
this.bulletGraph().tickStartExtent = 0.20;
55+
this.bulletGraph().tickEndExtent = 0.05;
56+
this.bulletGraph().tickStrokeThickness = 2;
5857

5958
// setting custom gauge ranges
6059
const range1 = new IgxLinearGraphRangeComponent();
@@ -67,64 +66,64 @@ export class <%=ClassName%> implements AfterViewInit {
6766
range3.startValue = 80;
6867
range3.endValue = 120;
6968

70-
this.bulletGraph.rangeBrushes = [ '#FF9800', '#F96232', '#C62828'];
71-
this.bulletGraph.rangeOutlines = [ '#FF9800', '#F96232', '#C62828'];
72-
this.bulletGraph.ranges.clear();
73-
this.bulletGraph.ranges.add(range1);
74-
this.bulletGraph.ranges.add(range2);
75-
this.bulletGraph.ranges.add(range3);
69+
this.bulletGraph().rangeBrushes = [ '#FF9800', '#F96232', '#C62828'];
70+
this.bulletGraph().rangeOutlines = [ '#FF9800', '#F96232', '#C62828'];
71+
this.bulletGraph().ranges.clear();
72+
this.bulletGraph().ranges.add(range1);
73+
this.bulletGraph().ranges.add(range2);
74+
this.bulletGraph().ranges.add(range3);
7675

7776
// setting extent of all gauge ranges
78-
for (let i = 0; i < this.bulletGraph.ranges.count; i++) {
79-
const range = this.bulletGraph.ranges.item(i);
77+
for (let i = 0; i < this.bulletGraph().ranges.count; i++) {
78+
const range = this.bulletGraph().ranges.item(i);
8079
range.innerStartExtent = 0.2;
8180
range.innerEndExtent = 0.2;
8281
range.outerStartExtent = 0.95;
8382
range.outerEndExtent = 0.95;
8483
}
8584

8685
// setting extent of gauge scale
87-
this.bulletGraph.scaleBackgroundThickness = 0.5;
88-
this.bulletGraph.scaleBackgroundBrush = '#dbdbdb';
89-
this.bulletGraph.scaleBackgroundOutline = 'gray';
90-
this.bulletGraph.scaleStartExtent = 0.05;
91-
this.bulletGraph.scaleEndExtent = 0.95;
92-
this.bulletGraph.scaleBackgroundThickness = 0;
86+
this.bulletGraph().scaleBackgroundThickness = 0.5;
87+
this.bulletGraph().scaleBackgroundBrush = '#dbdbdb';
88+
this.bulletGraph().scaleBackgroundOutline = 'gray';
89+
this.bulletGraph().scaleStartExtent = 0.05;
90+
this.bulletGraph().scaleEndExtent = 0.95;
91+
this.bulletGraph().scaleBackgroundThickness = 0;
9392

9493
// setting appearance of backing fill and outline
95-
this.bulletGraph.backingBrush = '#f7f7f7';
96-
this.bulletGraph.backingOutline = '#d1d1d1';
97-
this.bulletGraph.backingStrokeThickness = 0;
94+
this.bulletGraph().backingBrush = '#f7f7f7';
95+
this.bulletGraph().backingOutline = '#d1d1d1';
96+
this.bulletGraph().backingStrokeThickness = 0;
9897

9998
}
10099

101100
public AnimateToGauge2(): void {
102-
this.bulletGraph.minimumValue = 100;
103-
this.bulletGraph.maximumValue = 200;
104-
this.bulletGraph.value = 120;
105-
this.bulletGraph.interval = 10;
101+
this.bulletGraph().minimumValue = 100;
102+
this.bulletGraph().maximumValue = 200;
103+
this.bulletGraph().value = 120;
104+
this.bulletGraph().interval = 10;
106105

107106
// setting appearance of labels
108-
this.bulletGraph.labelInterval = 10;
109-
this.bulletGraph.labelExtent = 0.02;
107+
this.bulletGraph().labelInterval = 10;
108+
this.bulletGraph().labelExtent = 0.02;
110109

111110
// setting custom appearance of performance bar
112-
this.bulletGraph.valueInnerExtent = 0.5;
113-
this.bulletGraph.valueOuterExtent = 0.7;
114-
this.bulletGraph.valueBrush = '#000000';
111+
this.bulletGraph().valueInnerExtent = 0.5;
112+
this.bulletGraph().valueOuterExtent = 0.7;
113+
this.bulletGraph().valueBrush = '#000000';
115114

116115
// setting custom appearance of target bar
117-
this.bulletGraph.targetValueBrush = '#000000';
118-
this.bulletGraph.targetValueBreadth = 10;
119-
this.bulletGraph.targetValue = 180;
116+
this.bulletGraph().targetValueBrush = '#000000';
117+
this.bulletGraph().targetValueBreadth = 10;
118+
this.bulletGraph().targetValue = 180;
120119

121120
// setting appearance of major/minor ticks
122-
this.bulletGraph.minorTickCount = 5;
123-
this.bulletGraph.minorTickEndExtent = 0.10;
124-
this.bulletGraph.minorTickStartExtent = 0.20;
125-
this.bulletGraph.tickStartExtent = 0.20;
126-
this.bulletGraph.tickEndExtent = 0.05;
127-
this.bulletGraph.tickStrokeThickness = 2;
121+
this.bulletGraph().minorTickCount = 5;
122+
this.bulletGraph().minorTickEndExtent = 0.10;
123+
this.bulletGraph().minorTickStartExtent = 0.20;
124+
this.bulletGraph().tickStartExtent = 0.20;
125+
this.bulletGraph().tickEndExtent = 0.05;
126+
this.bulletGraph().tickStrokeThickness = 2;
128127

129128
// setting custom gauge ranges
130129
const range1 = new IgxLinearGraphRangeComponent();
@@ -140,64 +139,64 @@ export class <%=ClassName%> implements AfterViewInit {
140139
range4.startValue = 175;
141140
range4.endValue = 200;
142141

143-
this.bulletGraph.rangeBrushes = [ '#0078C8', '#0099FF', '#21A7FF', '#4FB9FF'];
144-
this.bulletGraph.rangeOutlines = [ '#0078C8', '#0099FF', '#21A7FF', '#4FB9FF'];
145-
this.bulletGraph.ranges.clear();
146-
this.bulletGraph.ranges.add(range1);
147-
this.bulletGraph.ranges.add(range2);
148-
this.bulletGraph.ranges.add(range3);
149-
this.bulletGraph.ranges.add(range4);
142+
this.bulletGraph().rangeBrushes = [ '#0078C8', '#0099FF', '#21A7FF', '#4FB9FF'];
143+
this.bulletGraph().rangeOutlines = [ '#0078C8', '#0099FF', '#21A7FF', '#4FB9FF'];
144+
this.bulletGraph().ranges.clear();
145+
this.bulletGraph().ranges.add(range1);
146+
this.bulletGraph().ranges.add(range2);
147+
this.bulletGraph().ranges.add(range3);
148+
this.bulletGraph().ranges.add(range4);
150149

151150
// setting extent of all gauge ranges
152-
for (let i = 0; i < this.bulletGraph.ranges.count; i++) {
153-
const range = this.bulletGraph.ranges.item(i);
151+
for (let i = 0; i < this.bulletGraph().ranges.count; i++) {
152+
const range = this.bulletGraph().ranges.item(i);
154153
range.innerStartExtent = 0.2;
155154
range.innerEndExtent = 0.2;
156155
range.outerStartExtent = 0.95;
157156
range.outerEndExtent = 0.95;
158157
}
159158

160159
// setting extent of gauge scale
161-
this.bulletGraph.scaleBackgroundThickness = 0.5;
162-
this.bulletGraph.scaleBackgroundBrush = '#dbdbdb';
163-
this.bulletGraph.scaleBackgroundOutline = 'gray';
164-
this.bulletGraph.scaleStartExtent = 0.05;
165-
this.bulletGraph.scaleEndExtent = 0.95;
166-
this.bulletGraph.scaleBackgroundThickness = 0;
160+
this.bulletGraph().scaleBackgroundThickness = 0.5;
161+
this.bulletGraph().scaleBackgroundBrush = '#dbdbdb';
162+
this.bulletGraph().scaleBackgroundOutline = 'gray';
163+
this.bulletGraph().scaleStartExtent = 0.05;
164+
this.bulletGraph().scaleEndExtent = 0.95;
165+
this.bulletGraph().scaleBackgroundThickness = 0;
167166

168167
// setting appearance of backing fill and outline
169-
this.bulletGraph.backingBrush = '#f7f7f7';
170-
this.bulletGraph.backingOutline = '#d1d1d1';
171-
this.bulletGraph.backingStrokeThickness = 0;
168+
this.bulletGraph().backingBrush = '#f7f7f7';
169+
this.bulletGraph().backingOutline = '#d1d1d1';
170+
this.bulletGraph().backingStrokeThickness = 0;
172171
}
173172

174173
public AnimateToGauge1(): void {
175-
this.bulletGraph.minimumValue = 0;
176-
this.bulletGraph.maximumValue = 80;
177-
this.bulletGraph.value = 70;
178-
this.bulletGraph.interval = 20;
174+
this.bulletGraph().minimumValue = 0;
175+
this.bulletGraph().maximumValue = 80;
176+
this.bulletGraph().value = 70;
177+
this.bulletGraph().interval = 20;
179178

180179
// setting appearance of labels
181-
this.bulletGraph.labelInterval = 20;
182-
this.bulletGraph.labelExtent = 0.02;
180+
this.bulletGraph().labelInterval = 20;
181+
this.bulletGraph().labelExtent = 0.02;
183182

184183
// setting custom appearance of performance bar
185-
this.bulletGraph.valueInnerExtent = 0.5;
186-
this.bulletGraph.valueOuterExtent = 0.7;
187-
this.bulletGraph.valueBrush = '#000000';
184+
this.bulletGraph().valueInnerExtent = 0.5;
185+
this.bulletGraph().valueOuterExtent = 0.7;
186+
this.bulletGraph().valueBrush = '#000000';
188187

189188
// setting custom appearance of target bar
190-
this.bulletGraph.targetValueBrush = '#000000';
191-
this.bulletGraph.targetValueBreadth = 10;
192-
this.bulletGraph.targetValue = 60;
189+
this.bulletGraph().targetValueBrush = '#000000';
190+
this.bulletGraph().targetValueBreadth = 10;
191+
this.bulletGraph().targetValue = 60;
193192

194193
// setting appearance of major/minor ticks
195-
this.bulletGraph.minorTickCount = 5;
196-
this.bulletGraph.minorTickEndExtent = 0.10;
197-
this.bulletGraph.minorTickStartExtent = 0.20;
198-
this.bulletGraph.tickStartExtent = 0.20;
199-
this.bulletGraph.tickEndExtent = 0.05;
200-
this.bulletGraph.tickStrokeThickness = 2;
194+
this.bulletGraph().minorTickCount = 5;
195+
this.bulletGraph().minorTickEndExtent = 0.10;
196+
this.bulletGraph().minorTickStartExtent = 0.20;
197+
this.bulletGraph().tickStartExtent = 0.20;
198+
this.bulletGraph().tickEndExtent = 0.05;
199+
this.bulletGraph().tickStrokeThickness = 2;
201200

202201
// setting custom gauge ranges
203202
const range1 = new IgxLinearGraphRangeComponent();
@@ -207,32 +206,32 @@ export class <%=ClassName%> implements AfterViewInit {
207206
range2.startValue = 40;
208207
range2.endValue = 80;
209208

210-
this.bulletGraph.rangeBrushes = [ '#a4bd29', '#F86232' ];
211-
this.bulletGraph.rangeOutlines = [ '#a4bd29', '#F86232' ];
212-
this.bulletGraph.ranges.clear();
213-
this.bulletGraph.ranges.add(range1);
214-
this.bulletGraph.ranges.add(range2);
209+
this.bulletGraph().rangeBrushes = [ '#a4bd29', '#F86232' ];
210+
this.bulletGraph().rangeOutlines = [ '#a4bd29', '#F86232' ];
211+
this.bulletGraph().ranges.clear();
212+
this.bulletGraph().ranges.add(range1);
213+
this.bulletGraph().ranges.add(range2);
215214

216215
// setting extent of all gauge ranges
217-
for (let i = 0; i < this.bulletGraph.ranges.count; i++) {
218-
const range = this.bulletGraph.ranges.item(i);
216+
for (let i = 0; i < this.bulletGraph().ranges.count; i++) {
217+
const range = this.bulletGraph().ranges.item(i);
219218
range.innerStartExtent = 0.2;
220219
range.innerEndExtent = 0.2;
221220
range.outerStartExtent = 0.95;
222221
range.outerEndExtent = 0.95;
223222
}
224223

225224
// setting extent of gauge scale
226-
this.bulletGraph.scaleBackgroundThickness = 0.5;
227-
this.bulletGraph.scaleBackgroundBrush = '#dbdbdb';
228-
this.bulletGraph.scaleBackgroundOutline = 'gray';
229-
this.bulletGraph.scaleStartExtent = 0.05;
230-
this.bulletGraph.scaleEndExtent = 0.95;
231-
this.bulletGraph.scaleBackgroundThickness = 0;
225+
this.bulletGraph().scaleBackgroundThickness = 0.5;
226+
this.bulletGraph().scaleBackgroundBrush = '#dbdbdb';
227+
this.bulletGraph().scaleBackgroundOutline = 'gray';
228+
this.bulletGraph().scaleStartExtent = 0.05;
229+
this.bulletGraph().scaleEndExtent = 0.95;
230+
this.bulletGraph().scaleBackgroundThickness = 0;
232231

233232
// setting appearance of backing fill and outline
234-
this.bulletGraph.backingBrush = '#f7f7f7';
235-
this.bulletGraph.backingOutline = '#d1d1d1';
236-
this.bulletGraph.backingStrokeThickness = 0;
233+
this.bulletGraph().backingBrush = '#f7f7f7';
234+
this.bulletGraph().backingOutline = '#d1d1d1';
235+
this.bulletGraph().backingStrokeThickness = 0;
237236
}
238237
}

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import { ChangeDetectorRef, Component, ViewChild } from '@angular/core';
1+
import { ChangeDetectorRef, Component, inject, viewChild } from '@angular/core';
22
import {
33
CloseScrollStrategy,
44
ConnectedPositioningStrategy,
@@ -73,11 +73,9 @@ export class <%=ClassName%> {
7373

7474
public chipList: NamedEntry[] = [];
7575

76-
@ViewChild('chipsArea', { static: true, read: IgxChipsAreaComponent })
77-
public chipsArea!: IgxChipsAreaComponent;
76+
public chipsArea = viewChild.required('chipsArea', { read: IgxChipsAreaComponent });
7877

79-
@ViewChild(IgxDropDownComponent, { static: true })
80-
public igxDropDown!: IgxDropDownComponent;
78+
public igxDropDown = viewChild.required(IgxDropDownComponent);
8179

8280
private positionSettings = {
8381
horizontalStartPoint: HorizontalAlignment.Left,
@@ -91,7 +89,7 @@ export class <%=ClassName%> {
9189
scrollStrategy: new CloseScrollStrategy()
9290
};
9391

94-
constructor(public cdr: ChangeDetectorRef) { }
92+
public cdr = inject(ChangeDetectorRef);
9593

9694
public chipRemoved(event: IBaseChipEventArgs) {
9795
this.chipList = this.chipList.filter((item) => {
@@ -102,7 +100,7 @@ export class <%=ClassName%> {
102100

103101
public toggleDropDown(ev: MouseEvent) {
104102
this.overlaySettings.target = ev.target as HTMLButtonElement;
105-
this.igxDropDown.toggle(this.overlaySettings);
103+
this.igxDropDown().toggle(this.overlaySettings);
106104
}
107105

108106
public itemSelection(ev: ISelectionEventArgs) {

0 commit comments

Comments
 (0)