Skip to content

Commit b5205ce

Browse files
Copilotdamyanpetev
Copilot
and
damyanpetev
authored
Migrate custom and project igx-ts templates to Angular built-in control flow
Migrated awesome-grid, crm-grid, fintech-grid, fintech-tree-grid, login, weather-forecast, side-nav, and side-nav-auth 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>
1 parent 186d2b6 commit b5205ce

22 files changed

Lines changed: 130 additions & 67 deletions

File tree

‎packages/igx-templates/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.html‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -20,17 +20,25 @@ <h5 class="switch-sample__title">Boston Marathon 2020</h5>
2020
<ng-template igxCell let-cell="cell">
2121
<div class="cell__inner">
2222
<div>{{ paginator.page * paginator.perPage + cell.row.index + 1 }}</div>
23-
<ng-container *ngIf="isTop3(cell)">
24-
<span class="cup" *ngIf="cell.row.index === 0">
23+
@if (isTop3(cell)) {
24+
<ng-container>
25+
@if (cell.row.index === 0) {
26+
<span class="cup">
2527
<img src="assets/images/trophy_gold.svg" alt="First place Trophy image" />
2628
</span>
27-
<span class="cup" *ngIf="cell.row.index === 1">
29+
}
30+
@if (cell.row.index === 1) {
31+
<span class="cup">
2832
<img src="assets/images/trophy_silver.svg" alt="Second place Trophy image" />
2933
</span>
30-
<span class="cup" *ngIf="cell.row.index === 2">
34+
}
35+
@if (cell.row.index === 2) {
36+
<span class="cup">
3137
<img src="assets/images/trophy_bronze.svg" alt="Third place Trophy image" />
3238
</span>
39+
}
3340
</ng-container>
41+
}
3442
</div>
3543
</ng-template>
3644
</igx-column>
@@ -40,7 +48,9 @@ <h5 class="switch-sample__title">Boston Marathon 2020</h5>
4048
<div class="cell__inner">
4149
<igx-avatar [src]="cell.row.data.Avatar" [shape]="'square'" size="small"> </igx-avatar><span
4250
class="athlete_name">{{ cell.value }}</span>
43-
<igx-badge *ngIf="live" [type]="getBadgeType(cell)" [icon]="getIconType(cell)"></igx-badge>
51+
@if (live) {
52+
<igx-badge [type]="getBadgeType(cell)" [icon]="getIconType(cell)"></igx-badge>
53+
}
4454
</div>
4555

4656
</ng-template>
@@ -116,7 +126,8 @@ <h5 class="switch-sample__title">Boston Marathon 2020</h5>
116126
<span>Finish</span>
117127
</div>
118128
<div class="s-overlay__players">
119-
<ng-container *ngFor="let player of top3; let i = index">
129+
@for (player of top3; track $index; let i = $index) {
130+
<ng-container>
120131
<div class="s-overlay__player"
121132
[ngClass]="i === 0 ? 's-overlay__player--winner' : i === 1 ? 's-overlay__player--second' : 's-overlay__player--third'">
122133
<div class="s-overlay__trophy">
@@ -127,6 +138,7 @@ <h5 class="switch-sample__title">Boston Marathon 2020</h5>
127138
<p class="s-overlay__player-name">{{ player.Name }}</p>
128139
</div>
129140
</ng-container>
141+
}
130142
</div>
131143
</div>
132144
</div>

‎packages/igx-templates/igx-ts/custom-templates/awesome-grid/files/src/app/__path__/__filePrefix__.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@ import {
3232
IgxSparklineCoreModule,
3333
} from 'igniteui-angular-charts';
3434
import { Athlete, AthletesData, SpeedEntry } from './services/data';
35-
import { NgIf, NgClass, NgFor, DecimalPipe } from '@angular/common';
35+
import { NgClass, DecimalPipe } from '@angular/common';
3636
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
3737

3838
@Component({
@@ -49,13 +49,11 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
4949
IgxPaginatorComponent,
5050
IgxColumnComponent,
5151
IgxCellTemplateDirective,
52-
NgIf,
5352
IgxAvatarComponent,
5453
IgxBadgeComponent,
5554
IgxSparklineCoreModule,
5655
IgxCircularProgressBarComponent,
5756
NgClass,
58-
NgFor,
5957
DecimalPipe,
6058
],
6159
})

‎packages/igx-templates/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.html‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -13,23 +13,34 @@
1313
<div class="sample-flex-container">
1414
<igx-input-group type="search" class="searchInputGroup">
1515
<igx-prefix>
16-
<igx-icon class="prefixIcon" *ngIf="searchText.length === 0">search</igx-icon>
17-
<igx-icon class="prefixIcon" *ngIf="searchText.length > 0" (click)="clearSearch()">clear</igx-icon>
16+
@if (searchText.length === 0) {
17+
<igx-icon class="prefixIcon">search</igx-icon>
18+
}
19+
@if (searchText.length > 0) {
20+
<igx-icon class="prefixIcon" (click)="clearSearch()">clear</igx-icon>
21+
}
1822
</igx-prefix>
1923

