Skip to content

Commit a038a03

Browse files
damyanpetevskrustevMayaKirovagedinakova
authored
refactor(*): switch to control flow blocks (#14864)
Co-authored-by: skrustev <[email protected]> Co-authored-by: Maya <[email protected]> Co-authored-by: Galina Edinakova <[email protected]>
1 parent bde2094 commit a038a03

File tree

386 files changed

+6562
-5182
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

386 files changed

+6562
-5182
lines changed

‎projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.html‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
1-
<ng-template *ngFor="let templateFunc of templateFunctions" let-context="context">
2-
<div #container style="display: contents;"></div>
3-
{{ litRender(container, templateFunc, context) }}
4-
</ng-template>
1+
@for (templateFunc of templateFunctions; track templateFunc) {
2+
<ng-template let-context="context">
3+
<div #container style="display: contents;"></div>
4+
{{ litRender(container, templateFunc, context) }}
5+
</ng-template>
6+
}

‎projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { NgFor } from '@angular/common';
21
import { ChangeDetectorRef, Component, QueryList, TemplateRef, ViewChildren } from '@angular/core';
32
import { TemplateRefWrapper } from './template-ref-wrapper';
43

@@ -10,15 +9,16 @@ type TemplateFunction = (arg: any) => TemplateResult;
109
selector: 'igx-template-wrapper',
1110
templateUrl: './wrapper.component.html',
1211
styleUrls: ['./wrapper.component.scss'],
13-
imports: [NgFor]
12+
imports: []
1413
})
1514
export class TemplateWrapperComponent {
1615

1716
public templateFunctions: TemplateFunction[] = [];
1817

1918
/**
2019
* All template refs
21-
* Warning: the first is always the root `ngFor` template. TODO(D.P.): filter it out?
20+
* Warning: the first is always the root `@for` template
21+
* (internally creates one like the old `<ng-template ngFor` would). TODO(D.P.): filter it out?
2222
*/
2323
@ViewChildren(TemplateRef)
2424
public templateRefs: QueryList<TemplateRef<any>>;

‎projects/igniteui-angular/src/lib/accordion/accordion.component.spec.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import { useAnimation } from '@angular/animations';
2-
import { NgIf } from '@angular/common';
32
import { Component, ViewChild } from '@angular/core';
43
import { waitForAsync, TestBed, fakeAsync, ComponentFixture, tick } from '@angular/core/testing';
54
import { By } from '@angular/platform-browser';
@@ -401,10 +400,12 @@ describe('Rendering Tests', () => {
401400
</div>
402401
</igx-expansion-panel-body>
403402
</igx-expansion-panel>
404-
<div *ngIf="divChild"></div>
403+
@if (divChild) {
404+
<div></div>
405+
}
405406
</igx-accordion>
406407
`,
407-
imports: [IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelBodyComponent, IgxExpansionPanelTitleDirective, NgIf]
408+
imports: [IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelBodyComponent, IgxExpansionPanelTitleDirective]
408409
})
409410
export class IgxAccordionSampleTestComponent {
410411
@ViewChild(IgxAccordionComponent) public accordion: IgxAccordionComponent;

‎projects/igniteui-angular/src/lib/action-strip/action-strip.component.html‎

Lines changed: 16 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="igx-action-strip__actions">
22
<ng-content #content></ng-content>
3-
<ng-container *ngIf="menuItems.length > 0">
3+
@if (menuItems.length > 0) {
44
<button
55
type="button"
66
igxIconButton="flat"
@@ -13,20 +13,21 @@
1313
>
1414
<igx-icon family="default" name="more_vert"></igx-icon>
1515
</button>
16-
</ng-container>
16+
}
1717
<igx-drop-down #dropdown>
18-
<igx-drop-down-item
19-
*ngFor="let item of menuItems"
20-
class="igx-action-strip__menu-item"
21-
>
22-
<div class="igx-drop-down__item-template">
23-
<ng-container
24-
*ngTemplateOutlet="
25-
item.templateRef;
26-
context: { $implicit: item }
27-
"
28-
></ng-container>
29-
</div>
30-
</igx-drop-down-item>
18+
@for (item of menuItems; track trackMenuItem(item)) {
19+
<igx-drop-down-item
20+
class="igx-action-strip__menu-item"
21+
>
22+
<div class="igx-drop-down__item-template">
23+
<ng-container
24+
*ngTemplateOutlet="
25+
item.templateRef;
26+
context: { $implicit: item }
27+
"
28+
></ng-container>
29+
</div>
30+
</igx-drop-down-item>
31+
}
3132
</igx-drop-down>
3233
</div>

‎projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,11 @@ import { IgxIconComponent } from '../icon/icon.component';
2424
import { IgxDropDownItemNavigationDirective } from '../drop-down/drop-down-navigation.directive';
2525
import { IgxToggleActionDirective } from '../directives/toggle/toggle.directive';
2626
import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
27-
import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
27+
import { NgTemplateOutlet } from '@angular/common';
2828
import { getCurrentResourceStrings } from '../core/i18n/resources';
2929
import { IgxIconButtonDirective } from '../directives/button/icon-button.directive';
3030
import { IgxActionStripToken } from './token';
31+
import { trackByIdentity } from '../core/utils';
3132

3233
@Directive({
3334
selector: '[igxActionStripMenuItem]',
@@ -73,8 +74,6 @@ export class IgxActionStripMenuItemDirective {
7374
selector: 'igx-action-strip',
7475
templateUrl: 'action-strip.component.html',
7576
imports: [
76-
NgIf,
77-
NgFor,
7877
NgTemplateOutlet,
7978
IgxIconButtonDirective,
8079
IgxRippleDirective,
@@ -314,6 +313,9 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterConten
314313
}
315314
}
316315

316+
/** pin swapping w/ unpin resets the menuItems collection */
317+
protected trackMenuItem = trackByIdentity;
318+
317319
/**
318320
* Close the menu if opened
319321
*

‎projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.html‎

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,24 @@
1-
<ng-container *ngIf="!asMenuItem">
1+
@if (!asMenuItem) {
22
<button type="button" [title]="labelText" igxIconButton="flat" igxRipple (click)="handleClick($event)" (mousedown)="preventEvent($event)">
3-
<igx-icon *ngIf="iconSet" [family]="iconSet" [name]="iconName">{{iconName}}</igx-icon>
4-
<igx-icon *ngIf="!iconSet" >{{iconName}}</igx-icon>
3+
@if (iconSet) {
4+
<igx-icon [family]="iconSet" [name]="iconName">{{iconName}}</igx-icon>
5+
}
6+
@if (!iconSet) {
7+
<igx-icon>{{iconName}}</igx-icon>
8+
}
59
</button>
6-
</ng-container>
10+
}
711

812
<ng-template #menuItemTemplate>
9-
<ng-container *ngIf="asMenuItem">
13+
@if (asMenuItem) {
1014
<div #container [className]="containerClass">
11-
<igx-icon *ngIf="iconSet" [family]="iconSet" [name]="iconName">{{iconName}}</igx-icon>
12-
<igx-icon *ngIf="!iconSet" >{{iconName}}</igx-icon>
15+
@if (iconSet) {
16+
<igx-icon [family]="iconSet" [name]="iconName">{{iconName}}</igx-icon>
17+
}
18+
@if (!iconSet) {
19+
<igx-icon>{{iconName}}</igx-icon>
20+
}
1321
<label igxLabel>{{labelText}}</label>
1422
</div>
15-
</ng-container>
23+
}
1624
</ng-template>

‎projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Component, Input, TemplateRef, ViewChild, Output, EventEmitter, ElementRef, booleanAttribute } from '@angular/core';
22
import { IgxIconComponent } from '../../icon/icon.component';
33
import { IgxRippleDirective } from '../../directives/ripple/ripple.directive';
4-
import { NgIf } from '@angular/common';
54
import { IgxIconButtonDirective } from '../../directives/button/icon-button.directive';
65

76
/* blazorElement */
@@ -10,7 +9,7 @@ import { IgxIconButtonDirective } from '../../directives/button/icon-button.dire
109
@Component({
1110
selector: 'igx-grid-action-button',
1211
templateUrl: 'grid-action-button.component.html',
13-
imports: [NgIf, IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective]
12+
imports: [IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective]
1413
})
1514
export class IgxGridActionButtonComponent {
1615

‎projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.html‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11

2-
<ng-container *ngIf="isRowContext">
3-
<igx-grid-action-button *ngIf="!disabled && editRow" [asMenuItem]="asMenuItems" iconName="edit" [labelText]="grid.resourceStrings.igx_grid_actions_edit_label" (actionClick)="startEdit($event)"></igx-grid-action-button>
4-
<igx-grid-action-button *ngIf="addRow && isRootRow" [asMenuItem]="asMenuItems" iconName="add_row" iconSet="default" [labelText]="grid.resourceStrings.igx_grid_actions_add_label" (actionClick)="addRowHandler($event)"></igx-grid-action-button>
5-
<igx-grid-action-button *ngIf="addChild && hasChildren" [asMenuItem]="asMenuItems" iconName="add_child" iconSet="default" [labelText]="grid.resourceStrings.igx_grid_actions_add_child_label" (actionClick)="addRowHandler($event, true)"></igx-grid-action-button>
6-
<igx-grid-action-button *ngIf="!disabled && deleteRow" class="igx-action-strip__delete" classNames='igx-action-strip__menu-item--danger' [asMenuItem]="asMenuItems" iconName="delete" [labelText]="grid.resourceStrings.igx_grid_actions_delete_label" (actionClick)="deleteRowHandler($event)"></igx-grid-action-button>
7-
</ng-container>
2+
@if (isRowContext) {
3+
@if (!disabled && editRow) {
4+
<igx-grid-action-button [asMenuItem]="asMenuItems" iconName="edit" [labelText]="grid.resourceStrings.igx_grid_actions_edit_label" (actionClick)="startEdit($event)"></igx-grid-action-button>
5+
}
6+
@if (addRow && isRootRow) {
7+
<igx-grid-action-button [asMenuItem]="asMenuItems" iconName="add_row" iconSet="default" [labelText]="grid.resourceStrings.igx_grid_actions_add_label" (actionClick)="addRowHandler($event)"></igx-grid-action-button>
8+
}
9+
@if (addChild && hasChildren) {
10+
<igx-grid-action-button [asMenuItem]="asMenuItems" iconName="add_child" iconSet="default" [labelText]="grid.resourceStrings.igx_grid_actions_add_child_label" (actionClick)="addRowHandler($event, true)"></igx-grid-action-button>
11+
}
12+
@if (!disabled && deleteRow) {
13+
<igx-grid-action-button class="igx-action-strip__delete" classNames='igx-action-strip__menu-item--danger' [asMenuItem]="asMenuItems" iconName="delete" [labelText]="grid.resourceStrings.igx_grid_actions_delete_label" (actionClick)="deleteRowHandler($event)"></igx-grid-action-button>
14+
}
15+
}
816

‎projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts‎

Lines changed: 30 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import { Component, ViewChild, OnInit } from '@angular/core';
22
import { TestBed, waitForAsync } from '@angular/core/testing';
33
import { By } from '@angular/platform-browser';
4-
import { NgFor } from '@angular/common';
54
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
65

76
import { configureTestSuite } from '../../test-utils/configure-suite';
@@ -391,16 +390,18 @@ describe('igxGridEditingActions #grid ', () => {
391390
template: `
392391
<igx-grid #grid [data]="data" [width]="'800px'" [height]="'500px'"
393392
[rowEditable]="true" [primaryKey]="'ID'">
394-
<igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
395-
[width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
396-
</igx-column>
393+
@for (c of columns; track c) {
394+
<igx-column [sortable]="true" [field]="c.field" [header]="c.field"
395+
[width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
396+
</igx-column>
397+
}
397398
398399
<igx-action-strip #actionStrip>
399400
<igx-grid-editing-actions></igx-grid-editing-actions>
400401
</igx-action-strip>
401402
</igx-grid>
402403
`,
403-
imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridEditingActionsComponent, NgFor]
404+
imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridEditingActionsComponent]
404405
})
405406
class IgxActionStripTestingComponent implements OnInit {
406407
@ViewChild('actionStrip', { read: IgxActionStripComponent, static: true })
@@ -468,9 +469,11 @@ class IgxActionStripTestingComponent implements OnInit {
468469
template: `
469470
<igx-grid #grid [data]="data" [width]="'800px'" [height]="'500px'"
470471
[rowEditable]="true" [primaryKey]="'ID'">
471-
<igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
472-
[width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
473-
</igx-column>
472+
@for (c of columns; track c) {
473+
<igx-column [sortable]="true" [field]="c.field" [header]="c.field"
474+
[width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
475+
</igx-column>
476+
}
474477
475478
<igx-action-strip #actionStrip>
476479
<igx-grid-pinning-actions></igx-grid-pinning-actions>
@@ -479,7 +482,7 @@ class IgxActionStripTestingComponent implements OnInit {
479482
</igx-grid>
480483
`,
481484
selector: 'igx-action-strip-pin-edit-component',
482-
imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent, NgFor]
485+
imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent]
483486
})
484487
class IgxActionStripPinEditComponent extends IgxActionStripTestingComponent {
485488
}
@@ -488,17 +491,19 @@ class IgxActionStripPinEditComponent extends IgxActionStripTestingComponent {
488491
template: `
489492
<igx-grid #grid [data]="data" [width]="'800px'" [height]="'500px'"
490493
[rowEditable]="true" [primaryKey]="'ID'">
491-
<igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
492-
[width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
493-
</igx-column>
494+
@for (c of columns; track c) {
495+
<igx-column [sortable]="true" [field]="c.field" [header]="c.field"
496+
[width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
497+
</igx-column>
498+
}
494499
495500
<igx-action-strip #actionStrip>
496501
<igx-grid-editing-actions [asMenuItems]='true'></igx-grid-editing-actions>
497502
</igx-action-strip>
498503
</igx-grid>
499504
`,
500505
selector: 'igx-action-strip-edit-menu-component',
501-
imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridEditingActionsComponent, NgFor]
506+
imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridEditingActionsComponent]
502507
})
503508
class IgxActionStripEditMenuComponent extends IgxActionStripTestingComponent {
504509
}
@@ -507,9 +512,11 @@ class IgxActionStripEditMenuComponent extends IgxActionStripTestingComponent {
507512
template: `
508513
<igx-grid #grid [data]="dataOneRow" [width]="'800px'" [height]="'500px'"
509514
[rowEditable]="true" [primaryKey]="'ID'">
510-
<igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
511-
[width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
512-
</igx-column>
515+
@for (c of columns; track c) {
516+
<igx-column [sortable]="true" [field]="c.field" [header]="c.field"
517+
[width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
518+
</igx-column>
519+
}
513520
514521
<igx-action-strip #actionStrip>
515522
<igx-grid-pinning-actions></igx-grid-pinning-actions>
@@ -518,7 +525,7 @@ class IgxActionStripEditMenuComponent extends IgxActionStripTestingComponent {
518525
</igx-grid>
519526
`,
520527
selector: 'igx-action-strip-one-row-component',
521-
imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, NgFor]
528+
imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent]
522529
})
523530
class IgxActionStripOneRowComponent extends IgxActionStripTestingComponent {
524531
}
@@ -527,17 +534,19 @@ class IgxActionStripOneRowComponent extends IgxActionStripTestingComponent {
527534
template: `
528535
<igx-grid #grid [data]="dataOneRow" [width]="'800px'" [height]="'500px'"
529536
[rowEditable]="true" [primaryKey]="'ID'">
530-
<igx-column *ngFor="let c of columns" [sortable]="true" [field]="c.field" [header]="c.field"
531-
[width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
532-
</igx-column>
537+
@for (c of columns; track c) {
538+
<igx-column [sortable]="true" [field]="c.field" [header]="c.field"
539+
[width]="c.width" [pinned]='c.pinned' [hidden]='c.hidden'>
540+
</igx-column>
541+
}
533542
534543
<igx-action-strip #actionStrip>
535544
<igx-grid-editing-actions [asMenuItems]='true'></igx-grid-editing-actions>
536545
</igx-action-strip>
537546
</igx-grid>
538547
`,
539548
selector: 'igx-action-strip-menu-one-row-component',
540-
imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridEditingActionsComponent, NgFor]
549+
imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridEditingActionsComponent]
541550
})
542551
class IgxActionStripMenuOneRowComponent extends IgxActionStripTestingComponent {
543552
}

‎projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { IgxGridActionsBaseDirective } from './grid-actions-base.directive';
33
import { showMessage } from '../../core/utils';
44
import { addRow, addChild } from '@igniteui/material-icons-extended';
55
import { IgxGridActionButtonComponent } from './grid-action-button.component';
6-
import { NgIf } from '@angular/common';
76

87

98
/* blazorElement */
@@ -19,7 +18,7 @@ import { NgIf } from '@angular/common';
1918
selector: 'igx-grid-editing-actions',
2019
templateUrl: 'grid-editing-actions.component.html',
2120
providers: [{ provide: IgxGridActionsBaseDirective, useExisting: IgxGridEditingActionsComponent }],
22-
imports: [NgIf, IgxGridActionButtonComponent]
21+
imports: [IgxGridActionButtonComponent]
2322
})
2423

2524
export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective {

0 commit comments

Comments
 (0)