2024
<input #search1 id="search1" class="searchInput" igxInput placeholder="Search" [(ngModel)]="searchText"
2125
(ngModelChange)="grid1.findNext(searchText, caseSensitive)" (keydown)="searchKeyDown($event)" />
2226

23-
<igx-suffix *ngIf="searchText.length > 0">
24-
<div class="resultsText" *ngIf="grid1.lastSearchInfo">
25-
<span *ngIf="grid1.lastSearchInfo.matchInfoCache.length > 0">
27+
@if (searchText.length > 0) {
28+
<igx-suffix>
29+
@if (grid1.lastSearchInfo) {
30+
<div class="resultsText">
31+
@if (grid1.lastSearchInfo.matchInfoCache.length > 0) {
32+
<span>
2633
{{ grid1.lastSearchInfo.activeMatchIndex + 1 }} of {{
2734
grid1.lastSearchInfo.matchInfoCache.length }} results
2835
</span>
29-
<span *ngIf="grid1.lastSearchInfo.matchInfoCache.length === 0">
36+
}
37+
@if (grid1.lastSearchInfo.matchInfoCache.length === 0) {
38+
<span>
3039
No results
3140
</span>
41+
}
3242
</div>
43+
}
3344
<div class="caseSensitiveButton">
3445
<button igxButton="icon" igxRipple [igxRippleCentered]="true" (click)="updateSearch()"
3546
igxButtonBackground="caseSensitive? 'rgb(73, 180, 254)' : 'transparent'">
@@ -47,6 +58,7 @@
4758
</button>
4859
</div>
4960
</igx-suffix>
61+
}
5062
</igx-input-group>
5163
</div>
5264
</div>

‎packages/igx-templates/igx-ts/custom-templates/crm-grid/files/src/app/__path__/__filePrefix__.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,6 @@ import {
4545
import { SparklineDisplayType, IgxSparklineCoreModule } from 'igniteui-angular-charts';
4646
import { DATA, DealsDescriptor, Employee } from './data';
4747
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
48-
import { NgIf } from '@angular/common';
4948

5049
@Component({
5150
selector: 'app-<%=filePrefix%>',
@@ -57,7 +56,6 @@ import { NgIf } from '@angular/common';
5756
IgxGridToolbarTitleComponent,
5857
IgxInputGroupComponent,
5958
IgxPrefixDirective,
60-
NgIf,
6159
IgxIconComponent,
6260
ReactiveFormsModule,
6361
IgxInputDirective,

‎packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.html‎

Lines changed: 21 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -30,23 +30,28 @@
3030
</div>
3131
</div>
3232
<div class="sample-toolbar">
33-
<span *ngIf="buttonSelected === 1">Feeding {{volume}} records every {{frequency / 1000}} sec.
33+
@if (buttonSelected === 1) {
34+
<span>Feeding {{volume}} records every {{frequency / 1000}} sec.
3435
{{volume}} records updated. </span>
35-
<span *ngIf="buttonSelected === 0">Feeding {{volume}} records every {{frequency / 1000}} sec.
36+
}
37+
@if (buttonSelected === 0) {
38+
<span>Feeding {{volume}} records every {{frequency / 1000}} sec.
3639
~{{volume/5}} records updated.</span>
40+
}
3741
</div>
3842
<igx-grid #grid1 igxPreventDocumentScroll (rowSelectionChanging)="rowSelectionChanging($event)" [data]="data"
3943
width="100%" height="90%" [autoGenerate]="false" displayDensity="compact" primaryKey="ID" hiddenColumnsText="Hidden"
4044
[rowSelection]="selectionMode" [allowFiltering]="true" filterMode="excelStyleFilter"
4145
(keydown)="gridKeydown($event)" (gridKeydown)="customKeydown($event)" [moving]="true">
42-
<igx-grid-toolbar *ngIf="showToolbar">
46+
@if (showToolbar) {
47+
<igx-grid-toolbar>
4348
<igx-grid-toolbar-actions>
4449
<igx-grid-toolbar-hiding title="Indicators"></igx-grid-toolbar-hiding>
4550
<igx-grid-toolbar-pinning title=" "></igx-grid-toolbar-pinning>
4651
<igx-grid-toolbar-exporter [exportCSV]="false"></igx-grid-toolbar-exporter>
4752
</igx-grid-toolbar-actions>
4853
</igx-grid-toolbar>
49-
54+
}
5055

5156
<!-- Empty templates for Sorting,Moving,Hiding, Pinning actions inside ESF dialog -->
5257
<!-- <ng-template igxExcelStyleSorting></ng-template>
@@ -61,7 +66,9 @@
6166
<igx-column field="Contract" width="110px" [groupable]="true" [sortable]="true" [editable]="true">
6267
<ng-template igxCellEditor let-cell="cell" let-value>
6368
<igx-select [placeholder]="value" [(ngModel)]="cell.editValue" [igxFocus]="true">
64-
<igx-select-item *ngFor="let c of contracts" [value]="c">{{ c }}</igx-select-item>
69+
@for (c of contracts; track c) {
70+
<igx-select-item [value]="c">{{ c }}</igx-select-item>
71+
}
6572
</igx-select>
6673
</ng-template>
6774
</igx-column>
@@ -71,7 +78,9 @@
7178
<igx-column field="Region" width="110px" [groupable]="true" [sortable]="true" [editable]="true">
7279
<ng-template igxCellEditor let-cell="cell" let-value>
7380
<igx-select [placeholder]="value" [(ngModel)]="cell.editValue" [igxFocus]="true">
74-
<igx-select-item *ngFor="let r of regions" [value]="r.Region">{{ r.Region }}</igx-select-item>
81+
@for (r of regions; track r) {
82+
<igx-select-item [value]="r.Region">{{ r.Region }}</igx-select-item>
83+
}
7584
</igx-select>
7685
</ng-template>
7786
</igx-column>
@@ -84,8 +93,12 @@
8493
<ng-template igxCell let-cell="cell">
8594
<div class="fintech-icons">
8695
<span>{{cell.value | currency:'USD':'symbol':'1.4-4'}}</span>
87-
<igx-icon *ngIf="trends.positive(cell.row.data)">trending_up</igx-icon>
88-
<igx-icon *ngIf="trends.negative(cell.row.data)">trending_down</igx-icon>
96+
@if (trends.positive(cell.row.data)) {
97+
<igx-icon>trending_up</igx-icon>
98+
}
99+
@if (trends.negative(cell.row.data)) {
100+
<igx-icon>trending_down</igx-icon>
101+
}
89102
</div>
90103
</ng-template>
91104
</igx-column>

‎packages/igx-templates/igx-ts/custom-templates/fintech-grid/files/src/app/__path__/__filePrefix__.ts‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ import { timer } from 'rxjs';
4646
import { debounce } from 'rxjs/operators';
4747
import { LocalData } from './local-data';
4848
import { Contract, REGIONS } from './data/financialData';
49-
import { NgIf, NgFor, CurrencyPipe } from '@angular/common';
49+
import { CurrencyPipe } from '@angular/common';
5050
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
5151

5252
@Component({
@@ -60,7 +60,6 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
6060
FormsModule,
6161
IgxSliderComponent,
6262
IgxButtonGroupComponent,
63-
NgIf,
6463
IgxGridComponent,
6564
IgxGridToolbarComponent,
6665
IgxGridToolbarActionsComponent,
@@ -71,7 +70,6 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
7170
IgxCellEditorTemplateDirective,
7271
IgxSelectComponent,
7372
IgxFocusDirective,
74-
NgFor,
7573
IgxSelectItemComponent,
7674
IgxCellTemplateDirective,
7775
IgxIconComponent,

‎packages/igx-templates/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.html‎

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,22 +21,28 @@
2121
</div>
2222
</div>
2323
<div class="sample-toolbar">
24-
<span *ngIf="buttonSelected === 1">Feeding {{volume}} records every {{frequency / 1000}} sec.
24+
@if (buttonSelected === 1) {
25+
<span>Feeding {{volume}} records every {{frequency / 1000}} sec.
2526
{{volume}} records updated. </span>
26-
<span *ngIf="buttonSelected === 0">Feeding {{volume}} records every {{frequency / 1000}} sec.
27+
}
28+
@if (buttonSelected === 0) {
29+
<span>Feeding {{volume}} records every {{frequency / 1000}} sec.
2730
~{{volume/5}} records updated.</span>
31+
}
2832
</div>
2933
<igx-tree-grid #grid1 igxPreventDocumentScroll
3034
[data]="data | treeGridGrouping:groupColumns:aggregations:groupColumnKey:primaryKey:childDataKey"
3135
height="90%" width="100%" [autoGenerate]="false" displayDensity="compact"
3236
[primaryKey]="primaryKey" [childDataKey]="childDataKey" hiddenColumnsText="Hidden"
3337
[rowSelection]="selectionMode" [allowFiltering]="true" filterMode="excelStyleFilter" [moving]="true">
34-
<igx-grid-toolbar *ngIf="showToolbar">
38+
@if (showToolbar) {
39+
<igx-grid-toolbar>
3540
<igx-grid-toolbar-actions>
3641
<igx-grid-toolbar-hiding title="Indicators"></igx-grid-toolbar-hiding>
3742
<igx-grid-toolbar-exporter [exportCSV]="false"></igx-grid-toolbar-exporter>
3843
</igx-grid-toolbar-actions>
3944
</igx-grid-toolbar>
45+
}
4046

4147
<!-- Empty templates for Sorting,Moving,Hiding, Pinning actions inside ESF dialog -->
4248
<!-- <ng-template igxExcelStyleSorting></ng-template>
@@ -53,8 +59,12 @@
5359
<ng-template igxCell let-cell="cell">
5460
<div class="finjs-icons">
5561
<span>{{cell.value | currency:'USD':'symbol':'1.4-4'}}</span>
56-
<igx-icon *ngIf="trends.positive(cell.row.data)">trending_up</igx-icon>
57-
<igx-icon *ngIf="trends.negative(cell.row.data)">trending_down</igx-icon>
62+
@if (trends.positive(cell.row.data)) {
63+
<igx-icon>trending_up</igx-icon>
64+
}
65+
@if (trends.negative(cell.row.data)) {
66+
<igx-icon>trending_down</igx-icon>
67+
}
5868
</div>
5969
</ng-template>
6070
</igx-column>

‎packages/igx-templates/igx-ts/custom-templates/fintech-tree-grid/files/src/app/__path__/__filePrefix__.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ import { timer } from 'rxjs';
3535
import { debounce } from 'rxjs/operators';
3636
import { LocalData } from './local-data';
3737
import { ITreeGridAggregation, <%=ClassName%>TreeGridGroupingPipe } from './tree-grid-grouping.pipe';
38-
import { NgIf, CurrencyPipe } from '@angular/common';
38+
import { CurrencyPipe } from '@angular/common';
3939
import { ReactiveFormsModule, FormsModule } from '@angular/forms';
4040

4141
@Component({
@@ -49,7 +49,6 @@ import { ReactiveFormsModule, FormsModule } from '@angular/forms';
4949
FormsModule,
5050
IgxSliderComponent,
5151
IgxButtonGroupComponent,
52-
NgIf,
5352
IgxTreeGridComponent,
5453
IgxGridToolbarComponent,
5554
IgxGridToolbarActionsComponent,

‎packages/igx-templates/igx-ts/custom-templates/login/files/src/app/__path__/__filePrefix__.html‎

Lines changed: 12 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
1-
<form *ngIf="showLogin" class="input-group-form" [formGroup]="loginForm" (ngSubmit)="tryLogin()">
1+
@if (showLogin) {
2+
<form class="input-group-form" [formGroup]="loginForm" (ngSubmit)="tryLogin()">
23
<h3>Welcome Back</h3>
34
<igx-input-group>
45
<igx-prefix>
@@ -17,10 +18,14 @@ <h3>Welcome Back</h3>
1718
<button igxButton="raised" type="submit" igxRipple [disabled]="!loginForm.valid">LOG IN</button>
1819
<a (click)="showRegistrationForm()">Register</a>
1920
</form>
21+
}
2022

21-
<div *ngIf="showSuccessLogin">You've successfully logged in</div>
23+
@if (showSuccessLogin) {
24+
<div>You've successfully logged in</div>
25+
}
2226

23-
<form *ngIf="showRegister" class="input-group-form" [formGroup]="registrationForm" (ngSubmit)="tryRegister()">
27+
@if (showRegister) {
28+
<form class="input-group-form" [formGroup]="registrationForm" (ngSubmit)="tryRegister()">
2429
<h3>Create your account</h3>
2530
<igx-input-group>
2631
<label igxLabel for="firstName">First Name</label>
@@ -41,5 +46,8 @@ <h3>Create your account</h3>
4146
<button igxButton="raised" type="submit" igxRipple [disabled]="!registrationForm.valid">SIGN UP</button>
4247
<a (click)="showLoginForm()">Log in</a>
4348
</form>
49+
}
4450

45-
<div *ngIf="showSuccessRegister">You have successfully registered.</div>
51+
@if (showSuccessRegister) {
52+
<div>You have successfully registered.</div>
53+
}

‎packages/igx-templates/igx-ts/custom-templates/login/files/src/app/__path__/__filePrefix__.ts‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import {
55
Validators,
66
ReactiveFormsModule,
77
} from '@angular/forms';
8-
import { NgIf } from '@angular/common';
98
import {
109
IgxInputGroupComponent,
1110
IgxPrefixDirective,
@@ -29,7 +28,6 @@ import {
2928
IgxInputDirective,
3029
IgxButtonDirective,
3130
IgxRippleDirective,
32-
NgIf
3331
]
3432
})
3533
export class <%=ClassName%> {

0 commit comments

Comments
 (0)