diff --git a/projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.html b/projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.html index 4a018a09576..8a1718cf1d2 100644 --- a/projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.html +++ b/projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.html @@ -1,4 +1,6 @@ - -
- {{ litRender(container, templateFunc, context) }} - +@for (templateFunc of templateFunctions; track templateFunc) { + +
+ {{ litRender(container, templateFunc, context) }} + +} diff --git a/projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.ts b/projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.ts index 4faa7636907..35ba746cd94 100644 --- a/projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.ts +++ b/projects/igniteui-angular-elements/src/app/wrapper/wrapper.component.ts @@ -1,4 +1,3 @@ -import { NgFor } from '@angular/common'; import { ChangeDetectorRef, Component, QueryList, TemplateRef, ViewChildren } from '@angular/core'; import { TemplateRefWrapper } from './template-ref-wrapper'; @@ -10,7 +9,7 @@ type TemplateFunction = (arg: any) => TemplateResult; selector: 'igx-template-wrapper', templateUrl: './wrapper.component.html', styleUrls: ['./wrapper.component.scss'], - imports: [NgFor] + imports: [] }) export class TemplateWrapperComponent { @@ -18,7 +17,8 @@ export class TemplateWrapperComponent { /** * All template refs - * Warning: the first is always the root `ngFor` template. TODO(D.P.): filter it out? + * Warning: the first is always the root `@for` template + * (internally creates one like the old `>; diff --git a/projects/igniteui-angular/src/lib/accordion/accordion.component.spec.ts b/projects/igniteui-angular/src/lib/accordion/accordion.component.spec.ts index 9589affe459..0e3a5a85b6b 100644 --- a/projects/igniteui-angular/src/lib/accordion/accordion.component.spec.ts +++ b/projects/igniteui-angular/src/lib/accordion/accordion.component.spec.ts @@ -1,5 +1,4 @@ import { useAnimation } from '@angular/animations'; -import { NgIf } from '@angular/common'; import { Component, ViewChild } from '@angular/core'; import { waitForAsync, TestBed, fakeAsync, ComponentFixture, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; @@ -401,10 +400,12 @@ describe('Rendering Tests', () => { -
+ @if (divChild) { +
+ } `, - imports: [IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelBodyComponent, IgxExpansionPanelTitleDirective, NgIf] + imports: [IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelBodyComponent, IgxExpansionPanelTitleDirective] }) export class IgxAccordionSampleTestComponent { @ViewChild(IgxAccordionComponent) public accordion: IgxAccordionComponent; diff --git a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.html b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.html index 6369fb0bcb1..65566b3f7aa 100644 --- a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.html +++ b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.html @@ -1,6 +1,6 @@
- + @if (menuItems.length > 0) { - + } - -
- -
- + @for (item of menuItems; track trackMenuItem(item)) { + +
+ +
+ + }
diff --git a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts index d4a2a56f4eb..56bfdf2c6f4 100644 --- a/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts +++ b/projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts @@ -24,10 +24,11 @@ import { IgxIconComponent } from '../icon/icon.component'; import { IgxDropDownItemNavigationDirective } from '../drop-down/drop-down-navigation.directive'; import { IgxToggleActionDirective } from '../directives/toggle/toggle.directive'; import { IgxRippleDirective } from '../directives/ripple/ripple.directive'; -import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common'; +import { NgTemplateOutlet } from '@angular/common'; import { getCurrentResourceStrings } from '../core/i18n/resources'; import { IgxIconButtonDirective } from '../directives/button/icon-button.directive'; import { IgxActionStripToken } from './token'; +import { trackByIdentity } from '../core/utils'; @Directive({ selector: '[igxActionStripMenuItem]', @@ -73,8 +74,6 @@ export class IgxActionStripMenuItemDirective { selector: 'igx-action-strip', templateUrl: 'action-strip.component.html', imports: [ - NgIf, - NgFor, NgTemplateOutlet, IgxIconButtonDirective, IgxRippleDirective, @@ -314,6 +313,9 @@ export class IgxActionStripComponent implements IgxActionStripToken, AfterConten } } + /** pin swapping w/ unpin resets the menuItems collection */ + protected trackMenuItem = trackByIdentity; + /** * Close the menu if opened * diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.html b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.html index 6cd2a12345e..6eafb5e80b0 100644 --- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.html +++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.html @@ -1,16 +1,24 @@ - +@if (!asMenuItem) { - +} - + @if (asMenuItem) {
- {{iconName}} - {{iconName}} + @if (iconSet) { + {{iconName}} + } + @if (!iconSet) { + {{iconName}} + }
- + } diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.ts index 545b9065410..64771bd15f4 100644 --- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.ts +++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.ts @@ -1,7 +1,6 @@ import { Component, Input, TemplateRef, ViewChild, Output, EventEmitter, ElementRef, booleanAttribute } from '@angular/core'; import { IgxIconComponent } from '../../icon/icon.component'; import { IgxRippleDirective } from '../../directives/ripple/ripple.directive'; -import { NgIf } from '@angular/common'; import { IgxIconButtonDirective } from '../../directives/button/icon-button.directive'; /* blazorElement */ @@ -10,7 +9,7 @@ import { IgxIconButtonDirective } from '../../directives/button/icon-button.dire @Component({ selector: 'igx-grid-action-button', templateUrl: 'grid-action-button.component.html', - imports: [NgIf, IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective] + imports: [IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective] }) export class IgxGridActionButtonComponent { diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.html b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.html index 0448b22086f..b68cf39486d 100644 --- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.html +++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.html @@ -1,8 +1,16 @@ - - - - - - +@if (isRowContext) { + @if (!disabled && editRow) { + + } + @if (addRow && isRootRow) { + + } + @if (addChild && hasChildren) { + + } + @if (!disabled && deleteRow) { + + } +} diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts index d763d414e6e..1abfd40b3b6 100644 --- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts +++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.spec.ts @@ -1,7 +1,6 @@ import { Component, ViewChild, OnInit } from '@angular/core'; import { TestBed, waitForAsync } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NgFor } from '@angular/common'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { configureTestSuite } from '../../test-utils/configure-suite'; @@ -391,16 +390,18 @@ describe('igxGridEditingActions #grid ', () => { template: ` - - + @for (c of columns; track c) { + + + } `, - imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridEditingActionsComponent, NgFor] + imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridEditingActionsComponent] }) class IgxActionStripTestingComponent implements OnInit { @ViewChild('actionStrip', { read: IgxActionStripComponent, static: true }) @@ -468,9 +469,11 @@ class IgxActionStripTestingComponent implements OnInit { template: ` - - + @for (c of columns; track c) { + + + } @@ -479,7 +482,7 @@ class IgxActionStripTestingComponent implements OnInit { `, selector: 'igx-action-strip-pin-edit-component', - imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent, NgFor] + imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent] }) class IgxActionStripPinEditComponent extends IgxActionStripTestingComponent { } @@ -488,9 +491,11 @@ class IgxActionStripPinEditComponent extends IgxActionStripTestingComponent { template: ` - - + @for (c of columns; track c) { + + + } @@ -498,7 +503,7 @@ class IgxActionStripPinEditComponent extends IgxActionStripTestingComponent { `, selector: 'igx-action-strip-edit-menu-component', - imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridEditingActionsComponent, NgFor] + imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridEditingActionsComponent] }) class IgxActionStripEditMenuComponent extends IgxActionStripTestingComponent { } @@ -507,9 +512,11 @@ class IgxActionStripEditMenuComponent extends IgxActionStripTestingComponent { template: ` - - + @for (c of columns; track c) { + + + } @@ -518,7 +525,7 @@ class IgxActionStripEditMenuComponent extends IgxActionStripTestingComponent { `, selector: 'igx-action-strip-one-row-component', - imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, NgFor] + imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent] }) class IgxActionStripOneRowComponent extends IgxActionStripTestingComponent { } @@ -527,9 +534,11 @@ class IgxActionStripOneRowComponent extends IgxActionStripTestingComponent { template: ` - - + @for (c of columns; track c) { + + + } @@ -537,7 +546,7 @@ class IgxActionStripOneRowComponent extends IgxActionStripTestingComponent { `, selector: 'igx-action-strip-menu-one-row-component', - imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridEditingActionsComponent, NgFor] + imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridEditingActionsComponent] }) class IgxActionStripMenuOneRowComponent extends IgxActionStripTestingComponent { } diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts index 61f5fa39544..e48ec8745f2 100644 --- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts +++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-editing-actions.component.ts @@ -3,7 +3,6 @@ import { IgxGridActionsBaseDirective } from './grid-actions-base.directive'; import { showMessage } from '../../core/utils'; import { addRow, addChild } from '@igniteui/material-icons-extended'; import { IgxGridActionButtonComponent } from './grid-action-button.component'; -import { NgIf } from '@angular/common'; /* blazorElement */ @@ -19,7 +18,7 @@ import { NgIf } from '@angular/common'; selector: 'igx-grid-editing-actions', templateUrl: 'grid-editing-actions.component.html', providers: [{ provide: IgxGridActionsBaseDirective, useExisting: IgxGridEditingActionsComponent }], - imports: [NgIf, IgxGridActionButtonComponent] + imports: [IgxGridActionButtonComponent] }) export class IgxGridEditingActionsComponent extends IgxGridActionsBaseDirective { diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.html b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.html index 139553d1444..bdfde5466cb 100644 --- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.html +++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.html @@ -1,6 +1,14 @@ - - - - - - +@if (isRowContext) { + @if (inPinnedArea && pinnedTop) { + + } + @if (inPinnedArea && !pinnedTop) { + + } + @if (!pinned) { + + } + @if (pinned) { + + } +} diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.spec.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.spec.ts index f33e55996e9..2d9efab5b96 100644 --- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.spec.ts +++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.spec.ts @@ -7,7 +7,6 @@ import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; import { wait } from '../../test-utils/ui-interactions.spec'; import { IgxGridPinningActionsComponent } from './grid-pinning-actions.component'; -import { NgFor } from '@angular/common'; import { IgxColumnComponent } from '../../grids/public_api'; @@ -103,16 +102,18 @@ describe('igxGridPinningActions #grid ', () => { template: ` - - + @for (c of columns; track c) { + + + } `, - imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, NgFor] + imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent] }) class IgxActionStripTestingComponent implements OnInit { @ViewChild('actionStrip', { read: IgxActionStripComponent, static: true }) @@ -175,16 +176,18 @@ class IgxActionStripTestingComponent implements OnInit { template: ` - - + @for (c of columns; track c) { + + + } `, - imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, NgFor] + imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent] }) class IgxActionStripPinMenuComponent extends IgxActionStripTestingComponent { } diff --git a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.ts b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.ts index 6bee97ae647..86c19ba569d 100644 --- a/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.ts +++ b/projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-pinning-actions.component.ts @@ -2,7 +2,6 @@ import { Component, HostBinding } from '@angular/core'; import { IgxGridActionsBaseDirective } from './grid-actions-base.directive'; import { pinLeft, unpinLeft, jumpDown, jumpUp } from '@igniteui/material-icons-extended'; import { IgxGridActionButtonComponent } from './grid-action-button.component'; -import { NgIf } from '@angular/common'; /* blazorElement */ /* wcElementTag: igc-grid-pinning-actions */ @@ -17,7 +16,7 @@ import { NgIf } from '@angular/common'; selector: 'igx-grid-pinning-actions', templateUrl: 'grid-pinning-actions.component.html', providers: [{ provide: IgxGridActionsBaseDirective, useExisting: IgxGridPinningActionsComponent }], - imports: [NgIf, IgxGridActionButtonComponent] + imports: [IgxGridActionButtonComponent] }) export class IgxGridPinningActionsComponent extends IgxGridActionsBaseDirective { diff --git a/projects/igniteui-angular/src/lib/badge/badge.component.html b/projects/igniteui-angular/src/lib/badge/badge.component.html index 57461614232..14451e6100d 100644 --- a/projects/igniteui-angular/src/lib/badge/badge.component.html +++ b/projects/igniteui-angular/src/lib/badge/badge.component.html @@ -1,4 +1,10 @@ -{{value}} -{{icon}} -{{icon}} +@if (value || value === 0 && !icon) { + {{value}} +} +@if (icon && !iconSet) { + {{icon}} +} +@if (icon && iconSet) { + {{icon}} +} diff --git a/projects/igniteui-angular/src/lib/badge/badge.component.ts b/projects/igniteui-angular/src/lib/badge/badge.component.ts index 5275adb98f9..a891c1fcc85 100644 --- a/projects/igniteui-angular/src/lib/badge/badge.component.ts +++ b/projects/igniteui-angular/src/lib/badge/badge.component.ts @@ -1,4 +1,3 @@ -import { NgIf } from '@angular/common'; import { booleanAttribute, Component, HostBinding, Input } from '@angular/core'; import { mkenum } from '../core/utils'; import { IgxIconComponent } from '../icon/icon.component'; @@ -41,7 +40,7 @@ export type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType]; @Component({ selector: 'igx-badge', templateUrl: 'badge.component.html', - imports: [NgIf, IgxIconComponent] + imports: [IgxIconComponent] }) export class IgxBadgeComponent { diff --git a/projects/igniteui-angular/src/lib/banner/banner.component.html b/projects/igniteui-angular/src/lib/banner/banner.component.html index c49ac46f2da..d8cf0bb0adf 100644 --- a/projects/igniteui-angular/src/lib/banner/banner.component.html +++ b/projects/igniteui-angular/src/lib/banner/banner.component.html @@ -3,22 +3,23 @@
-
- -
+ @if (bannerIcon) { +
+ +
+ }
- + @if (useDefaultTemplate) { - - + } @else { - + }
diff --git a/projects/igniteui-angular/src/lib/banner/banner.component.ts b/projects/igniteui-angular/src/lib/banner/banner.component.ts index 08fc743b568..b6055d350a1 100644 --- a/projects/igniteui-angular/src/lib/banner/banner.component.ts +++ b/projects/igniteui-angular/src/lib/banner/banner.component.ts @@ -14,7 +14,6 @@ import { IToggleView } from '../core/navigation'; import { IgxButtonDirective } from '../directives/button/button.directive'; import { IgxRippleDirective } from '../directives/ripple/ripple.directive'; import { IgxBannerActionsDirective } from './banner.directives'; -import { NgIf } from '@angular/common'; import { CancelableEventArgs, IBaseEventArgs } from '../core/utils'; import { ToggleAnimationSettings } from '../expansion-panel/toggle-animation-component'; import { IgxExpansionPanelBodyComponent } from '../expansion-panel/expansion-panel-body.component'; @@ -49,7 +48,7 @@ export interface BannerCancelEventArgs extends BannerEventArgs, CancelableEventA @Component({ selector: 'igx-banner', templateUrl: 'banner.component.html', - imports: [IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent, NgIf, IgxButtonDirective, IgxRippleDirective] + imports: [IgxExpansionPanelComponent, IgxExpansionPanelBodyComponent, IgxButtonDirective, IgxRippleDirective] }) export class IgxBannerComponent implements IToggleView { /** diff --git a/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts b/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts index 5b2af8ee886..8b768bcb5b8 100644 --- a/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts +++ b/projects/igniteui-angular/src/lib/buttonGroup/buttonGroup.component.ts @@ -1,4 +1,3 @@ -import { NgFor, NgIf } from '@angular/common'; import { AfterViewInit, Component, @@ -58,7 +57,7 @@ let NEXT_ID = 0; @Component({ selector: 'igx-buttongroup', templateUrl: 'buttongroup-content.component.html', - imports: [NgFor, IgxButtonDirective, IgxRippleDirective, NgIf, IgxIconComponent] + imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent] }) export class IgxButtonGroupComponent implements AfterViewInit, OnDestroy { /** diff --git a/projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.html b/projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.html index e86c985d859..58f674c856a 100644 --- a/projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.html +++ b/projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.html @@ -1,17 +1,23 @@
- + @for (button of values; track button) { + + }
diff --git a/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts b/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts index 2e1b9157c24..e73de82221c 100644 --- a/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts +++ b/projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts @@ -5,7 +5,6 @@ import { configureTestSuite } from '../test-utils/configure-suite'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { UIInteractions, wait } from '../test-utils/ui-interactions.spec'; import { IgxButtonDirective } from '../directives/button/button.directive'; -import { NgFor } from '@angular/common'; import { IgxRadioGroupDirective } from '../directives/radio/radio-group.directive'; import { IgxRadioComponent } from '../radio/radio.component'; @@ -585,10 +584,12 @@ class ButtonGroupWithSelectedButtonComponent { @Component({ template: ` - + @for (item of items; track item) { + + } `, - imports: [IgxButtonGroupComponent, IgxButtonDirective, NgFor] + imports: [IgxButtonGroupComponent, IgxButtonDirective] }) class ButtonGroupButtonWithBoundSelectedOutputComponent { @ViewChild(IgxButtonGroupComponent, { static: true }) public buttonGroup: IgxButtonGroupComponent; @@ -605,9 +606,11 @@ class ButtonGroupButtonWithBoundSelectedOutputComponent { @Component({ template: ` - - {{ item }} - + @for (item of ['Foo', 'Bar']; track item) { + + {{ item }} + + } @@ -623,7 +626,7 @@ class ButtonGroupButtonWithBoundSelectedOutputComponent { `, - imports: [IgxButtonGroupComponent, IgxButtonDirective, NgFor, IgxRadioGroupDirective, IgxRadioComponent] + imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxRadioGroupDirective, IgxRadioComponent] }) class ButtonGroupSelectionBoundToAnotherComponent { @ViewChild('radioGroup', { read: IgxRadioGroupDirective, static: true }) public radioGroup: IgxRadioGroupDirective; diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.html b/projects/igniteui-angular/src/lib/calendar/calendar.component.html index ff3575059ab..96410be5472 100644 --- a/projects/igniteui-angular/src/lib/calendar/calendar.component.html +++ b/projects/igniteui-angular/src/lib/calendar/calendar.component.html @@ -1,22 +1,22 @@ - + @if (selection === 'single') { {{ resourceStrings.igx_calendar_select_date }} - - + } + @if (selection === 'range') { {{ resourceStrings.igx_calendar_range_placeholder }} - + } - + @if (selection === 'single') { {{ getFormattedDate().weekday }},  {{ getFormattedDate().monthday }} - - + } + @if (selection === 'range') { {{ selectedDates.length === 0 ? 'Start' : getFormattedRange().start}}  -  {{ selectedDates.length <= 1 ? 'End' : getFormattedRange().end}} - + } @@ -35,7 +35,9 @@ - {{ formattedYear(obj.date) }} + @if (activeView === 'year') { + {{ formattedYear(obj.date) }} + } - + @if (monthsViewNumber < 2 || obj.index < 1) { + {{ monthsViewNumber > 1 ? - (resourceStrings.igx_calendar_first_picker_of.replace('{0}', monthsViewNumber.toString()) + ' ' + + (resourceStrings.igx_calendar_first_picker_of.replace('{0}', monthsViewNumber.toString()) + ' ' + (obj.date | date: 'LLLL yyyy')) : - resourceStrings.igx_calendar_selected_month_is + (obj.date | date: 'LLLL yyyy')}} - + resourceStrings.igx_calendar_selected_month_is + (obj.date | date: 'LLLL yyyy')}} + + } @@ -116,16 +120,15 @@
+ *ngTemplateOutlet="subheaderTemplate ? subheaderTemplate : defaultMonthYear; context: getContext(i)">
-
- - -
+ @if (this.orientation === 'horizontal' ? i === monthsViewNumber - 1 : i === 0) { +
+ + +
+ }
@@ -149,7 +152,7 @@
+ *ngTemplateOutlet="subheaderTemplate ? subheaderTemplate : defaultDecade;">
@@ -160,18 +163,20 @@ -
-
- -
-

- - -

-
+@if (selection === 'single' && hasHeader || selection === 'range' && hasHeader) { +
+
+ +
+

+ + +

+
+}
role="grid" > - + @if (selection === 'multi') { {{ monthsViewNumber && monthsViewNumber > 1 ? resourceStrings.igx_calendar_multi_selection.replace('{0}', monthsViewNumber.toString()) : resourceStrings.igx_calendar_singular_multi_selection}} - - + } + @if (selection === 'range') { {{ monthsViewNumber && monthsViewNumber > 1 ? resourceStrings.igx_calendar_range_selection.replace('{0}', monthsViewNumber.toString()) : resourceStrings.igx_calendar_singular_range_selection}} - - + } + @if (selection === 'single') { {{ monthsViewNumber && monthsViewNumber > 1 ? resourceStrings.igx_calendar_single_selection.replace('{0}', monthsViewNumber.toString()) : resourceStrings.igx_calendar_singular_single_selection}} - + }
- - + @if (isDefaultView) { + @for (view of monthsViewNumber | IgxMonthViewSlots; track $index; let i = $index) { - - + } + } - + @if (isYearView) { - + } - + @if (isDecadeView) { - + }
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts index b7f21eaa3dc..528bc28db3a 100644 --- a/projects/igniteui-angular/src/lib/calendar/calendar.component.ts +++ b/projects/igniteui-angular/src/lib/calendar/calendar.component.ts @@ -13,7 +13,7 @@ import { booleanAttribute, HostListener, } from '@angular/core'; -import { NgIf, NgTemplateOutlet, NgFor, DatePipe } from '@angular/common'; +import { NgTemplateOutlet, DatePipe } from '@angular/common'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; import { @@ -71,7 +71,7 @@ let NEXT_ID = 0; ], selector: 'igx-calendar', templateUrl: 'calendar.component.html', - imports: [NgIf, NgTemplateOutlet, IgxCalendarScrollPageDirective, IgxIconComponent, NgFor, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, DatePipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar] + imports: [NgTemplateOutlet, IgxCalendarScrollPageDirective, IgxIconComponent, IgxDaysViewComponent, IgxMonthsViewComponent, IgxYearsViewComponent, DatePipe, IgxMonthViewSlotsCalendar, IgxGetViewDateCalendar] }) export class IgxCalendarComponent extends IgxCalendarBaseDirective implements AfterViewInit, OnDestroy { /** diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.html b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.html index e613c31623d..96a403d93b3 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.html +++ b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.html @@ -3,86 +3,86 @@ class="igx-days-view__row" [title]="weekNumberHeader.long | titlecase" > -
- - {{ weekNumberHeader.short | titlecase }} - -
- - - {{ dayName.formatted | titlecase }} + @if (showWeekNumbers) { +
+ + {{ weekNumberHeader.short | titlecase }} + +
+ } + @for (dayName of weekHeaderLabels; track dayName.long) { + + + {{ dayName.formatted | titlecase }} + - + }
-
+@for ( + week of monthWeeks; track rowTracker(i, week); + let isLast = $last; let i = $index +) {
- - {{ getWeekNumber(week[0]) }} - + @if (showWeekNumbers) { +
+ + {{ getWeekNumber(week[0]) }} + +
+ } + @for (day of week; track dateTracker($index, day)) { + + {{ formattedDate(day.native) }} + + }
- - - {{ formattedDate(day.native) }} - -
+} diff --git a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts index 35151a58f37..cba03ba1379 100644 --- a/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts +++ b/projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts @@ -15,7 +15,7 @@ import { ChangeDetectionStrategy, } from '@angular/core'; import { NG_VALUE_ACCESSOR } from '@angular/forms'; -import { NgIf, NgFor, TitleCasePipe } from '@angular/common'; +import { TitleCasePipe } from '@angular/common'; import { CalendarSelection, ScrollDirection } from '../../calendar/calendar'; import { IgxDayItemComponent } from './day-item.component'; import { DateRangeType } from '../../core/dates'; @@ -45,7 +45,7 @@ let NEXT_ID = 0; selector: 'igx-days-view', templateUrl: 'days-view.component.html', changeDetection: ChangeDetectionStrategy.OnPush, - imports: [NgIf, NgFor, IgxDayItemComponent, TitleCasePipe] + imports: [IgxDayItemComponent, TitleCasePipe] }) export class IgxDaysViewComponent extends IgxCalendarBaseDirective { #standalone = true; @@ -430,8 +430,8 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective { /** * @hidden */ - public rowTracker(index: number, item: CalendarDay[]): string { - return `${item[index].month}${item[index].date}`; + public rowTracker(_: number, item: CalendarDay[]): string { + return `${item[0].month}${item[0].date}`; } /** diff --git a/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.html b/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.html index 60928d5fa04..e13738c8de4 100644 --- a/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.html +++ b/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.html @@ -44,7 +44,9 @@ - {{ formattedYear(obj.date) }} + @if (activeView === 'year') { + {{ formattedYear(obj.date) }} + }
- + @if (isDefaultView) { - + } - + @if (isDecadeView) { - + }
- + @if (isDefaultView) { > - + } - + @if (isDecadeView) { - + }
diff --git a/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts b/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts index 6c3e4691c49..6bda0564ec4 100644 --- a/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts +++ b/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts @@ -9,7 +9,7 @@ import { OnDestroy, OnInit, } from "@angular/core"; -import { NgIf, NgTemplateOutlet, DatePipe } from "@angular/common"; +import { NgTemplateOutlet, DatePipe } from "@angular/common"; import { NG_VALUE_ACCESSOR } from "@angular/forms"; import { IgxMonthsViewComponent } from "../months-view/months-view.component"; @@ -38,7 +38,6 @@ let NEXT_ID = 0; selector: "igx-month-picker", templateUrl: "month-picker.component.html", imports: [ - NgIf, NgTemplateOutlet, DatePipe, IgxIconComponent, diff --git a/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.html b/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.html index aeca84c201d..8fcda69dff5 100644 --- a/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.html +++ b/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.html @@ -1,21 +1,22 @@
- - + }
diff --git a/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts b/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts index f41f532facf..956e7acc000 100644 --- a/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts +++ b/projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts @@ -7,7 +7,7 @@ import { Inject, } from "@angular/core"; import { IgxCalendarMonthDirective } from "../calendar.directives"; -import { NgFor, TitleCasePipe } from "@angular/common"; +import { TitleCasePipe } from "@angular/common"; import { IgxCalendarViewDirective, DAY_INTERVAL_TOKEN, @@ -33,7 +33,7 @@ let NEXT_ID = 0; ], selector: "igx-months-view", templateUrl: "months-view.component.html", - imports: [NgFor, IgxCalendarMonthDirective, TitleCasePipe] + imports: [IgxCalendarMonthDirective, TitleCasePipe] }) export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor { #standalone = true; diff --git a/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.html b/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.html index 28082a19ab9..2f83bea48d9 100644 --- a/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.html +++ b/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.html @@ -1,22 +1,23 @@
- - + }
diff --git a/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts b/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts index ccdc538e67c..07fd46a8de5 100644 --- a/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts +++ b/projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts @@ -6,7 +6,6 @@ import { Inject, } from "@angular/core"; import { IgxCalendarYearDirective } from "../calendar.directives"; -import { NgFor } from "@angular/common"; import { IgxCalendarViewDirective, DAY_INTERVAL_TOKEN, @@ -30,7 +29,7 @@ import { calendarRange } from "../common/helpers"; ], selector: "igx-years-view", templateUrl: "years-view.component.html", - imports: [NgFor, IgxCalendarYearDirective] + imports: [IgxCalendarYearDirective] }) export class IgxYearsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor { #standalone = true; diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.html b/projects/igniteui-angular/src/lib/carousel/carousel.component.html index b6e038359da..d79dc110577 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.html +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.html @@ -16,43 +16,53 @@ - +@if (navigation && slides.length) { + +} - +@if (navigation && slides.length) { + +} -
-
- +@if (showIndicators) { +
+ @for (slide of slides; track slide) { +
+ +
+ }
-
+} -
- {{getCarouselLabel}} -
+@if (showIndicatorsLabel) { +
+ {{getCarouselLabel}} +
+}
diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts index f0fa7cca10a..30b1a13437a 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts @@ -10,7 +10,6 @@ import { configureTestSuite } from '../test-utils/configure-suite'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { IgxSlideComponent } from './slide.component'; import { IgxCarouselIndicatorDirective, IgxCarouselNextButtonDirective, IgxCarouselPrevButtonDirective } from './carousel.directives'; -import { NgFor, NgIf } from '@angular/common'; import { CarouselIndicatorsOrientation, CarouselAnimationType } from './enums'; describe('Carousel', () => { @@ -108,22 +107,22 @@ describe('Carousel', () => { }); it('add/remove slides tests', () => { - let currentSlide = carousel.get(carousel.current); - carousel.remove(currentSlide); + const slide1 = carousel.get(carousel.current); + carousel.remove(slide1); fixture.detectChanges(); expect(carousel.slides.length).toEqual(3); expect(carousel.total).toEqual(3); - currentSlide = carousel.get(carousel.current); - carousel.remove(currentSlide); + const slide2 = carousel.get(carousel.current); + carousel.remove(slide2); fixture.detectChanges(); expect(carousel.slides.length).toEqual(2); expect(carousel.total).toEqual(2); - carousel.add(currentSlide); - carousel.add(currentSlide); + carousel.add(slide1); + carousel.add(slide2); fixture.detectChanges(); expect(carousel.slides.length).toEqual(4); @@ -187,11 +186,12 @@ describe('Carousel', () => { expect(carousel.slideChanged.emit).toHaveBeenCalledTimes(3); spyOn(carousel.slideAdded, 'emit'); - carousel.add(carousel.get(carousel.current)); + const newSlide = new IgxSlideComponent(null, null); + carousel.add(newSlide); fixture.detectChanges(); args = { carousel, - slide: carousel.get(carousel.current) + slide: newSlide }; expect(carousel.slideAdded.emit).toHaveBeenCalledWith(args); @@ -1213,8 +1213,12 @@ class CarouselTemplateSetInMarkupTestComponent { - {{slide.index}} - {{slide.index}}: Active + @if (!slide.active) { + {{slide.index}} + } + @if (slide.active) { + {{slide.index}}: Active + } @@ -1232,7 +1236,7 @@ class CarouselTemplateSetInMarkupTestComponent {

Slide4

 `, - imports: [IgxCarouselComponent, IgxSlideComponent, NgIf] + imports: [IgxCarouselComponent, IgxSlideComponent] }) class CarouselTemplateSetInTypescriptTestComponent { @ViewChild('carousel', { static: true }) public carousel: IgxCarouselComponent; @@ -1249,12 +1253,14 @@ class CarouselTemplateSetInTypescriptTestComponent { @Component({ template: ` - -

{{slide.text}}

 - + @for (slide of slides; track slide) { + +

{{slide.text}}

 + + } `, - imports: [IgxCarouselComponent, IgxSlideComponent, NgFor] + imports: [IgxCarouselComponent, IgxSlideComponent] }) class CarouselDynamicSlidesComponent { @ViewChild('carousel', { static: true }) public carousel: IgxCarouselComponent; diff --git a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts index 50f472a4a00..fe2adf1d118 100644 --- a/projects/igniteui-angular/src/lib/carousel/carousel.component.ts +++ b/projects/igniteui-angular/src/lib/carousel/carousel.component.ts @@ -1,4 +1,4 @@ -import { NgIf, NgClass, NgFor, NgTemplateOutlet, DOCUMENT } from '@angular/common'; +import { NgClass, NgTemplateOutlet, DOCUMENT } from '@angular/common'; import { AfterContentInit, ChangeDetectorRef, @@ -85,7 +85,7 @@ export class CarouselHammerConfig extends HammerGestureConfig { display: block; outline-style: none; }`], - imports: [IgxButtonDirective, IgxIconComponent, NgIf, NgClass, NgFor, NgTemplateOutlet] + imports: [IgxButtonDirective, IgxIconComponent, NgClass, NgTemplateOutlet] }) export class IgxCarouselComponent extends IgxCarouselComponentBase implements ICarouselComponentBase, OnDestroy, AfterContentInit { diff --git a/projects/igniteui-angular/src/lib/chips/chip.component.html b/projects/igniteui-angular/src/lib/chips/chip.component.html index 1a2f23622dc..27958ceca06 100644 --- a/projects/igniteui-angular/src/lib/chips/chip.component.html +++ b/projects/igniteui-angular/src/lib/chips/chip.component.html @@ -16,9 +16,11 @@ (dropped)="onChipDrop($event)">
-
- -
+ @if (selected) { +
+ +
+ }
@@ -30,16 +32,18 @@
-
- -
+ @if (removable) { +
+ +
+ }
diff --git a/projects/igniteui-angular/src/lib/chips/chip.component.ts b/projects/igniteui-angular/src/lib/chips/chip.component.ts index 8cdcdae3cb3..06690bdc2b6 100644 --- a/projects/igniteui-angular/src/lib/chips/chip.component.ts +++ b/projects/igniteui-angular/src/lib/chips/chip.component.ts @@ -20,7 +20,7 @@ import { IBaseEventArgs, mkenum } from '../core/utils'; import { ChipResourceStringsEN, IChipResourceStrings } from '../core/i18n/chip-resources'; import { Subject } from 'rxjs'; import { IgxIconComponent } from '../icon/icon.component'; -import { NgClass, NgTemplateOutlet, NgIf, DOCUMENT } from '@angular/common'; +import { NgClass, NgTemplateOutlet, DOCUMENT } from '@angular/common'; import { getCurrentResourceStrings } from '../core/i18n/resources'; import { Size } from '../grids/common/enums'; @@ -83,7 +83,7 @@ let CHIP_ID = 0; @Component({ selector: 'igx-chip', templateUrl: 'chip.component.html', - imports: [IgxDropDirective, IgxDragDirective, NgClass, NgTemplateOutlet, NgIf, IgxIconComponent] + imports: [IgxDropDirective, IgxDragDirective, NgClass, NgTemplateOutlet, IgxIconComponent] }) export class IgxChipComponent implements OnInit, OnDestroy { diff --git a/projects/igniteui-angular/src/lib/chips/chip.spec.ts b/projects/igniteui-angular/src/lib/chips/chip.spec.ts index ce2820051f4..e518735693d 100644 --- a/projects/igniteui-angular/src/lib/chips/chip.spec.ts +++ b/projects/igniteui-angular/src/lib/chips/chip.spec.ts @@ -10,19 +10,20 @@ import { UIInteractions, wait } from '../test-utils/ui-interactions.spec'; import { configureTestSuite } from '../test-utils/configure-suite'; import { ControlsFunction } from '../test-utils/controls-functions.spec'; import { IgxIconComponent } from '../icon/icon.component'; -import { NgFor } from '@angular/common'; import { getComponentSize } from '../core/utils'; @Component({ template: ` - - {{chip.text}} - drag_indicator - + @for (chip of chipList; track chip) { + + {{chip.text}} + drag_indicator + + } Tab Chip @@ -40,7 +41,7 @@ import { getComponentSize } from '../core/utils'; `, - imports: [IgxChipComponent, IgxChipsAreaComponent, IgxIconComponent, IgxPrefixDirective, NgFor] + imports: [IgxChipComponent, IgxChipsAreaComponent, IgxIconComponent, IgxPrefixDirective] }) class TestChipComponent { @@ -68,13 +69,15 @@ class TestChipComponent { @Component({ template: ` - - label - suf - + @for (chip of chipList; track chip) { + + label + suf + + } `, - imports: [IgxChipsAreaComponent, IgxChipComponent, IgxLabelDirective, IgxSuffixDirective, NgFor] + imports: [IgxChipsAreaComponent, IgxChipComponent, IgxLabelDirective, IgxSuffixDirective] }) class TestChipsLabelAndSuffixComponent { diff --git a/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts b/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts index a3ce7260c12..54e5916d107 100644 --- a/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts +++ b/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts @@ -7,19 +7,20 @@ import { configureTestSuite } from '../test-utils/configure-suite'; import { wait, UIInteractions } from '../test-utils/ui-interactions.spec'; import { IgxIconComponent } from '../icon/icon.component'; import { IgxPrefixDirective } from './public_api'; -import { NgFor } from '@angular/common'; @Component({ template: ` - - drag_indicator - {{chip.text}} - + @for (chip of chipList; track chip) { + + drag_indicator + {{chip.text}} + + } `, - imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective, NgFor] + imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective] }) class TestChipComponent { @ViewChild('chipsArea', { read: IgxChipsAreaComponent, static: true }) @@ -58,14 +59,16 @@ class TestChipSelectComponent extends TestChipComponent { @Component({ template: ` - - drag_indicator - {{chip.text}} - + @for (chip of chipList; track chip) { + + drag_indicator + {{chip.text}} + + } `, - imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective, NgFor] + imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective] }) class TestChipReorderComponent { @ViewChild('chipsArea', { read: IgxChipsAreaComponent, static: true }) diff --git a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts index bb2452ce6da..733995846f3 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo-dropdown.component.ts @@ -10,7 +10,7 @@ import { IgxComboAPIService } from './combo.api'; import { IgxDropDownItemBaseDirective } from '../drop-down/drop-down-item.base'; import { IgxSelectionAPIService } from '../core/selection'; import { IgxComboItemComponent } from './combo-item.component'; -import { DOCUMENT, NgIf } from '@angular/common'; +import { DOCUMENT } from '@angular/common'; import { IgxToggleDirective } from '../directives/toggle/toggle.directive'; /** @hidden */ @@ -18,7 +18,7 @@ import { IgxToggleDirective } from '../directives/toggle/toggle.directive'; selector: 'igx-combo-drop-down', templateUrl: '../drop-down/drop-down.component.html', providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxComboDropDownComponent }], - imports: [IgxToggleDirective, NgIf] + imports: [IgxToggleDirective] }) export class IgxComboDropDownComponent extends IgxDropDownComponent implements IDropDownBase, OnDestroy, AfterViewInit { /** @hidden @internal */ diff --git a/projects/igniteui-angular/src/lib/combo/combo-item.component.html b/projects/igniteui-angular/src/lib/combo/combo-item.component.html index 3849092698e..b467360ae0d 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-item.component.html +++ b/projects/igniteui-angular/src/lib/combo/combo-item.component.html @@ -1,5 +1,5 @@ - +@if (!isHeader && !singleMode) { - +} diff --git a/projects/igniteui-angular/src/lib/combo/combo-item.component.ts b/projects/igniteui-angular/src/lib/combo/combo-item.component.ts index 1c9b4dd39de..ff74a3ebf3f 100644 --- a/projects/igniteui-angular/src/lib/combo/combo-item.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo-item.component.ts @@ -12,13 +12,12 @@ import { IgxComboAPIService } from './combo.api'; import { IgxSelectionAPIService } from '../core/selection'; import { rem } from '../core/utils'; import { IgxCheckboxComponent } from '../checkbox/checkbox.component'; -import { NgIf } from '@angular/common'; /** @hidden */ @Component({ selector: 'igx-combo-item', templateUrl: 'combo-item.component.html', - imports: [NgIf, IgxCheckboxComponent] + imports: [IgxCheckboxComponent] }) export class IgxComboItemComponent extends IgxDropDownItemComponent { diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.html b/projects/igniteui-angular/src/lib/combo/combo.component.html index cde01b8b3ce..03fd08b909f 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.html +++ b/projects/igniteui-angular/src/lib/combo/combo.component.html @@ -9,49 +9,59 @@ + [attr.placeholder]="placeholder" [disabled]="disabled" + role="combobox" aria-haspopup="listbox" + [attr.aria-expanded]="!dropdown.collapsed" [attr.aria-controls]="dropdown.listId" + [attr.aria-labelledby]="ariaLabelledBy || label?.id || placeholder" + (blur)="onBlur()" /> - - - - - - + @if (displayValue) { + + @if (clearIconTemplate) { + + } + @if (!clearIconTemplate) { + + } + + } - + @if (toggleIconTemplate) { - - + } + @if (!toggleIconTemplate) { + + } -
- - - - - - - - - -
+ @if (displaySearchInput) { +
+ + + @if (showSearchCaseIcon) { + + + + + + + } + +
+ }
- + @if (item?.isHeader) { - + } - + @if (!item?.isHeader) { - + }
-
-
- - + @if (filteredData.length === 0 || isAddButtonVisible()) { +
+ @if (filteredData.length === 0) { +
+ + +
+ } + @if (isAddButtonVisible()) { + + + + + }
- - - - -
+ } diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts index 76543666a22..92756f24369 100644 --- a/projects/igniteui-angular/src/lib/combo/combo.component.ts +++ b/projects/igniteui-angular/src/lib/combo/combo.component.ts @@ -1,4 +1,4 @@ -import { DOCUMENT, NgClass, NgIf, NgTemplateOutlet } from '@angular/common'; +import { DOCUMENT, NgClass, NgTemplateOutlet } from '@angular/common'; import { AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnInit, OnDestroy, Optional, Inject, Injector, ViewChild, Input, Output, EventEmitter, HostListener, DoCheck, booleanAttribute @@ -101,7 +101,6 @@ const diffInSets = (set1: Set, set2: Set): any[] => { { provide: NG_VALUE_ACCESSOR, useExisting: IgxComboComponent, multi: true } ], imports: [ - NgIf, NgTemplateOutlet, NgClass, FormsModule, diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts index 487dce78d8d..55404e32fe2 100644 --- a/projects/igniteui-angular/src/lib/core/utils.ts +++ b/projects/igniteui-angular/src/lib/core/utils.ts @@ -656,9 +656,9 @@ export function getComponentCssSizeVar(size: string) { * @param path - The URI path to be normalized. * @returns string encoded using the encodeURI function. */ - export function normalizeURI(path: string) { +export function normalizeURI(path: string) { return path?.split('/').map(encodeURI).join('/'); - } +} export function getComponentTheme(el: Element) { return globalThis.window @@ -666,3 +666,16 @@ export function getComponentTheme(el: Element) { .getPropertyValue('--theme') .trim() as IgxTheme; } + +/** + * Collection re-created w/ the built in track by identity will always log + * warning even for valid cases of recalculating all collection items. + * See https://github.com/angular/angular/blob/55581b4181639568fb496e91055142a1b489e988/packages/core/src/render3/instructions/control_flow.ts#L393-L409 + * Current solution explicit track function doing the same as suggested in: + * https://github.com/angular/angular/issues/56471#issuecomment-2180315803 + * This should be used with moderation and when necessary. + * @internal + */ +export function trackByIdentity(item: T): T { + return item; +} diff --git a/projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.html b/projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.html index f9929eab2da..0d54b8105b3 100644 --- a/projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.html +++ b/projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.html @@ -1,39 +1,44 @@ -
- - -
+ @if (closeButtonLabel || todayButtonLabel) { +
+ @if (closeButtonLabel) { + + } + @if (todayButtonLabel) { + + } +
+ } - -
- - -
+@if (pickerActions?.template || (closeButtonLabel || todayButtonLabel)) { + +} +@if (pickerActions?.template || (closeButtonLabel || todayButtonLabel)) { +
+ + +
+} diff --git a/projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.ts b/projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.ts index 3f8cd15202a..510be7214f1 100644 --- a/projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.ts +++ b/projects/igniteui-angular/src/lib/date-common/calendar-container/calendar-container.component.ts @@ -1,4 +1,4 @@ -import { NgIf, NgTemplateOutlet } from '@angular/common'; +import { NgTemplateOutlet } from '@angular/common'; import { Component, ViewChild, @@ -20,7 +20,6 @@ import { IgxDividerDirective } from "../../directives/divider/divider.directive" styles: [':host {display: block;}'], templateUrl: 'calendar-container.component.html', imports: [ - NgIf, IgxButtonDirective, IgxRippleDirective, IgxCalendarComponent, diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html index ebcfec861f4..81159a032bd 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.html @@ -1,16 +1,18 @@ - - + - - + + + } - - - + @if (!clearComponents.length && value) { + + + + } diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts index 6638292d7cc..a85061000d8 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts @@ -21,7 +21,7 @@ import { DateRangeDescriptor, DateRangeType } from '../core/dates'; import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive'; import { IgxPickerClearComponent, IgxPickerToggleComponent } from '../date-common/public_api'; import { DateTimeUtil } from '../date-common/util/date-time.util'; -import { NgIf, registerLocaleData } from "@angular/common"; +import { registerLocaleData } from "@angular/common"; import localeES from "@angular/common/locales/es"; import localeBg from "@angular/common/locales/bg"; import { IgxDateTimeEditorDirective } from '../directives/date-time-editor/public_api'; @@ -1552,13 +1552,17 @@ export class IgxDatePickerTestKbrdComponent { template: ` - CustomToggle + @if (showCustomToggle) { + CustomToggle + } Prefix - CustomClear + @if (showCustomClear) { + CustomClear + } Suffix Hint `, - imports: [IgxDatePickerComponent, IgxPickerToggleComponent, IgxPrefixDirective, IgxPickerClearComponent, IgxLabelDirective, IgxSuffixDirective, IgxHintDirective, NgIf] + imports: [IgxDatePickerComponent, IgxPickerToggleComponent, IgxPrefixDirective, IgxPickerClearComponent, IgxLabelDirective, IgxSuffixDirective, IgxHintDirective] }) export class IgxDatePickerWithProjectionsComponent { @ViewChild(IgxDatePickerComponent) public datePicker: IgxDatePickerComponent; diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts index d1348e1afbd..a3a6935af7d 100644 --- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts @@ -25,7 +25,6 @@ import { ViewContainerRef, booleanAttribute } from '@angular/core'; -import { NgIf } from '@angular/common'; import { AbstractControl, ControlValueAccessor, @@ -93,7 +92,6 @@ let NEXT_ID = 0; templateUrl: 'date-picker.component.html', styles: [':host { display: block; }'], imports: [ - NgIf, IgxInputGroupComponent, IgxPrefixDirective, IgxIconComponent, diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker-inputs.common.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker-inputs.common.ts index e08cf779ed5..8cccd6a2275 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker-inputs.common.ts +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker-inputs.common.ts @@ -10,7 +10,7 @@ import { IgxIconComponent } from '../icon/icon.component'; import { IgxSuffixDirective } from '../directives/suffix/suffix.directive'; import { IgxButtonDirective } from '../directives/button/button.directive'; import { IgxPrefixDirective } from '../directives/prefix/prefix.directive'; -import { NgIf, NgTemplateOutlet, NgClass, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common'; +import { NgTemplateOutlet, NgClass } from '@angular/common'; /** Represents a range between two dates. */ export interface DateRange { @@ -126,7 +126,7 @@ export class IgxDateRangeInputsBaseComponent extends IgxInputGroupComponent { { provide: IgxInputGroupBase, useExisting: IgxDateRangeStartComponent }, { provide: IgxDateRangeInputsBaseComponent, useExisting: IgxDateRangeStartComponent } ], - imports: [NgIf, NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, NgClass, IgxSuffixDirective, IgxIconComponent, NgSwitch, NgSwitchCase, NgSwitchDefault] + imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, NgClass, IgxSuffixDirective, IgxIconComponent] }) export class IgxDateRangeStartComponent extends IgxDateRangeInputsBaseComponent { } @@ -161,7 +161,7 @@ export class IgxDateRangeStartComponent extends IgxDateRangeInputsBaseComponent { provide: IgxInputGroupBase, useExisting: IgxDateRangeEndComponent }, { provide: IgxDateRangeInputsBaseComponent, useExisting: IgxDateRangeEndComponent } ], - imports: [NgIf, NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, NgClass, IgxSuffixDirective, IgxIconComponent, NgSwitch, NgSwitchCase, NgSwitchDefault] + imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, NgClass, IgxSuffixDirective, IgxIconComponent] }) export class IgxDateRangeEndComponent extends IgxDateRangeInputsBaseComponent { } diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.html b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.html index 79359e0cd14..6ea322900a2 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.html +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.html @@ -28,9 +28,11 @@ role="combobox" aria-haspopup="grid" [attr.aria-expanded]="!collapsed" [attr.aria-labelledby]="label?.id" [value]="value | dateRange: appliedFormat : locale : formatter" /> - - - + @if (!toggleComponents.length) { + + + + } diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts index 4a5ec190653..e6b5edca0ba 100644 --- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts +++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts @@ -4,7 +4,7 @@ import { OnChanges, OnDestroy, OnInit, Optional, Output, QueryList, SimpleChanges, TemplateRef, ViewChild, ViewContainerRef } from '@angular/core'; -import { NgTemplateOutlet, NgIf, getLocaleFirstDayOfWeek } from '@angular/common'; +import { NgTemplateOutlet, getLocaleFirstDayOfWeek } from '@angular/common'; import { AbstractControl, ControlValueAccessor, NgControl, NG_VALIDATORS, NG_VALUE_ACCESSOR, ValidationErrors, Validator @@ -68,7 +68,6 @@ const SingleInputDatesConcatenationString = ' - '; { provide: NG_VALIDATORS, useExisting: IgxDateRangePickerComponent, multi: true } ], imports: [ - NgIf, NgTemplateOutlet, IgxIconComponent, IgxInputGroupComponent, diff --git a/projects/igniteui-angular/src/lib/dialog/dialog-content.component.html b/projects/igniteui-angular/src/lib/dialog/dialog-content.component.html index f92bfab185e..efe481f28d9 100644 --- a/projects/igniteui-angular/src/lib/dialog/dialog-content.component.html +++ b/projects/igniteui-angular/src/lib/dialog/dialog-content.component.html @@ -12,49 +12,54 @@ [attr.role]="role" [attr.aria-labelledby]="titleId" > -
- {{ title }} -
- + @if (title) { +
+ {{ title }} +
+ } + @if (!title) { + + }
- {{ - message - }} - + @if (message) { + + {{ message }} + + } + @if (!message) { + + }
-
- - -
- + @if (leftButtonLabel || rightButtonLabel) { +
+ @if (leftButtonLabel) { + + } + @if (rightButtonLabel) { + + } +
+ } + @if (!leftButtonLabel && !rightButtonLabel) { + + }
diff --git a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts index cb6fc430cc9..09c76ecfdd5 100644 --- a/projects/igniteui-angular/src/lib/dialog/dialog.component.ts +++ b/projects/igniteui-angular/src/lib/dialog/dialog.component.ts @@ -1,4 +1,3 @@ -import { NgIf } from '@angular/common'; import { Component, ElementRef, @@ -56,7 +55,7 @@ let DIALOG_ID = 0; @Component({ selector: 'igx-dialog', templateUrl: 'dialog-content.component.html', - imports: [IgxToggleDirective, IgxFocusTrapDirective, NgIf, IgxFocusDirective, IgxButtonDirective, IgxRippleDirective] + imports: [IgxToggleDirective, IgxFocusTrapDirective, IgxFocusDirective, IgxButtonDirective, IgxRippleDirective] }) export class IgxDialogComponent implements IToggleView, OnInit, OnDestroy, AfterContentInit { private static NEXT_ID = 1; diff --git a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts index 2d71a3871aa..5d4fac049d4 100644 --- a/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/autocomplete/autocomplete.directive.spec.ts @@ -10,7 +10,6 @@ import { IgxInputGroupComponent, IgxLabelDirective, IgxPrefixDirective, IgxSuffi import { IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective } from '../../drop-down/public_api'; import { FormsModule, ReactiveFormsModule, UntypedFormGroup, UntypedFormBuilder, Validators } from '@angular/forms'; import { ConnectedPositioningStrategy, VerticalAlignment, HorizontalAlignment } from '../../services/public_api'; -import { NgFor } from '@angular/common'; import { IgxRippleDirective } from '../ripple/ripple.directive'; import { IgxIconComponent } from '../../icon/icon.component'; @@ -949,9 +948,11 @@ export class IgxAutocompletePipeStartsWith implements PipeTransform { clear - - {{town}} - + @for (town of towns | startsWith:townSelected; track town+$index) { + + {{town}} + + } `, imports: [ FormsModule, @@ -964,7 +965,6 @@ export class IgxAutocompletePipeStartsWith implements PipeTransform { IgxIconComponent, IgxAutocompleteDirective, IgxAutocompletePipeStartsWith, - NgFor ] }) class AutocompleteComponent { @@ -979,7 +979,7 @@ class AutocompleteComponent { constructor() { this.towns = [ - 'Sofia', 'Plovdiv', 'Varna', 'Burgas', 'Ruse', 'Stara Zagora', 'Pleven', 'Dobrich', 'Sliven', 'Shumen', 'Pernik', 'Haskovo', 'Yambol', 'Pazardzhik', 'Blagoevgrad', 'Veliko Tarnovo', 'Vratsa', 'Gabrovo', 'Asenovgrad', 'Vidin', 'Kazanlak', 'Kyustendil', 'Kardzhali', 'Montana', 'Dimitrovgrad', 'Targovishte', 'Lovech', 'Silistra', 'Dupnitsa', 'Svishtov', 'Razgrad', 'Gorna Oryahovitsa', 'Smolyan', 'Petrich', 'Sandanski', 'Samokov', 'Sevlievo', 'Lom', 'Karlovo', 'Velingrad', 'Nova Zagora', 'Troyan', 'Aytos', 'Botevgrad', 'Gotse Delchev', 'Peshtera', 'Harmanli', 'Karnobat', 'Svilengrad', 'Panagyurishte', 'Chirpan', 'Popovo', 'Rakovski', 'Radomir', 'Novi Iskar', 'Kozloduy', 'Parvomay', 'Berkovitsa', 'Cherven Bryag', 'Pomorie', 'Ihtiman', 'Radnevo', 'Provadiya', 'Novi Pazar', 'Razlog', 'Byala Slatina', 'Nesebar', 'Balchik', 'Kostinbrod', 'Stamboliyski', 'Kavarna', 'Knezha', 'Pavlikeni', 'Mezdra', 'Etropole', 'Levski', 'Teteven', 'Elhovo', 'Bankya', 'Tryavna', 'Lukovit', 'Tutrakan', 'Sredets', 'Sopot', 'Byala', 'Veliki Preslav', 'Isperih', 'Belene', 'Omurtag', 'Bansko', 'Krichim', 'Galabovo', 'Devnya', 'Septemvri', 'Rakitovo', 'Lyaskovets', 'Svoge', 'Aksakovo', 'Kubrat', 'Dryanovo', 'Beloslav', 'Pirdop', 'Lyubimets', 'Momchilgrad', 'Slivnitsa', 'Hisarya', 'Zlatograd', 'Kostenets', 'Devin', 'General Toshevo', 'Simeonovgrad', 'Simitli', 'Elin Pelin', 'Dolni Chiflik', 'Tervel', 'Dulovo', 'Varshets', 'Kotel', 'Madan', 'Straldzha', 'Saedinenie', 'Bobov Dol', 'Tsarevo', 'Kuklen', 'Tvarditsa', 'Yakoruda', 'Elena', 'Topolovgrad', 'Bozhurishte', 'Chepelare', 'Oryahovo', 'Sozopol', 'Belogradchik', 'Perushtitsa', 'Zlatitsa', 'Strazhitsa', 'Krumovgrad', 'Kameno', 'Dalgopol', 'Vetovo', 'Suvorovo', 'Dolni Dabnik', 'Dolna Banya', 'Pravets', 'Nedelino', 'Polski Trambesh', 'Trastenik', 'Bratsigovo', 'Koynare', 'Godech', 'Slavyanovo', 'Dve Mogili', 'Kostandovo', 'Debelets', 'Strelcha', 'Sapareva Banya', 'Ignatievo', 'Smyadovo', 'Breznik', 'Sveti Vlas', 'Nikopol', 'Shivachevo', 'Belovo', 'Tsar Kaloyan', 'Ivaylovgrad', 'Valchedram', 'Marten', 'Glodzhevo', 'Sarnitsa', 'Letnitsa', 'Varbitsa', 'Iskar', 'Ardino', 'Shabla', 'Rudozem', 'Vetren', 'Kresna', 'Banya', 'Batak', 'Maglizh', 'Valchi Dol', 'Gulyantsi', 'Dragoman', 'Zavet', 'Kran', 'Miziya', 'Primorsko', 'Sungurlare', 'Dolna Mitropoliya', 'Krivodol', 'Kula', 'Kalofer', 'Slivo Pole', 'Kaspichan', 'Apriltsi', 'Belitsa', 'Roman', 'Dzhebel', 'Dolna Oryahovitsa', 'Buhovo', 'Gurkovo', 'Pavel Banya', 'Nikolaevo', 'Yablanitsa', 'Kableshkovo', 'Opaka', 'Rila', 'Ugarchin', 'Dunavtsi', 'Dobrinishte', 'Hadzhidimovo', 'Bregovo', 'Byala Cherkva', 'Zlataritsa', 'Kocherinovo', 'Dospat', 'Tran', 'Sadovo', 'Laki', 'Koprivshtitsa', 'Malko Tarnovo', 'Loznitsa', 'Obzor', 'Kilifarevo', 'Borovo', 'Batanovtsi', 'Chernomorets', 'Aheloy', 'Byala', 'Pordim', 'Suhindol', 'Merichleri', 'Glavinitsa', 'Chiprovtsi', 'Kermen', 'Brezovo', 'Plachkovtsi', 'Zemen', 'Balgarovo', 'Alfatar', 'Boychinovtsi', 'Gramada', 'Senovo', 'Momin Prohod', 'Kaolinovo', 'Shipka', 'Antonovo', 'Ahtopol', 'Boboshevo', 'Bolyarovo', 'Brusartsi', 'Klisura', 'Dimovo', 'Kiten', 'Pliska', 'Madzharovo', 'Melnik' + 'Sofia', 'Plovdiv', 'Varna', 'Burgas', 'Ruse', 'Stara Zagora', 'Pleven', 'Dobrich', 'Sliven', 'Shumen', 'Pernik', 'Haskovo', 'Yambol', 'Pazardzhik', 'Blagoevgrad', 'Veliko Tarnovo', 'Vratsa', 'Gabrovo', 'Asenovgrad', 'Vidin', 'Kazanlak', 'Kyustendil', 'Kardzhali', 'Montana', 'Dimitrovgrad', 'Targovishte', 'Lovech', 'Silistra', 'Dupnitsa', 'Svishtov', 'Razgrad', 'Gorna Oryahovitsa', 'Smolyan', 'Petrich', 'Sandanski', 'Samokov', 'Sevlievo', 'Lom', 'Karlovo', 'Velingrad', 'Nova Zagora', 'Troyan', 'Aytos', 'Botevgrad', 'Gotse Delchev', 'Peshtera', 'Harmanli', 'Karnobat', 'Svilengrad', 'Panagyurishte', 'Chirpan', 'Popovo', 'Rakovski', 'Radomir', 'Novi Iskar', 'Kozloduy', 'Parvomay', 'Berkovitsa', 'Cherven Bryag', 'Pomorie', 'Ihtiman', 'Radnevo', 'Provadiya', 'Novi Pazar', 'Razlog', 'Byala Slatina', 'Nesebar', 'Balchik', 'Kostinbrod', 'Stamboliyski', 'Kavarna', 'Knezha', 'Pavlikeni', 'Mezdra', 'Etropole', 'Levski', 'Teteven', 'Elhovo', 'Bankya', 'Tryavna', 'Lukovit', 'Tutrakan', 'Sredets', 'Sopot', 'Byala', 'Veliki Preslav', 'Isperih', 'Belene', 'Omurtag', 'Bansko', 'Krichim', 'Galabovo', 'Devnya', 'Septemvri', 'Rakitovo', 'Lyaskovets', 'Svoge', 'Aksakovo', 'Kubrat', 'Dryanovo', 'Beloslav', 'Pirdop', 'Lyubimets', 'Momchilgrad', 'Slivnitsa', 'Hisarya', 'Zlatograd', 'Kostenets', 'Devin', 'General Toshevo', 'Simeonovgrad', 'Simitli', 'Elin Pelin', 'Dolni Chiflik', 'Tervel', 'Dulovo', 'Varshets', 'Kotel', 'Madan', 'Straldzha', 'Saedinenie', 'Bobov Dol', 'Tsarevo', 'Kuklen', 'Tvarditsa', 'Yakoruda', 'Elena', 'Topolovgrad', 'Bozhurishte', 'Chepelare', 'Oryahovo', 'Sozopol', 'Belogradchik', 'Perushtitsa', 'Zlatitsa', 'Strazhitsa', 'Krumovgrad', 'Kameno', 'Dalgopol', 'Vetovo', 'Suvorovo', 'Dolni Dabnik', 'Dolna Banya', 'Pravets', 'Nedelino', 'Polski Trambesh', 'Trastenik', 'Bratsigovo', 'Koynare', 'Godech', 'Slavyanovo', 'Dve Mogili', 'Kostandovo', 'Debelets', 'Strelcha', 'Sapareva Banya', 'Ignatievo', 'Smyadovo', 'Breznik', 'Sveti Vlas', 'Nikopol', 'Shivachevo', 'Belovo', 'Tsar Kaloyan', 'Ivaylovgrad', 'Valchedram', 'Marten', 'Glodzhevo', 'Sarnitsa', 'Letnitsa', 'Varbitsa', 'Iskar', 'Ardino', 'Shabla', 'Rudozem', 'Vetren', 'Kresna', 'Banya', 'Batak', 'Maglizh', 'Valchi Dol', 'Gulyantsi', 'Dragoman', 'Zavet', 'Kran', 'Miziya', 'Primorsko', 'Sungurlare', 'Dolna Mitropoliya', 'Krivodol', 'Kula', 'Kalofer', 'Slivo Pole', 'Kaspichan', 'Apriltsi', 'Belitsa', 'Roman', 'Dzhebel', 'Dolna Oryahovitsa', 'Buhovo', 'Gurkovo', 'Pavel Banya', 'Nikolaevo', 'Yablanitsa', 'Kableshkovo', 'Opaka', 'Rila', 'Ugarchin', 'Dunavtsi', 'Dobrinishte', 'Hadzhidimovo', 'Bregovo', 'Byala Cherkva', 'Zlataritsa', 'Kocherinovo', 'Dospat', 'Tran', 'Sadovo', 'Laki', 'Koprivshtitsa', 'Malko Tarnovo', 'Loznitsa', 'Obzor', 'Kilifarevo', 'Borovo', 'Batanovtsi', 'Chernomorets', 'Aheloy', 'Pordim', 'Suhindol', 'Merichleri', 'Glavinitsa', 'Chiprovtsi', 'Kermen', 'Brezovo', 'Plachkovtsi', 'Zemen', 'Balgarovo', 'Alfatar', 'Boychinovtsi', 'Gramada', 'Senovo', 'Momin Prohod', 'Kaolinovo', 'Shipka', 'Antonovo', 'Ahtopol', 'Boboshevo', 'Bolyarovo', 'Brusartsi', 'Klisura', 'Dimovo', 'Kiten', 'Pliska', 'Madzharovo', 'Melnik' ]; } public selectionChanging() { } @@ -997,9 +997,11 @@ class AutocompleteComponent { [igxAutocomplete]='townsPanel' #textarea> - - {{town}} - + @for (town of towns | startsWith:townSelected; track town+$index) { + + {{town}} + + } `, imports: [ FormsModule, @@ -1008,7 +1010,6 @@ class AutocompleteComponent { IgxDropDownComponent, IgxDropDownItemComponent, IgxAutocompletePipeStartsWith, - NgFor ] }) class AutocompleteInputComponent extends AutocompleteComponent { @@ -1028,9 +1029,11 @@ class AutocompleteInputComponent extends AutocompleteComponent { clear - - {{town}} - + @for (town of towns | startsWith:townSelected; track town+$index) { + + {{town}} + + } @@ -1048,7 +1051,6 @@ class AutocompleteInputComponent extends AutocompleteComponent { IgxIconComponent, IgxAutocompleteDirective, IgxAutocompletePipeStartsWith, - NgFor ] }) @@ -1065,7 +1067,7 @@ class AutocompleteFormComponent { constructor(fb: UntypedFormBuilder) { this.towns = [ - 'Sofia', 'Plovdiv', 'Varna', 'Burgas', 'Ruse', 'Stara Zagora', 'Pleven', 'Dobrich', 'Sliven', 'Shumen', 'Pernik', 'Haskovo', 'Yambol', 'Pazardzhik', 'Blagoevgrad', 'Veliko Tarnovo', 'Vratsa', 'Gabrovo', 'Asenovgrad', 'Vidin', 'Kazanlak', 'Kyustendil', 'Kardzhali', 'Montana', 'Dimitrovgrad', 'Targovishte', 'Lovech', 'Silistra', 'Dupnitsa', 'Svishtov', 'Razgrad', 'Gorna Oryahovitsa', 'Smolyan', 'Petrich', 'Sandanski', 'Samokov', 'Sevlievo', 'Lom', 'Karlovo', 'Velingrad', 'Nova Zagora', 'Troyan', 'Aytos', 'Botevgrad', 'Gotse Delchev', 'Peshtera', 'Harmanli', 'Karnobat', 'Svilengrad', 'Panagyurishte', 'Chirpan', 'Popovo', 'Rakovski', 'Radomir', 'Novi Iskar', 'Kozloduy', 'Parvomay', 'Berkovitsa', 'Cherven Bryag', 'Pomorie', 'Ihtiman', 'Radnevo', 'Provadiya', 'Novi Pazar', 'Razlog', 'Byala Slatina', 'Nesebar', 'Balchik', 'Kostinbrod', 'Stamboliyski', 'Kavarna', 'Knezha', 'Pavlikeni', 'Mezdra', 'Etropole', 'Levski', 'Teteven', 'Elhovo', 'Bankya', 'Tryavna', 'Lukovit', 'Tutrakan', 'Sredets', 'Sopot', 'Byala', 'Veliki Preslav', 'Isperih', 'Belene', 'Omurtag', 'Bansko', 'Krichim', 'Galabovo', 'Devnya', 'Septemvri', 'Rakitovo', 'Lyaskovets', 'Svoge', 'Aksakovo', 'Kubrat', 'Dryanovo', 'Beloslav', 'Pirdop', 'Lyubimets', 'Momchilgrad', 'Slivnitsa', 'Hisarya', 'Zlatograd', 'Kostenets', 'Devin', 'General Toshevo', 'Simeonovgrad', 'Simitli', 'Elin Pelin', 'Dolni Chiflik', 'Tervel', 'Dulovo', 'Varshets', 'Kotel', 'Madan', 'Straldzha', 'Saedinenie', 'Bobov Dol', 'Tsarevo', 'Kuklen', 'Tvarditsa', 'Yakoruda', 'Elena', 'Topolovgrad', 'Bozhurishte', 'Chepelare', 'Oryahovo', 'Sozopol', 'Belogradchik', 'Perushtitsa', 'Zlatitsa', 'Strazhitsa', 'Krumovgrad', 'Kameno', 'Dalgopol', 'Vetovo', 'Suvorovo', 'Dolni Dabnik', 'Dolna Banya', 'Pravets', 'Nedelino', 'Polski Trambesh', 'Trastenik', 'Bratsigovo', 'Koynare', 'Godech', 'Slavyanovo', 'Dve Mogili', 'Kostandovo', 'Debelets', 'Strelcha', 'Sapareva Banya', 'Ignatievo', 'Smyadovo', 'Breznik', 'Sveti Vlas', 'Nikopol', 'Shivachevo', 'Belovo', 'Tsar Kaloyan', 'Ivaylovgrad', 'Valchedram', 'Marten', 'Glodzhevo', 'Sarnitsa', 'Letnitsa', 'Varbitsa', 'Iskar', 'Ardino', 'Shabla', 'Rudozem', 'Vetren', 'Kresna', 'Banya', 'Batak', 'Maglizh', 'Valchi Dol', 'Gulyantsi', 'Dragoman', 'Zavet', 'Kran', 'Miziya', 'Primorsko', 'Sungurlare', 'Dolna Mitropoliya', 'Krivodol', 'Kula', 'Kalofer', 'Slivo Pole', 'Kaspichan', 'Apriltsi', 'Belitsa', 'Roman', 'Dzhebel', 'Dolna Oryahovitsa', 'Buhovo', 'Gurkovo', 'Pavel Banya', 'Nikolaevo', 'Yablanitsa', 'Kableshkovo', 'Opaka', 'Rila', 'Ugarchin', 'Dunavtsi', 'Dobrinishte', 'Hadzhidimovo', 'Bregovo', 'Byala Cherkva', 'Zlataritsa', 'Kocherinovo', 'Dospat', 'Tran', 'Sadovo', 'Laki', 'Koprivshtitsa', 'Malko Tarnovo', 'Loznitsa', 'Obzor', 'Kilifarevo', 'Borovo', 'Batanovtsi', 'Chernomorets', 'Aheloy', 'Byala', 'Pordim', 'Suhindol', 'Merichleri', 'Glavinitsa', 'Chiprovtsi', 'Kermen', 'Brezovo', 'Plachkovtsi', 'Zemen', 'Balgarovo', 'Alfatar', 'Boychinovtsi', 'Gramada', 'Senovo', 'Momin Prohod', 'Kaolinovo', 'Shipka', 'Antonovo', 'Ahtopol', 'Boboshevo', 'Bolyarovo', 'Brusartsi', 'Klisura', 'Dimovo', 'Kiten', 'Pliska', 'Madzharovo', 'Melnik' + 'Sofia', 'Plovdiv', 'Varna', 'Burgas', 'Ruse', 'Stara Zagora', 'Pleven', 'Dobrich', 'Sliven', 'Shumen', 'Pernik', 'Haskovo', 'Yambol', 'Pazardzhik', 'Blagoevgrad', 'Veliko Tarnovo', 'Vratsa', 'Gabrovo', 'Asenovgrad', 'Vidin', 'Kazanlak', 'Kyustendil', 'Kardzhali', 'Montana', 'Dimitrovgrad', 'Targovishte', 'Lovech', 'Silistra', 'Dupnitsa', 'Svishtov', 'Razgrad', 'Gorna Oryahovitsa', 'Smolyan', 'Petrich', 'Sandanski', 'Samokov', 'Sevlievo', 'Lom', 'Karlovo', 'Velingrad', 'Nova Zagora', 'Troyan', 'Aytos', 'Botevgrad', 'Gotse Delchev', 'Peshtera', 'Harmanli', 'Karnobat', 'Svilengrad', 'Panagyurishte', 'Chirpan', 'Popovo', 'Rakovski', 'Radomir', 'Novi Iskar', 'Kozloduy', 'Parvomay', 'Berkovitsa', 'Cherven Bryag', 'Pomorie', 'Ihtiman', 'Radnevo', 'Provadiya', 'Novi Pazar', 'Razlog', 'Byala Slatina', 'Nesebar', 'Balchik', 'Kostinbrod', 'Stamboliyski', 'Kavarna', 'Knezha', 'Pavlikeni', 'Mezdra', 'Etropole', 'Levski', 'Teteven', 'Elhovo', 'Bankya', 'Tryavna', 'Lukovit', 'Tutrakan', 'Sredets', 'Sopot', 'Byala', 'Veliki Preslav', 'Isperih', 'Belene', 'Omurtag', 'Bansko', 'Krichim', 'Galabovo', 'Devnya', 'Septemvri', 'Rakitovo', 'Lyaskovets', 'Svoge', 'Aksakovo', 'Kubrat', 'Dryanovo', 'Beloslav', 'Pirdop', 'Lyubimets', 'Momchilgrad', 'Slivnitsa', 'Hisarya', 'Zlatograd', 'Kostenets', 'Devin', 'General Toshevo', 'Simeonovgrad', 'Simitli', 'Elin Pelin', 'Dolni Chiflik', 'Tervel', 'Dulovo', 'Varshets', 'Kotel', 'Madan', 'Straldzha', 'Saedinenie', 'Bobov Dol', 'Tsarevo', 'Kuklen', 'Tvarditsa', 'Yakoruda', 'Elena', 'Topolovgrad', 'Bozhurishte', 'Chepelare', 'Oryahovo', 'Sozopol', 'Belogradchik', 'Perushtitsa', 'Zlatitsa', 'Strazhitsa', 'Krumovgrad', 'Kameno', 'Dalgopol', 'Vetovo', 'Suvorovo', 'Dolni Dabnik', 'Dolna Banya', 'Pravets', 'Nedelino', 'Polski Trambesh', 'Trastenik', 'Bratsigovo', 'Koynare', 'Godech', 'Slavyanovo', 'Dve Mogili', 'Kostandovo', 'Debelets', 'Strelcha', 'Sapareva Banya', 'Ignatievo', 'Smyadovo', 'Breznik', 'Sveti Vlas', 'Nikopol', 'Shivachevo', 'Belovo', 'Tsar Kaloyan', 'Ivaylovgrad', 'Valchedram', 'Marten', 'Glodzhevo', 'Sarnitsa', 'Letnitsa', 'Varbitsa', 'Iskar', 'Ardino', 'Shabla', 'Rudozem', 'Vetren', 'Kresna', 'Banya', 'Batak', 'Maglizh', 'Valchi Dol', 'Gulyantsi', 'Dragoman', 'Zavet', 'Kran', 'Miziya', 'Primorsko', 'Sungurlare', 'Dolna Mitropoliya', 'Krivodol', 'Kula', 'Kalofer', 'Slivo Pole', 'Kaspichan', 'Apriltsi', 'Belitsa', 'Roman', 'Dzhebel', 'Dolna Oryahovitsa', 'Buhovo', 'Gurkovo', 'Pavel Banya', 'Nikolaevo', 'Yablanitsa', 'Kableshkovo', 'Opaka', 'Rila', 'Ugarchin', 'Dunavtsi', 'Dobrinishte', 'Hadzhidimovo', 'Bregovo', 'Byala Cherkva', 'Zlataritsa', 'Kocherinovo', 'Dospat', 'Tran', 'Sadovo', 'Laki', 'Koprivshtitsa', 'Malko Tarnovo', 'Loznitsa', 'Obzor', 'Kilifarevo', 'Borovo', 'Batanovtsi', 'Chernomorets', 'Aheloy', 'Pordim', 'Suhindol', 'Merichleri', 'Glavinitsa', 'Chiprovtsi', 'Kermen', 'Brezovo', 'Plachkovtsi', 'Zemen', 'Balgarovo', 'Alfatar', 'Boychinovtsi', 'Gramada', 'Senovo', 'Momin Prohod', 'Kaolinovo', 'Shipka', 'Antonovo', 'Ahtopol', 'Boboshevo', 'Bolyarovo', 'Brusartsi', 'Klisura', 'Dimovo', 'Kiten', 'Pliska', 'Madzharovo', 'Melnik' ]; this.reactiveForm = fb.group({ towns: ['', Validators.required] diff --git a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.spec.ts b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.spec.ts index cb0001c7d44..de893b9bd94 100644 --- a/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.spec.ts @@ -15,7 +15,6 @@ import { IgxDragIgnoreDirective } from './drag-drop.directive'; import { IgxIconComponent } from '../../icon/icon.component'; -import { NgFor } from '@angular/common'; describe('General igxDrag/igxDrop', () => { let fix: ComponentFixture; @@ -2108,21 +2107,25 @@ class TestDragDropStrategiesComponent extends TestDragDropLinkedSingleComponent drag_indicator Movies list -
-
- drag_indicator - {{category.text}} -
-
+ @for (category of categoriesNotes; track category) { +
drag_indicator - {{note.text}} + {{category.text}}
+ @for (note of getCategoryMovies(category.text); track note) { +
+
+ drag_indicator + {{note.text}} +
+
+ }
-
+ }
`, - imports: [NgFor, IgxIconComponent, IgxDragDirective, IgxDragHandleDirective] + imports: [IgxIconComponent, IgxDragDirective, IgxDragHandleDirective] }) class TestDragDropNestedComponent extends TestDragDropComponent { public categoriesNotes = [ diff --git a/projects/igniteui-angular/src/lib/directives/filter/filter.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/filter/filter.directive.spec.ts index d8ea891bfa5..49ddf007b6f 100644 --- a/projects/igniteui-angular/src/lib/directives/filter/filter.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/filter/filter.directive.spec.ts @@ -5,7 +5,6 @@ import { IgxListComponent } from '../../list/list.component'; import { IgxFilterDirective, IgxFilterOptions, IgxFilterPipe } from './filter.directive'; import { configureTestSuite } from '../../test-utils/configure-suite'; -import { NgFor } from '@angular/common'; describe('Filter', () => { configureTestSuite(); @@ -214,11 +213,11 @@ class DeclarativeListTestComponent { @Component({ template: ` - - {{item.text}} - + @for (item of dataSourceItems | igxFilter: fo; track item) { + {{item.text}} + } `, - imports: [IgxListComponent, IgxListItemComponent, IgxFilterPipe, NgFor] + imports: [IgxListComponent, IgxListItemComponent, IgxFilterPipe] }) class DynamicListTestComponent { @ViewChild(IgxListComponent, { static: true }) public list: IgxListComponent; diff --git a/projects/igniteui-angular/src/lib/directives/focus-trap/focus-trap.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/focus-trap/focus-trap.directive.spec.ts index bfd3f55b919..e960b7b34e6 100644 --- a/projects/igniteui-angular/src/lib/directives/focus-trap/focus-trap.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/focus-trap/focus-trap.directive.spec.ts @@ -6,7 +6,6 @@ import { IgxFocusTrapDirective } from './focus-trap.directive'; import { configureTestSuite } from '../../test-utils/configure-suite'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { UIInteractions } from '../../test-utils/ui-interactions.spec'; -import { NgIf } from '@angular/common'; describe('igxFocusTrap', () => { configureTestSuite(); @@ -171,12 +170,20 @@ describe('igxFocusTrap', () => { template: `

-
+ @if (showInput) { + + } +

-
- + @if (showInput) { + + } +
+ @if (showButton) { + + }
`, - imports: [IgxFocusTrapDirective, NgIf] + imports: [IgxFocusTrapDirective] }) class TrapFocusTestComponent { public showInput = true; diff --git a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts index abc46f747e0..cea8758dec5 100644 --- a/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/for-of/for_of.directive.spec.ts @@ -1,4 +1,4 @@ -import { AsyncPipe, NgClass, NgFor, NgForOfContext, NgIf } from '@angular/common'; +import { AsyncPipe, NgClass, NgForOfContext } from '@angular/common'; import { AfterViewInit, ChangeDetectorRef, @@ -1514,22 +1514,24 @@ export class VerticalVirtualComponent extends VirtualComponent { @Component({ template: ` -
- -
-
{{rowData['1']}}
-
{{rowData['2']}}
-
{{rowData['3']}}
-
{{rowData['4']}}
-
{{rowData['5']}}
-
- -
+ @if (exists) { +
+ +
+
{{rowData['1']}}
+
{{rowData['2']}}
+
{{rowData['3']}}
+
{{rowData['4']}}
+
{{rowData['5']}}
+
+ +
+ } `, - imports: [TestIgxForOfDirective, IgxForOfDirective, NgIf] + imports: [TestIgxForOfDirective, IgxForOfDirective] }) export class VerticalVirtualDestroyComponent extends VerticalVirtualComponent { public exists = true; @@ -1551,7 +1553,8 @@ export class VerticalVirtualDestroyComponent extends VerticalVirtualComponent { -
+ @if (exists) { +
+ } `, - imports: [IgxForOfDirective, NgIf] + imports: [IgxForOfDirective] }) export class VerticalVirtualCreateComponent extends VerticalVirtualComponent { @ViewChild('scrollContainer2', { read: IgxForOfDirective, static: false }) @@ -1585,18 +1589,20 @@ export class VerticalVirtualCreateComponent extends VerticalVirtualComponent { [style.overflow]='"hidden"' [style.float]='"left"' [style.position]='"relative"'> -
- + @for (rowData of data; track rowData) { +
+
{{rowData[col.field]}}
- -
+ +
+ }
`, - imports: [TestIgxForOfDirective, IgxForOfDirective, NgFor] + imports: [TestIgxForOfDirective, IgxForOfDirective] }) export class HorizontalVirtualComponent extends VirtualComponent { public override width = '800px'; diff --git a/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts b/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts index 468cb51d5c9..b8c3c2391f6 100644 --- a/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/directives/radio/radio-group.directive.spec.ts @@ -7,7 +7,6 @@ import { configureTestSuite } from '../../test-utils/configure-suite'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { By } from '@angular/platform-browser'; import { IgxRadioComponent } from '../../radio/radio.component'; -import { NgFor } from '@angular/common'; describe('IgxRadioGroupDirective', () => { configureTestSuite(); @@ -281,12 +280,14 @@ class RadioGroupSimpleComponent { @Component({ template: ` - - {{item}} - - -`, - imports: [IgxRadioComponent, IgxRadioGroupDirective, NgFor] + @for (item of ['Foo', 'Bar', 'Baz']; track item) { + + {{item}} + + } + + `, + imports: [IgxRadioComponent, IgxRadioGroupDirective] }) class RadioGroupComponent { @ViewChild('radioGroup', { read: IgxRadioGroupDirective, static: true }) public radioGroup: IgxRadioGroupDirective; @@ -294,12 +295,14 @@ class RadioGroupComponent { @Component({ template: ` - - {{item}} - - -`, - imports: [IgxRadioComponent, IgxRadioGroupDirective, NgFor] + @for (item of ['Foo', 'Bar', 'Baz']; track item) { + + {{item}} + + } + + `, + imports: [IgxRadioComponent, IgxRadioGroupDirective] }) class RadioGroupRequiredComponent { @ViewChild('radioGroup', { read: IgxRadioGroupDirective, static: true }) public radioGroup: IgxRadioGroupDirective; @@ -334,12 +337,14 @@ class RadioGroupOnPushComponent { @Component({ template: ` - - {{item}} - - -`, - imports: [IgxRadioComponent, IgxRadioGroupDirective, NgFor, FormsModule] + @for (item of seasons; track item) { + + {{item}} + + } + + `, + imports: [IgxRadioComponent, IgxRadioGroupDirective, FormsModule] }) class RadioGroupWithModelComponent { @ViewChild('radioGroupSeasons', { read: IgxRadioGroupDirective, static: true }) public radioGroup: IgxRadioGroupDirective; @@ -358,13 +363,15 @@ class RadioGroupWithModelComponent { template: `
- - {{item}} - + @for (item of seasons; track item) { + + {{item}} + + }
`, - imports: [IgxRadioComponent, IgxRadioGroupDirective, NgFor, ReactiveFormsModule] + imports: [IgxRadioComponent, IgxRadioGroupDirective, ReactiveFormsModule] }) class RadioGroupReactiveFormsComponent { public seasons = [ @@ -410,13 +417,15 @@ class RadioGroupReactiveFormsComponent { template: `
-
-

{{ choice }}

-
+ @for (choice of choices; track choice) { +
+

{{ choice }}

+
+ }
`, - imports: [IgxRadioComponent, IgxRadioGroupDirective, NgFor, ReactiveFormsModule] + imports: [IgxRadioComponent, IgxRadioGroupDirective, ReactiveFormsModule] }) class RadioGroupDeepProjectionComponent { diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html index 5d582b8c918..ea1e07c9c46 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.html @@ -4,10 +4,10 @@ (opening)="onToggleOpening($event)" (opened)="onToggleOpened()" (closing)="onToggleClosing($event)" (closed)="onToggleClosed()">
- + [style.height]="height" + [style.maxHeight]="maxHeight"> + @if (!collapsed) { - + }
diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts index 62440af898b..6ce79bc3fc3 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.spec.ts @@ -16,7 +16,6 @@ import { IgxForOfDirective } from '../directives/for-of/for_of.directive'; import { IgxDropDownItemBaseDirective } from './drop-down-item.base'; import { IgxSelectionAPIService } from '../core/selection'; import { IgxButtonDirective } from '../directives/button/button.directive'; -import { NgFor } from '@angular/common'; import { ConnectedPositioningStrategy, HorizontalAlignment, OverlaySettings, VerticalAlignment } from '../services/public_api'; const CSS_CLASS_DROP_DOWN_BASE = 'igx-drop-down'; @@ -1298,12 +1297,14 @@ describe('IgxDropDown ', () => { template: ` - - {{item.field}} - + [allowItemsFocus]="true" style="--ig-size: var(--ig-size-medium);"> + @for (item of items; track item) { + + {{item.field}} + + } `, - imports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, NgFor] + imports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective] }) class IgxDropDownTestComponent { @@ -1337,17 +1338,21 @@ class IgxDropDownTestComponent { template: ` - - {{ item.field }} - + @for (item of items; track item) { + + {{ item.field }} + + } - - {{ item.field }} - + @for (item of items; track item) { + + {{ item.field }} + + } `, - imports: [IgxDropDownComponent, IgxDropDownItemComponent, NgFor] + imports: [IgxDropDownComponent, IgxDropDownItemComponent] }) class DoubleIgxDropDownComponent implements OnInit { @@ -1396,13 +1401,15 @@ class DoubleIgxDropDownComponent implements OnInit { - - {{ item.field }} - + (opening)="onToggleOpening()" (opened)="onToggleOpened()" + (closing)="onToggleClosing()" (closed)="onToggleClosed()" [width]="'400px'" [height]="'400px'"> + @for (item of items; track item) { + + {{ item.field }} + + } `, - imports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent, NgFor] + imports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxTabsComponent, IgxTabItemComponent, IgxTabHeaderComponent, IgxTabContentComponent] }) class IgxDropDownAnchorTestComponent { @ViewChild(IgxTabsComponent, { static: true }) @@ -1434,11 +1441,13 @@ class IgxDropDownAnchorTestComponent { @Component({ template: ` - - {{ item.field }} - + @for (item of items; track item) { + + {{ item.field }} + + } `, - imports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, NgFor] + imports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective] }) class InputWithDropDownDirectiveComponent { @ViewChild(IgxDropDownComponent, { read: IgxDropDownComponent, static: true }) @@ -1457,13 +1466,17 @@ class InputWithDropDownDirectiveComponent { @Component({ template: ` - - - {{ child.name }} - - + @for (parent of data; track parent) { + + @for (child of parent.children; track child) { + + {{ child.name }} + + } + + } `, - imports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownGroupComponent, NgFor] + imports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownGroupComponent] }) class GroupDropDownComponent { @ViewChild(IgxDropDownComponent, { read: IgxDropDownComponent, static: true }) diff --git a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts index d40ae93e004..30d8ccab1eb 100644 --- a/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts +++ b/projects/igniteui-angular/src/lib/drop-down/drop-down.component.ts @@ -30,7 +30,7 @@ import { IgxDropDownItemBaseDirective } from './drop-down-item.base'; import { IgxForOfToken } from '../directives/for-of/for_of.directive'; import { take } from 'rxjs/operators'; import { OverlaySettings } from '../services/overlay/utilities'; -import { DOCUMENT, NgIf } from '@angular/common'; +import { DOCUMENT } from '@angular/common'; import { ConnectedPositioningStrategy } from '../services/public_api'; /** @@ -54,7 +54,7 @@ import { ConnectedPositioningStrategy } from '../services/public_api'; selector: 'igx-drop-down', templateUrl: './drop-down.component.html', providers: [{ provide: IGX_DROPDOWN_BASE, useExisting: IgxDropDownComponent }], - imports: [IgxToggleDirective, NgIf] + imports: [IgxToggleDirective] }) export class IgxDropDownComponent extends IgxDropDownBaseDirective implements IDropDownBase, OnChanges, AfterViewInit, OnDestroy { /** diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.html b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.html index abdf2d1d6bf..685d574bce9 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.html +++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.html @@ -6,12 +6,15 @@
- - - + @if (iconTemplate) { + + } + @if (!iconTemplate) { + + + }
diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts index 9f6649582ad..a3702617f75 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel-header.component.ts @@ -17,7 +17,6 @@ import { IgxExpansionPanelIconDirective } from './expansion-panel.directives'; import { IGX_EXPANSION_PANEL_COMPONENT, IgxExpansionPanelBase, IExpansionPanelCancelableEventArgs } from './expansion-panel.common'; import { mkenum } from '../core/utils'; import { IgxIconComponent } from '../icon/icon.component'; -import { NgIf } from '@angular/common'; /** * @hidden @@ -33,7 +32,7 @@ export type ExpansionPanelHeaderIconPosition = (typeof ExpansionPanelHeaderIconP @Component({ selector: 'igx-expansion-panel-header', templateUrl: 'expansion-panel-header.component.html', - imports: [NgIf, IgxIconComponent] + imports: [IgxIconComponent] }) export class IgxExpansionPanelHeaderComponent { /** diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.html b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.html index 78902268be3..da28c2f0e1e 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.html +++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.html @@ -1,2 +1,4 @@ - +@if (!collapsed) { + +} diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts index f2f643adb21..dbbf42b64ae 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.component.ts @@ -22,7 +22,6 @@ import { IGX_EXPANSION_PANEL_COMPONENT } from './expansion-panel.common'; import { ToggleAnimationPlayer, ToggleAnimationSettings } from './toggle-animation-component'; -import { NgIf } from '@angular/common'; let NEXT_ID = 0; @@ -30,7 +29,7 @@ let NEXT_ID = 0; selector: 'igx-expansion-panel', templateUrl: 'expansion-panel.component.html', providers: [{ provide: IGX_EXPANSION_PANEL_COMPONENT, useExisting: IgxExpansionPanelComponent }], - imports: [NgIf] + imports: [] }) export class IgxExpansionPanelComponent extends ToggleAnimationPlayer implements IgxExpansionPanelBase, AfterContentInit { /** diff --git a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts index 5b8d1fb1c26..c743e019df5 100644 --- a/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts +++ b/projects/igniteui-angular/src/lib/expansion-panel/expansion-panel.spec.ts @@ -11,7 +11,6 @@ import { By } from '@angular/platform-browser'; import { IgxExpansionPanelBodyComponent } from './expansion-panel-body.component'; import { IgxListComponent } from '../list/list.component'; import { IgxListItemComponent } from '../list/list-item.component'; -import { NgIf } from '@angular/common'; import { IGX_EXPANSION_PANEL_DIRECTIVES } from './public_api'; const CSS_CLASS_EXPANSION_PANEL = 'igx-expansion-panel'; @@ -1364,19 +1363,27 @@ export class IgxExpansionPanelListComponent { - - Example Title - Example Description - - TEST_ICON - - - - Example body - + @if (showHeader) { + + @if (showTitle) { + Example Title + } + Example Description + @if (customIcon) { + + TEST_ICON + + } + + } + @if (showBody) { + + Example body + + } `, - imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelBodyComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelIconDirective, NgIf] + imports: [IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxExpansionPanelBodyComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelDescriptionDirective, IgxExpansionPanelIconDirective] }) export class IgxExpansionPanelSampleComponent { @ViewChild(IgxExpansionPanelHeaderComponent, { read: IgxExpansionPanelHeaderComponent }) diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.html b/projects/igniteui-angular/src/lib/grids/cell.component.html index 47531b44d61..b6f3f84656c 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/cell.component.html @@ -1,37 +1,38 @@ - {{ grid.resourceStrings.igx_grid_pinned_row_indicator }} + @if (displayPinnedChip) { + {{ grid.resourceStrings.igx_grid_pinned_row_indicator }} + } -
{{ + @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) { +
{{ formatter ? (value | columnFormatter:formatter:rowData:columnData) : column.dataType === "number" @@ -44,48 +45,57 @@ ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value }}
- - - + } + @if (column.dataType === 'boolean' && !this.formatter) { + + + } + @if (column.dataType === 'image') { + + } -
{{ - !isEmptyAddRowCell ? value : (column.header || column.field) - }}
+ @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) { +
{{ + !isEmptyAddRowCell ? value : (column.header || column.field) + }}
+ } - - - - - - + @if (column.dataType === 'string' || column.dataType === 'image') { + + + + + + } + @if (column.dataType === 'number') { - - - - - - - - - - - - + } + @if (column.dataType === 'boolean') { + + + + } + @if (column.dataType === 'date') { + + + + + } + @if (column.dataType === 'time') { + + + + } + @if (column.dataType === 'dateTime') { - - + } + @if (column.dataType === 'currency') { - {{ currencyCodeSymbol }} + @if (grid.currencyPositionLeft) { + {{ currencyCodeSymbol }} + } - {{ currencyCodeSymbol }} + @if (!grid.currencyPositionLeft) { + {{ currencyCodeSymbol }} + } - - + } + @if (column.dataType === 'percent') { {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} - + } - +@if (isInvalid) {
- +} -
- {{grid.resourceStrings.igx_grid_required_validation_error}} -
-
- {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }} -
-
- {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }} -
-
- {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }} -
-
- {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }} -
-
- {{grid.resourceStrings.igx_grid_email_validation_error }} -
-
- {{grid.resourceStrings.igx_grid_pattern_validation_error}} -
+ @if (formGroup?.get(column?.field).errors?.['required']) { +
+ {{grid.resourceStrings.igx_grid_required_validation_error}} +
+ } + @if (formGroup?.get(column?.field).errors?.['minlength']) { +
+ {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }} +
+ } + @if (formGroup?.get(column?.field).errors?.['maxlength']) { +
+ {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }} +
+ } + @if (formGroup?.get(column?.field).errors?.['min']) { +
+ {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }} +
+ } + @if (formGroup?.get(column?.field).errors?.['max']) { +
+ {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }} +
+ } + @if (formGroup?.get(column?.field).errors?.['email']) { +
+ {{grid.resourceStrings.igx_grid_email_validation_error }} +
+ } + @if (formGroup?.get(column?.field).errors?.['pattern']) { +
+ {{grid.resourceStrings.igx_grid_pattern_validation_error}} +
+ } diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts index 53f64a97360..eaacd3064e5 100644 --- a/projects/igniteui-angular/src/lib/grids/cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/cell.component.ts @@ -19,7 +19,7 @@ AfterViewInit, booleanAttribute } from '@angular/core'; -import { formatPercent, NgIf, NgClass, NgTemplateOutlet, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe, getLocaleCurrencyCode, getCurrencySymbol } from '@angular/common'; +import { formatPercent, NgClass, NgTemplateOutlet, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe, getLocaleCurrencyCode, getCurrencySymbol } from '@angular/common'; import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms'; import { first, takeUntil, takeWhile } from 'rxjs/operators'; @@ -72,7 +72,6 @@ import { IgxChipComponent } from '../chips/chip.component'; templateUrl: './cell.component.html', providers: [HammerGesturesManager], imports: [ - NgIf, NgClass, NgTemplateOutlet, DecimalPipe, diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.html b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.html index 35455cf958d..071b64a2ac8 100644 --- a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.html +++ b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.html @@ -1,30 +1,37 @@
-

{{ title }}

+ @if (title) { +

{{ title }}

+ } - - - + @if (!hideFilter) { + + + + }
- - {{ column.header || column.field }} - + @for ( + column of $any(grid)?._columns + | columnActionEnabled:actionsDirective.actionEnabledColumnsFilter:pipeTrigger + | filterActionColumns:filterCriteria:pipeTrigger + | sortActionColumns:columnDisplayOrder:pipeTrigger; track column + ) { + + {{ column.header || column.field }} + + }
diff --git a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts index 2c2c6075c55..43c6c34b0dd 100644 --- a/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts +++ b/projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts @@ -9,7 +9,6 @@ import { IgxButtonDirective } from '../../directives/button/button.directive'; import { IgxInputDirective } from '../../directives/input/input.directive'; import { FormsModule } from '@angular/forms'; import { IgxInputGroupComponent } from '../../input-group/input-group.component'; -import { NgIf, NgFor } from '@angular/common'; let NEXT_ID = 0; /** @@ -21,7 +20,7 @@ let NEXT_ID = 0; @Component({ selector: 'igx-column-actions', templateUrl: './column-actions.component.html', - imports: [NgIf, IgxInputGroupComponent, FormsModule, IgxInputDirective, NgFor, IgxCheckboxComponent, IgxButtonDirective, IgxRippleDirective, forwardRef(() => IgxColumnActionEnabledPipe), forwardRef(() => IgxFilterActionColumnsPipe), forwardRef(() => IgxSortActionColumnsPipe)] + imports: [IgxInputGroupComponent, FormsModule, IgxInputDirective, IgxCheckboxComponent, IgxButtonDirective, IgxRippleDirective, forwardRef(() => IgxColumnActionEnabledPipe), forwardRef(() => IgxFilterActionColumnsPipe), forwardRef(() => IgxSortActionColumnsPipe)] }) export class IgxColumnActionsComponent implements DoCheck { diff --git a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts index 281b6ad7d93..9333d911c50 100644 --- a/projects/igniteui-angular/src/lib/grids/columns/column.component.ts +++ b/projects/igniteui-angular/src/lib/grids/columns/column.component.ts @@ -2182,8 +2182,11 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy grid._pinnedColumns.splice(args.insertAtIndex, 0, this); } else { // insert based only on root collection - rootPinnedCols.splice(args.insertAtIndex, 0, this); + if (this.level === 0) { + rootPinnedCols.splice(args.insertAtIndex, 0, this); + } let allPinned = []; + // FIX: this is duplicated on every step in the hierarchy.... // re-create hierarchy rootPinnedCols.forEach(group => { allPinned.push(group); diff --git a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html index 6ccad0ef851..eb11d0aaa6c 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.html @@ -1,36 +1,38 @@ -
- - - - +@if (grid) { +
+ + + + -
-
- -
-
- -
-
- -
-
-
+
+
+ +
+
+ +
+
+ +
+
+
+} diff --git a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts index 64b7ffe7735..3a733ddd475 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/advanced-filtering/advanced-filtering-dialog.component.ts @@ -12,7 +12,7 @@ import { GridResourceStringsEN } from '../../../core/i18n/grid-resources'; import { IFilteringExpressionsTree } from '../../../data-operations/filtering-expressions-tree'; import { IgxButtonDirective } from '../../../directives/button/button.directive'; import { IgxQueryBuilderHeaderComponent } from '../../../query-builder/query-builder-header.component'; -import { NgIf, NgClass } from '@angular/common'; +import { NgClass } from '@angular/common'; import { getCurrentResourceStrings } from '../../../core/i18n/resources'; import { QueryBuilderResourceStringsEN } from '../../../core/i18n/query-builder-resources'; @@ -30,7 +30,7 @@ import { QueryBuilderResourceStringsEN } from '../../../core/i18n/query-builder- @Component({ selector: 'igx-advanced-filtering-dialog', templateUrl: './advanced-filtering-dialog.component.html', - imports: [NgIf, IgxDragDirective, NgClass, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxDragHandleDirective, IgxButtonDirective] + imports: [IgxDragDirective, NgClass, IgxQueryBuilderComponent, IgxQueryBuilderHeaderComponent, IgxDragHandleDirective, IgxButtonDirective] }) export class IgxAdvancedFilteringDialogComponent implements AfterViewInit, OnDestroy { /** diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.html b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.html index f3b49671574..3fb62f3b3b1 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.html @@ -14,23 +14,28 @@ - - - - - - {{filteringService.getChipLabel(item.expression)}} - - - {{filteringService.getOperatorAsString(item.afterOperator)}} - + + @for (item of expressionsList; track item.expression; let last = $last; let index = $index) { + @if (isChipVisible(index)) { + + + + + {{filteringService.getChipLabel(item.expression)}} + + + } + @if (!last && isChipVisible(index + 1)) { + {{filteringService.getOperatorAsString(item.afterOperator)}} + } + }
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts index 620d99b1c5e..a2b08705437 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-cell.component.ts @@ -18,7 +18,7 @@ import { IgxChipsAreaComponent } from '../../../chips/chips-area.component'; import { IBaseChipEventArgs, IgxChipComponent } from '../../../chips/chip.component'; import { ColumnType } from '../../common/grid.interface'; import { IgxBadgeComponent } from '../../../badge/badge.component'; -import { NgFor, NgIf, NgClass, NgTemplateOutlet } from '@angular/common'; +import { NgClass, NgTemplateOutlet } from '@angular/common'; import { IgxPrefixDirective } from '../../../directives/prefix/prefix.directive'; import { IgxIconComponent } from '../../../icon/icon.component'; import { Size } from '../../common/enums'; @@ -35,8 +35,6 @@ import { Size } from '../../common/enums'; IgxChipComponent, IgxIconComponent, IgxPrefixDirective, - NgFor, - NgIf, NgClass, IgxBadgeComponent, NgTemplateOutlet diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html index 03728071432..48bf1c5c0a1 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.html @@ -1,13 +1,15 @@ - -
- - {{ translateCondition(condition) }} -
- + @for (condition of conditions; track condition) { + +
+ + {{ translateCondition(condition) }} +
+ + } @@ -34,22 +36,24 @@ (compositionend)="onCompositionEnd()" (keydown)="onInputKeyDown($event)" (keyup)="onInputKeyUp()"/> - - - - - - + @if (value || value === 0) { + + + + + + + } @@ -75,22 +79,24 @@ [igxDropDownItemNavigation]="inputGroupConditions"> - - - - - - + @if (value) { + + + + + + + } @@ -120,22 +126,24 @@ [igxDropDownItemNavigation]="inputGroupConditions"> - - - - - - + @if (value) { + + + + + + + } @@ -166,7 +174,8 @@ (click)="onInputClick()" (keydown)="onInputKeyDown($event)" (keyup)="onInputKeyUp()"/> - + @if (value || value === 0) { + + } - +@if (showArrows) { + +}
- - - - - - {{filteringService.getChipLabel(item.expression)}} - - - - - - {{filteringService.grid.resourceStrings.igx_grid_filter_operator_and}} - {{filteringService.grid.resourceStrings.igx_grid_filter_operator_or}} - - - + + + @for (item of expressionsList; track item.expression; let i = $index; let last = $last) { + + + + + {{filteringService.getChipLabel(item.expression)}} + + @if (!last) { + + + + {{filteringService.grid.resourceStrings.igx_grid_filter_operator_and}} + {{filteringService.grid.resourceStrings.igx_grid_filter_operator_or}} + + + } + + }
- +@if (showArrows) { + +}
- + @if (!isNarrowWidth) { - - + } + @if (isNarrowWidth) { - + }
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts index b0e905acb03..ef7ab4f3b0a 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/base/grid-filtering-row.component.ts @@ -43,7 +43,7 @@ import { IgxDropDownItemNavigationDirective } from '../../../drop-down/drop-down import { IgxPrefixDirective } from '../../../directives/prefix/prefix.directive'; import { IgxInputGroupComponent } from '../../../input-group/input-group.component'; import { IgxIconComponent } from '../../../icon/icon.component'; -import { NgFor, NgIf, NgTemplateOutlet, NgClass } from '@angular/common'; +import { NgTemplateOutlet, NgClass } from '@angular/common'; import { IgxIconButtonDirective } from '../../../directives/button/icon-button.directive'; import { Size } from '../../common/enums'; @@ -54,7 +54,7 @@ import { Size } from '../../common/enums'; changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-filtering-row', templateUrl: './grid-filtering-row.component.html', - imports: [NgFor, IgxDropDownComponent, IgxDropDownItemComponent, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxDropDownItemNavigationDirective, IgxInputDirective, NgIf, IgxSuffixDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, NgTemplateOutlet, IgxButtonDirective, NgClass, IgxRippleDirective, IgxIconButtonDirective] + imports: [IgxDropDownComponent, IgxDropDownItemComponent, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxInputGroupComponent, IgxPrefixDirective, IgxDropDownItemNavigationDirective, IgxInputDirective, IgxSuffixDirective, IgxDatePickerComponent, IgxPickerToggleComponent, IgxPickerClearComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, NgTemplateOutlet, IgxButtonDirective, NgClass, IgxRippleDirective, IgxIconButtonDirective] }) export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { @Input() @@ -87,14 +87,8 @@ export class IgxGridFilteringRowComponent implements AfterViewInit, OnDestroy { this.expression.searchVal = null; this._value = null; const index = this.expressionsList.findIndex(item => item.expression === this.expression); - if (index === 0 && this.expressionsList.length === 1) { + if (index === 0 && this.expressionsList.length === 1 && !this.expression.condition.isUnary) { this.filteringService.clearFilter(this.column.field); - - if (this.expression.condition.isUnary) { - this.resetExpression(this.expression.condition.name); - } - - return; } } else { if (val === '') { diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/common.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/common.ts index ee666e0450a..d48448c1f46 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/common.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/common.ts @@ -21,11 +21,17 @@ export class FilterListItem { * @hidden */ export class ExpressionUI { + public expressionId: string; public expression: IFilteringExpression; public beforeOperator: FilteringLogic; public afterOperator: FilteringLogic; public isSelected = false; public isVisible = true; + + constructor() { + // Use IDs to identify expressions clearly and use to track them in template @for cycles. + this.expressionId = crypto.randomUUID(); + } } /** diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.html index e4745fc79d4..a724862428e 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.html @@ -1,10 +1,12 @@ -
- {{ esf.grid.resourceStrings.igx_grid_excel_filter_clear }} - -
+@if (esf.column) { +
+ {{ esf.grid.resourceStrings.igx_grid_excel_filter_clear }} + +
+} diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.ts index 2a78c304f0e..65449e4ad25 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-clear-filters.component.ts @@ -2,7 +2,7 @@ import { Component } from '@angular/core'; import { PlatformUtil } from '../../../core/utils'; import { BaseFilteringComponent } from './base-filtering.component'; import { IgxIconComponent } from '../../../icon/icon.component'; -import { NgIf, NgClass } from '@angular/common'; +import { NgClass } from '@angular/common'; /** * A component used for presenting Excel style clear filters UI. @@ -10,7 +10,7 @@ import { NgIf, NgClass } from '@angular/common'; @Component({ selector: 'igx-excel-style-clear-filters', templateUrl: './excel-style-clear-filters.component.html', - imports: [NgIf, NgClass, IgxIconComponent] + imports: [NgClass, IgxIconComponent] }) export class IgxExcelStyleClearFiltersComponent { constructor( diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.html index 6aa4f2f8a8c..0e10c481086 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.html @@ -1,4 +1,4 @@ - +@if (esf.column) {
- {{ subMenuText }} ({{filterNumber}}) + + {{ subMenuText }} + @if (filterNumber > 0) { ({{filterNumber}}) } +
@@ -19,22 +22,25 @@ (selectionChanging)="onSubMenuSelection($event)" (closed)="onSubMenuClosed()">
- -
- - {{ translateCondition(condition) }} -
- - -
- - {{ esf.grid.resourceStrings.igx_grid_excel_custom_filter }} -
- + @for (condition of conditions; track condition) { + +
+ + {{ translateCondition(condition) }} +
+ + } + @if (showCustomFilterItem()) { + +
+ + {{ esf.grid.resourceStrings.igx_grid_excel_custom_filter }} +
+ + }
@@ -44,4 +50,4 @@ [filteringService]="esf.grid.filteringService" [overlayComponentId]="esf.overlayComponentId"> - +} diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts index 4cbd41d7e25..fa35a644bd1 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-conditional-filter.component.ts @@ -14,7 +14,7 @@ import { IgxDropDownItemComponent } from '../../../drop-down/drop-down-item.comp import { IgxDropDownComponent } from '../../../drop-down/drop-down.component'; import { IgxIconComponent } from '../../../icon/icon.component'; import { IgxDropDownItemNavigationDirective } from '../../../drop-down/drop-down-navigation.directive'; -import { NgIf, NgFor, NgClass } from '@angular/common'; +import { NgClass } from '@angular/common'; import { ISelectionEventArgs } from '../../../drop-down/drop-down.common'; @@ -24,7 +24,7 @@ import { ISelectionEventArgs } from '../../../drop-down/drop-down.common'; @Component({ selector: 'igx-excel-style-conditional-filter', templateUrl: './excel-style-conditional-filter.component.html', - imports: [NgIf, NgClass, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxDropDownComponent, NgFor, IgxDropDownItemComponent, IgxExcelStyleCustomDialogComponent] + imports: [NgClass, IgxDropDownItemNavigationDirective, IgxIconComponent, IgxDropDownComponent, IgxDropDownItemComponent, IgxExcelStyleCustomDialogComponent] }) export class IgxExcelStyleConditionalFilterComponent implements OnDestroy { /** diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.html index 419d11d42cb..9998443fd1f 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-custom-dialog.component.html @@ -14,29 +14,33 @@

- - - - + @if (column.dataType === 'date' || column.dataType === 'dateTime' || column.dataType === 'time') { + @for (expression of expressionsList; track expression.expressionId) { + + + } + } - - - - + @if (column.dataType !== 'date' && column.dataType !== 'dateTime' && column.dataType !== 'time') { + @for (expression of expressionsList; track expression.expressionId) { + + + } + } +@if (column.dataType === 'dateTime') { + + + +} - - - {{ grid.resourceStrings.igx_grid_filter_operator_and }} - +@if (!isSingle) { + +} - - {{ grid.resourceStrings.igx_grid_filter_operator_or }} - - +@if (!isLast) { + + + {{ grid.resourceStrings.igx_grid_filter_operator_and }} + + + {{ grid.resourceStrings.igx_grid_filter_operator_or }} + + +}
- - + @if (expressionUI.expression.condition) { + + } + @if (!expressionUI.expression.condition) { + + } - -
- - {{translateCondition(condition)}} -
- + @for (condition of conditions; track condition) { + +
+ + {{translateCondition(condition)}} +
+ + } @@ -29,32 +35,34 @@ /> - +@if (!isSingle) { + +} - - - {{ grid.resourceStrings.igx_grid_filter_operator_and }} - - - - {{ grid.resourceStrings.igx_grid_filter_operator_or }} - - +@if (!isLast) { + + + {{ grid.resourceStrings.igx_grid_filter_operator_and }} + + + {{ grid.resourceStrings.igx_grid_filter_operator_or }} + + +}
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts index 087662c382a..d0d3056c8aa 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-filtering.component.ts @@ -25,7 +25,7 @@ import { GridColumnDataType } from '../../../data-operations/data-util'; import { Subscription } from 'rxjs'; import { GridSelectionMode } from '../../common/enums'; import { IgxFilterItem } from '../../../data-operations/filtering-strategy'; -import { formatNumber, formatPercent, getLocaleCurrencyCode, NgIf, NgClass, DOCUMENT } from '@angular/common'; +import { formatNumber, formatPercent, getLocaleCurrencyCode, NgClass, DOCUMENT } from '@angular/common'; import { BaseFilteringComponent } from './base-filtering.component'; import { ExpressionUI, FilterListItem, generateExpressionsList } from './common'; import { ColumnType, GridType, IGX_GRID_BASE } from '../../common/grid.interface'; @@ -70,7 +70,7 @@ export class IgxExcelStyleFilterOperationsTemplateDirective { } providers: [{ provide: BaseFilteringComponent, useExisting: forwardRef(() => IgxGridExcelStyleFilteringComponent) }], selector: 'igx-grid-excel-style-filtering', templateUrl: './excel-style-filtering.component.html', - imports: [IgxExcelStyleHeaderComponent, NgIf, IgxExcelStyleSortingComponent, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleHidingComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleClearFiltersComponent, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleSearchComponent, NgClass] + imports: [IgxExcelStyleHeaderComponent, IgxExcelStyleSortingComponent, IgxExcelStyleMovingComponent, IgxExcelStylePinningComponent, IgxExcelStyleHidingComponent, IgxExcelStyleSelectingComponent, IgxExcelStyleClearFiltersComponent, IgxExcelStyleConditionalFilterComponent, IgxExcelStyleSearchComponent, NgClass] }) export class IgxGridExcelStyleFilteringComponent extends BaseFilteringComponent implements AfterViewInit, OnDestroy { diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.html index 6df5e38486d..7aa8df61600 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.html @@ -1,31 +1,38 @@ -
-

{{ esf.column.header || esf.column.field }}

-
- - - -
-
+@if (esf.column) { +
+

{{ esf.column.header || esf.column.field }}

+
+ @if (showSelecting) { + + } + @if (showPinning) { + + } + @if (showHiding) { + + } +
+
+} diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.ts index f56b1831acd..53a0af9f703 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-header.component.ts @@ -1,7 +1,7 @@ import { Component, Input, booleanAttribute } from '@angular/core'; import { BaseFilteringComponent } from './base-filtering.component'; import { IgxIconComponent } from '../../../icon/icon.component'; -import { NgIf, NgClass } from '@angular/common'; +import { NgClass } from '@angular/common'; import { IgxIconButtonDirective } from '../../../directives/button/icon-button.directive'; /** @@ -10,7 +10,7 @@ import { IgxIconButtonDirective } from '../../../directives/button/icon-button.d @Component({ selector: 'igx-excel-style-header', templateUrl: './excel-style-header.component.html', - imports: [NgIf, NgClass, IgxIconComponent, IgxIconButtonDirective] + imports: [NgClass, IgxIconComponent, IgxIconButtonDirective] }) export class IgxExcelStyleHeaderComponent { /** diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-hiding.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-hiding.component.html index a6d584a3049..5f24451e259 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-hiding.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-hiding.component.html @@ -1,8 +1,10 @@ - +@if (esf.column) { + +} diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-hiding.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-hiding.component.ts index ceb35b4b19f..f529efef6df 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-hiding.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-hiding.component.ts @@ -1,7 +1,6 @@ import { Component } from '@angular/core'; import { BaseFilteringComponent } from './base-filtering.component'; import { IgxIconComponent } from '../../../icon/icon.component'; -import { NgIf } from '@angular/common'; /** * A component used for presenting Excel style column hiding UI. @@ -9,7 +8,7 @@ import { NgIf } from '@angular/common'; @Component({ selector: 'igx-excel-style-hiding', templateUrl: './excel-style-hiding.component.html', - imports: [NgIf, IgxIconComponent] + imports: [IgxIconComponent] }) export class IgxExcelStyleHidingComponent { constructor(public esf: BaseFilteringComponent) { } diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-moving.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-moving.component.html index 6224f831ac8..a85b1c229eb 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-moving.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-moving.component.html @@ -1,31 +1,31 @@ - -
- {{ esf.grid.resourceStrings.igx_grid_excel_filter_moving_header }} -
- - - - - +@if (esf.column) { +
+ {{ esf.grid.resourceStrings.igx_grid_excel_filter_moving_header }} +
+ + + + +} diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-moving.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-moving.component.ts index f41538c4c81..80aa1564310 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-moving.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-moving.component.ts @@ -4,7 +4,6 @@ import { BaseFilteringComponent } from './base-filtering.component'; import { IgxIconComponent } from '../../../icon/icon.component'; import { IgxButtonDirective } from '../../../directives/button/button.directive'; import { IgxButtonGroupComponent } from '../../../buttonGroup/buttonGroup.component'; -import { NgIf } from '@angular/common'; /** * A component used for presenting Excel style column moving UI. @@ -12,7 +11,7 @@ import { NgIf } from '@angular/common'; @Component({ selector: 'igx-excel-style-moving', templateUrl: './excel-style-moving.component.html', - imports: [NgIf, IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent] + imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent] }) export class IgxExcelStyleMovingComponent { /** diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-pinning.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-pinning.component.html index 0c2862fc9b6..47360003197 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-pinning.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-pinning.component.html @@ -1,8 +1,10 @@ -
- {{ esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin }} - -
+@if (esf.column) { +
+ {{ esf.column.pinned ? esf.grid.resourceStrings.igx_grid_excel_unpin : esf.grid.resourceStrings.igx_grid_excel_pin }} + +
+} diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-pinning.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-pinning.component.ts index 7baa310c653..17cce1aefde 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-pinning.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-pinning.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; import { BaseFilteringComponent } from './base-filtering.component'; import { IgxIconComponent } from '../../../icon/icon.component'; -import { NgIf, NgClass } from '@angular/common'; +import { NgClass } from '@angular/common'; /** * A component used for presenting Excel style column pinning UI. @@ -9,7 +9,7 @@ import { NgIf, NgClass } from '@angular/common'; @Component({ selector: 'igx-excel-style-pinning', templateUrl: './excel-style-pinning.component.html', - imports: [NgIf, NgClass, IgxIconComponent] + imports: [NgClass, IgxIconComponent] }) export class IgxExcelStylePinningComponent { constructor(public esf: BaseFilteringComponent) { } diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html index 946bf531a1b..c5930f3adaf 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.html @@ -10,119 +10,141 @@ [placeholder]="esf.column?.grid.resourceStrings.igx_grid_excel_search_placeholder" autocomplete="off"/> - - + @if (searchValue || searchValue === 0) { + + + } - -
- - - {{ item.label }} - - -
- - -
- - +@if (!isHierarchical()) { + +
+ + + {{ item.label }} + +
- - - - - - -
- {{ esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace('{0}', matchesCount) }} -
- - -
-
-
- - {{ selectAllItem.label }} - + +
+ + +
+ + + + +
+ {{ esf.grid?.resourceStrings.igx_grid_excel_matches_count.replace('{0}', matchesCount) }}
-
- + +} - {{ addToCurrentFilterItem.label }} - -
-
- - - -
{{item.label}}
- -
{{childLevel1.label}}
- -
{{childLevel2.label}}
- -
{{childLevel3.label}}
- -
{{childLevel4.label}}
- -
{{childLevel5.label}}
- -
{{childLevel6.label}}
- -
{{childLevel7.label}}
- -
{{childLevel8.label}}
- -
{{childLevel9.label}}
- +@if (isHierarchical()) { +
+ @if (!isTreeEmpty()) { +
+
+ + {{ selectAllItem.label }} + +
+ @if (searchValue) { +
+ + {{ addToCurrentFilterItem.label }} + +
+ } +
+ } + + @for (item of displayedListData; track item.value) { + +
{{item.label}}
+ @for (childLevel1 of item.children; track childLevel1.value) { + +
{{childLevel1.label}}
+ @for (childLevel2 of childLevel1.children; track childLevel2.value) { + +
{{childLevel2.label}}
+ @for (childLevel3 of childLevel2.children; track childLevel3.value) { + +
{{childLevel3.label}}
+ @for (childLevel4 of childLevel3.children; track childLevel4.value) { + +
{{childLevel4.label}}
+ @for (childLevel5 of childLevel4.children; track childLevel5.value) { + +
{{childLevel5.label}}
+ @for (childLevel6 of childLevel5.children; track childLevel6.value) { + +
{{childLevel6.label}}
+ @for (childLevel7 of childLevel6.children; track childLevel7.value) { + +
{{childLevel7.label}}
+ @for (childLevel8 of childLevel7.children; track childLevel8.value) { + +
{{childLevel8.label}}
+ @for (childLevel9 of childLevel8.children; track childLevel9.value) { + +
{{childLevel9.label}}
+ + } + + } + + } + + } + + } + + } - + } - + } - + } - - - - - -
- - -
- - - - - -
+ } + + +
+ + +
+ + @if (isTreeEmpty()) { + + } +
+}
diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts index d270901759d..25199db8605 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts @@ -32,7 +32,7 @@ import { IgxDataLoadingTemplateDirective, IgxEmptyListTemplateDirective } from ' import { IgxListItemComponent } from '../../../list/list-item.component'; import { IgxListComponent } from '../../../list/list.component'; import { IgxSuffixDirective } from '../../../directives/suffix/suffix.directive'; -import { NgIf, NgTemplateOutlet, NgFor } from '@angular/common'; +import { NgTemplateOutlet } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { IgxPrefixDirective } from '../../../directives/prefix/prefix.directive'; import { IgxIconComponent } from '../../../icon/icon.component'; @@ -59,7 +59,7 @@ let NEXT_ID = 0; @Component({ selector: 'igx-excel-style-search', templateUrl: './excel-style-search.component.html', - imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, FormsModule, IgxInputDirective, NgIf, IgxSuffixDirective, IgxListComponent, IgxForOfDirective, IgxListItemComponent, IgxCheckboxComponent, IgxDataLoadingTemplateDirective, NgTemplateOutlet, IgxEmptyListTemplateDirective, IgxTreeComponent, NgFor, IgxTreeNodeComponent, IgxCircularProgressBarComponent, IgxButtonDirective] + imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, FormsModule, IgxInputDirective, IgxSuffixDirective, IgxListComponent, IgxForOfDirective, IgxListItemComponent, IgxCheckboxComponent, IgxDataLoadingTemplateDirective, NgTemplateOutlet, IgxEmptyListTemplateDirective, IgxTreeComponent, IgxTreeNodeComponent, IgxCircularProgressBarComponent, IgxButtonDirective] }) export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy { private static readonly filterOptimizationThreshold = 2; @@ -462,6 +462,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy { selectAllBtn.indeterminate = anyFiltered && anyUnfiltered; if (this.isHierarchical() && this.tree) { this._hierarchicalSelectedItems = this.tree.nodes.map(n => n.data as FilterListItem).filter(item => item.isFiltered); + this.tree.collapseAll(); } this.esf.listData.forEach(i => i.isSelected = i.isFiltered); diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.html index f1ba36e2519..34b3b651719 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.html @@ -1,9 +1,11 @@ -
- {{esf.grid.resourceStrings.igx_grid_excel_select }} - -
+@if (esf.column) { +
+ {{esf.grid.resourceStrings.igx_grid_excel_select }} + +
+} diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.ts index 36354db79ed..d3fd52a5b69 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-selecting.component.ts @@ -1,7 +1,7 @@ import { Component } from '@angular/core'; import { BaseFilteringComponent } from './base-filtering.component'; import { IgxIconComponent } from '../../../icon/icon.component'; -import { NgIf, NgClass } from '@angular/common'; +import { NgClass } from '@angular/common'; /** * A component used for presenting Excel style conditional filter UI. @@ -9,7 +9,7 @@ import { NgIf, NgClass } from '@angular/common'; @Component({ selector: 'igx-excel-style-selecting', templateUrl: './excel-style-selecting.component.html', - imports: [NgIf, NgClass, IgxIconComponent] + imports: [NgClass, IgxIconComponent] }) export class IgxExcelStyleSelectingComponent { constructor(public esf: BaseFilteringComponent) { } diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.html b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.html index 4491db53da8..35cf79678e6 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.html +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.html @@ -1,33 +1,32 @@ - -
- {{ esf.grid.resourceStrings.igx_grid_excel_filter_sorting_header }} -
- - - - - - +@if (esf.column) { +
+ {{ esf.grid.resourceStrings.igx_grid_excel_filter_sorting_header }} +
+ + + + +} diff --git a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.ts b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.ts index 631fc9fd1ae..1d23c7a78c9 100644 --- a/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.ts +++ b/projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-sorting.component.ts @@ -11,7 +11,6 @@ import { Subject } from 'rxjs'; import { BaseFilteringComponent } from './base-filtering.component'; import { IgxIconComponent } from '../../../icon/icon.component'; import { IgxButtonDirective } from '../../../directives/button/button.directive'; -import { NgIf } from '@angular/common'; /** * A component used for presenting Excel style column sorting UI. @@ -19,7 +18,7 @@ import { NgIf } from '@angular/common'; @Component({ selector: 'igx-excel-style-sorting', templateUrl: './excel-style-sorting.component.html', - imports: [NgIf, IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent] + imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxIconComponent] }) export class IgxExcelStyleSortingComponent implements OnDestroy { /** diff --git a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts index 964424676f4..47aa02b7bd0 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/cell.spec.ts @@ -12,7 +12,6 @@ import { VirtualGridComponent, NoScrollsComponent, import { GridFunctions } from '../../test-utils/grid-functions.spec'; import { TestNgZone } from '../../test-utils/helper-utils.spec'; import { CellType } from '../common/grid.interface'; -import { NgFor } from '@angular/common'; import { IGridCellEventArgs, IgxColumnComponent } from '../public_api'; describe('IgxGrid - Cell component #grid', () => { @@ -406,19 +405,21 @@ describe('IgxGrid - Cell component #grid', () => { @Component({ template: ` - - + @for (c of columns; track c) { + + + } `, styleUrls: ['../../test-utils/grid-cell-style-testing.scss'], - imports: [IgxGridComponent, IgxColumnComponent, NgFor] + imports: [IgxGridComponent, IgxColumnComponent] }) export class ConditionalCellStyleTestComponent implements OnInit { @ViewChild('grid', { static: true }) public grid: IgxGridComponent; diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts index fd9c04de40f..9e25636960f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-group.spec.ts @@ -26,7 +26,7 @@ const GRID_COL_THEAD_TITLE_CLASS = 'igx-grid-th__title'; const GRID_COL_GROUP_THEAD_TITLE_CLASS = 'igx-grid-thead__title'; const GRID_COL_GROUP_THEAD_GROUP_CLASS = 'igx-grid-thead__group'; - + describe('IgxGrid - multi-column headers #grid', () => { let fixture: ComponentFixture; let grid: IgxGridComponent; let componentInstance; @@ -76,7 +76,7 @@ describe('IgxGrid - multi-column headers #grid', () => { const headerHeight = grid.nativeElement .querySelector("igx-grid-header-row") .getBoundingClientRect().height; - + expect(Math.round(headerHeight)).toEqual(expectedGridHeaderHeight); }); @@ -1112,8 +1112,9 @@ describe('IgxGrid - multi-column headers #grid', () => { grAdressInf.pinned = true; fixture.detectChanges(); - // Verify group and all its children are not pinned + // Verify group and all its children are pinned testColumnPinning(grAdressInf, true); + expect(grid.pinnedColumnsCount).toEqual(10); expect(grid.getCellByColumn(0, 'ID')).toBeDefined(); expect(grid.getCellByColumn(0, 'Country')).toBeDefined(); @@ -1828,4 +1829,4 @@ class NestedColGroupsTests { 'slaveColGroup', masterColGroupChildrenCount); } } - + diff --git a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts index b58b5f02b41..b510df76d26 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column-resizing.spec.ts @@ -11,7 +11,6 @@ import { MultiColumnHeadersComponent } from '../../test-utils/grid-samples.spec' import { configureTestSuite } from '../../test-utils/configure-suite'; import { GridFunctions } from '../../test-utils/grid-functions.spec'; import { IgxCellHeaderTemplateDirective, IgxCellTemplateDirective } from '../columns/templates.directive'; -import { NgFor } from '@angular/common'; import { IgxAvatarComponent } from '../../avatar/avatar.component'; import { IColumnResizeEventArgs, IgxColumnComponent } from '../public_api'; import { Size } from "../common/enums"; @@ -961,7 +960,7 @@ export class GridFeaturesComponent { @Component({ template: GridTemplateStrings.declareGrid(`height="800px"`, ``, ColumnDefinitions.resizableColsComponent), - imports: [IgxGridComponent, IgxColumnComponent, NgFor] + imports: [IgxGridComponent, IgxColumnComponent] }) export class NullColumnsComponent implements OnInit { @ViewChild(IgxGridComponent, { static: true }) public grid: IgxGridComponent; diff --git a/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts index a13f5c76a37..a4287723f28 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/column.spec.ts @@ -1,7 +1,7 @@ import { Component, DebugElement, TemplateRef, ViewChild } from '@angular/core'; import { TestBed, fakeAsync, tick, waitForAsync, ComponentFixture } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { getLocaleCurrencySymbol, NgFor, registerLocaleData } from '@angular/common'; +import { getLocaleCurrencySymbol, registerLocaleData } from '@angular/common'; import localeFr from '@angular/common/locales/fr'; import localeJa from '@angular/common/locales/ja'; @@ -1662,7 +1662,7 @@ describe('IgxGrid - Column properties #grid', () => { @Component({ template: GridTemplateStrings.declareGrid('', '', ColumnDefinitions.iterableComponent), - imports: [IgxGridComponent, IgxColumnComponent, NgFor] + imports: [IgxGridComponent, IgxColumnComponent] }) export class ColumnsFromIterableComponent { @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) @@ -1688,7 +1688,7 @@ interface IColumnConfig { `, - imports: [IgxGridComponent, IgxColumnComponent, NgFor, IgxButtonDirective] + imports: [IgxGridComponent, IgxColumnComponent, IgxButtonDirective] }) export class ResizableColumnsComponent { @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) @@ -1738,10 +1738,12 @@ export class TemplatedColumnsComponent { @Component({ template: ` - - + @for (field of columns; track field) { + + + } @@ -1760,7 +1762,7 @@ export class TemplatedColumnsComponent { {{ summaryResults[0].label }}: {{ summaryResults[0].summaryResult }} `, - imports: [IgxGridComponent, IgxColumnComponent, NgFor, IgxSummaryTemplateDirective] + imports: [IgxGridComponent, IgxColumnComponent, IgxSummaryTemplateDirective] }) export class TemplatedInputColumnsComponent { @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) diff --git a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html index 99cd472e085..e241c39710b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.html @@ -1,72 +1,84 @@ - {{ grid.resourceStrings.igx_grid_pinned_row_indicator }} + @if (displayPinnedChip) { + {{ grid.resourceStrings.igx_grid_pinned_row_indicator }} + } -
{{ formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === "number" - ? (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') - ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' - ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' - ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value}}
+ @if (column.dataType !== 'boolean' && column.dataType !== 'image' || (column.dataType === 'boolean' && this.formatter)) { +
+ {{ formatter ? (value | columnFormatter:formatter:rowData) : column.dataType === "number" + ? (value | number:column.pipeArgs.digitsInfo:grid.locale) : (column.dataType === 'date' || column.dataType === 'time' || column.dataType === 'dateTime') + ? (value | date:column.pipeArgs.format:column.pipeArgs.timezone:grid.locale) : column.dataType === 'currency' + ? (value | currency:currencyCode:column.pipeArgs.display:column.pipeArgs.digitsInfo:grid.locale) : column.dataType === 'percent' + ? (value | percent:column.pipeArgs.digitsInfo:grid.locale) : value}}
+ } - - - + @if (column.dataType === 'boolean' && !this.formatter) { + + + } + @if (column.dataType === 'image') { + + } -
{{ - value ? value : (column.header || column.field) - }}
+ @if (column.dataType !== 'boolean' || (column.dataType === 'boolean' && this.formatter)) { +
+ {{ value ? value : (column.header || column.field) }} +
+ } - - - - - - + @if (column.dataType === 'string' || column.dataType === 'image') { + + + + + + } + @if (column.dataType === 'number') { - - - - - - - - - - - - + } + @if (column.dataType === 'boolean') { + + + + } + @if (column.dataType === 'date') { + + + + + } + @if (column.dataType === 'time') { + + + + } + @if (column.dataType === 'dateTime') { - - + } + @if (column.dataType === 'currency') { - {{ currencyCodeSymbol }} + @if (grid.currencyPositionLeft) { + {{ currencyCodeSymbol }} + } - {{ currencyCodeSymbol }} + @if (!grid.currencyPositionLeft) { + {{ currencyCodeSymbol }} + } - - + } + @if (column.dataType === 'percent') { {{ editValue | percent:column.pipeArgs.digitsInfo:grid.locale }} - + } - +@if (showExpanderIndicator) {
- +} - +@if (isInvalid) {
- +} @@ -199,25 +221,39 @@ -
- {{grid.resourceStrings.igx_grid_required_validation_error}} -
-
- {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }} -
-
- {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }} -
-
- {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }} -
-
- {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }} -
-
- {{grid.resourceStrings.igx_grid_email_validation_error }} -
-
- {{grid.resourceStrings.igx_grid_pattern_validation_error}} -
+ @if (formGroup?.get(column?.field).errors?.['required']) { +
+ {{grid.resourceStrings.igx_grid_required_validation_error}} +
+ } + @if (formGroup?.get(column?.field).errors?.['minlength']) { +
+ {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }} +
+ } + @if (formGroup?.get(column?.field).errors?.['maxlength']) { +
+ {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }} +
+ } + @if (formGroup?.get(column?.field).errors?.['min']) { +
+ {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }} +
+ } + @if (formGroup?.get(column?.field).errors?.['max']) { +
+ {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }} +
+ } + @if (formGroup?.get(column?.field).errors?.['email']) { +
+ {{grid.resourceStrings.igx_grid_email_validation_error }} +
+ } + @if (formGroup?.get(column?.field).errors?.['pattern']) { +
+ {{grid.resourceStrings.igx_grid_pattern_validation_error}} +
+ } diff --git a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.ts b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.ts index aa9352b9450..19e4bcd005b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/expandable-cell.component.ts @@ -12,7 +12,7 @@ import { } from '@angular/core'; import { IgxGridCellComponent } from '../cell.component'; import { PlatformUtil } from '../../core/utils'; -import { DOCUMENT, NgIf, NgClass, NgTemplateOutlet, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe } from '@angular/common'; +import { DOCUMENT, NgClass, NgTemplateOutlet, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe } from '@angular/common'; import { IgxGridSelectionService } from '../selection/selection.service'; import { HammerGesturesManager } from '../../core/touch'; import { GridType, IGX_GRID_BASE } from '../common/grid.interface'; @@ -39,7 +39,7 @@ import { IgxChipComponent } from '../../chips/chip.component'; selector: 'igx-expandable-grid-cell', templateUrl: 'expandable-cell.component.html', providers: [HammerGesturesManager], - imports: [NgIf, IgxChipComponent, IgxTextHighlightDirective, IgxIconComponent, NgClass, FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxCheckboxComponent, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxSuffixDirective, NgTemplateOutlet, IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe] + imports: [IgxChipComponent, IgxTextHighlightDirective, IgxIconComponent, NgClass, FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxCheckboxComponent, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxSuffixDirective, NgTemplateOutlet, IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe] }) export class IgxGridExpandableCellComponent extends IgxGridCellComponent implements OnInit { /** diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts index c190bf76695..85035fffe9e 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-advanced.spec.ts @@ -1162,12 +1162,12 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => { // Change the grid's columns collection fixture.componentInstance.columns = [ - { fieldName: 'ID', header: 'ID', width: '200px', type: 'string' }, - { fieldName: 'CompanyName', header: 'Company Name', width: '200px', type: 'string' }, - { fieldName: 'ContactName', header: 'Contact Name', width: '200px', type: 'string' }, - { fieldName: 'ContactTitle', header: 'Contact Title', width: '200px', type: 'string' }, - { fieldName: 'City', header: 'City', width: '200px', type: 'string' }, - { fieldName: 'Country', header: 'Country', width: '200px', type: 'string' }, + { field: 'ID', header: 'ID', width: '200px', type: 'string' }, + { field: 'CompanyName', header: 'Company Name', width: '200px', type: 'string' }, + { field: 'ContactName', header: 'Contact Name', width: '200px', type: 'string' }, + { field: 'ContactTitle', header: 'Contact Title', width: '200px', type: 'string' }, + { field: 'City', header: 'City', width: '200px', type: 'string' }, + { field: 'Country', header: 'Country', width: '200px', type: 'string' }, ]; fixture.detectChanges(); flush(); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts index 22f4acc32c2..c84074b4e36 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-filtering-ui.spec.ts @@ -3032,16 +3032,6 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { ); })); - it('Should emit filteringDone when we clicked reset - Boolean column type', fakeAsync(() => { - emitFilteringDoneOnResetClick( - fix, - grid, - true, - 'Released', - IgxBooleanFilteringOperand.instance().condition('true') - ); - })); - it('Should emit filteringDone when we clicked reset - DateTime column type', fakeAsync(() => { emitFilteringDoneOnResetClick( fix, @@ -3092,16 +3082,6 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => { ); })); - it('Should emit filteringDone when clear the input of filteringUI - Boolean column type', fakeAsync(() => { - emitFilteringDoneOnInputClear( - fix, - grid, - true, - 'Released', - IgxBooleanFilteringOperand.instance().condition('true') - ); - })); - it('Should emit filteringDone when clear the input of filteringUI - DateTime column type', fakeAsync(() => { emitFilteringDoneOnInputClear( fix, @@ -6565,7 +6545,7 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => { const displayContainer = searchComponent.querySelector('igx-display-container'); const displayContainerRect = displayContainer.getBoundingClientRect(); const parentContainerRect = displayContainer.parentElement.getBoundingClientRect(); - + expect(displayContainerRect.top - parentContainerRect.top <= 1).toBe(true, 'search scrollbar did not reset'); }); }); diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts index b7bbfe08bfc..5a6605b5334 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-mrl-keyboard-nav.spec.ts @@ -12,7 +12,6 @@ import { IgxGridGroupByRowComponent } from './groupby-row.component'; import { GridFunctions, GRID_MRL_BLOCK } from '../../test-utils/grid-functions.spec'; import { CellType } from '../common/grid.interface'; import { IgxColumnLayoutComponent } from '../columns/column-layout.component'; -import { NgFor } from '@angular/common'; import { IGridCellEventArgs, IgxColumnComponent } from '../public_api'; const DEBOUNCETIME = 30; @@ -2623,14 +2622,18 @@ describe('IgxGrid Multi Row Layout - Keyboard navigation #grid', () => { @Component({ template: ` - - - + @for (group of colGroups; track group) { + + @for (col of group.columns; track col) { + + } + + } `, - imports: [IgxGridComponent, IgxColumnComponent, IgxColumnLayoutComponent, NgFor] + imports: [IgxGridComponent, IgxColumnComponent, IgxColumnLayoutComponent] }) export class ColumnLayoutTestComponent { @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts index 41886530de4..bb08b5b7e06 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row-pinning.spec.ts @@ -1,5 +1,4 @@ import { ViewChild, Component, DebugElement, OnInit, QueryList } from '@angular/core'; -import { NgFor, NgIf } from '@angular/common'; import { TestBed } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -1413,10 +1412,12 @@ describe('Row Pinning #grid', () => { [height]='"500px"' [data]="data" [autoGenerate]="true"> - + @if (paging) { + + } `, - imports: [IgxGridComponent, IgxPaginatorComponent, NgIf] + imports: [IgxGridComponent, IgxPaginatorComponent] }) export class GridRowPinningComponent { @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) @@ -1435,14 +1436,18 @@ export class GridRowPinningComponent { template: ` - - - + @for (group of colGroups; track group) { + + @for (col of group.columns; track col) { + + } + + } `, - imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent, NgFor] + imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent] }) export class GridRowPinningWithMRLComponent extends GridRowPinningComponent { public cols: Array = [ diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html index f262a09e0cc..7289bc16f29 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.html @@ -6,75 +6,77 @@
- + @if (rowDraggable) {
- - + } + @if (this.showRowSelectors) {
- - + } + @if (grid.groupingExpressions.length > 0) {
- + } - - - - - - + @if (!grid.hasColumnLayouts) { + @if (pinnedColumns.length > 0 && grid.isPinningToStart) { + @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) { + + } + } - - - - - - + @if (pinnedColumns.length > 0 && !grid.isPinningToStart) { + @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) { + + } + } + } - - + @if (grid.hasColumnLayouts) { + @if (pinnedColumns.length > 0 && grid.isPinningToStart) { - + }
- - - + @for (col of col.children; track trackPinnedColumn(col)) { + + }
- - + @if (pinnedColumns.length > 0 && !grid.isPinningToStart) { - - + } + } -
- + @for (col of pinnedColumns | igxTopLevel; track trackPinnedColumn(col)) { +
+ @for (col of col.children; track col) { - -
+ } +
+ } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.ts index 4a6e9ac9527..77bbeef579c 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-row.component.ts @@ -6,7 +6,7 @@ import { IgxGridCellComponent } from '../cell.component'; import { IgxCheckboxComponent } from '../../checkbox/checkbox.component'; import { IgxGridForOfDirective } from '../../directives/for-of/for_of.directive'; import { IgxRowDragDirective } from '../row-drag.directive'; -import { NgTemplateOutlet, NgIf, NgFor, NgStyle, NgClass } from '@angular/common'; +import { NgTemplateOutlet, NgStyle, NgClass } from '@angular/common'; /* blazorIndirectRender */ /* blazorElement */ @@ -15,7 +15,7 @@ import { NgTemplateOutlet, NgIf, NgFor, NgStyle, NgClass } from '@angular/common selector: 'igx-grid-row', templateUrl: './grid-row.component.html', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxGridRowComponent) }], - imports: [NgTemplateOutlet, NgIf, IgxRowDragDirective, NgFor, IgxGridForOfDirective, NgStyle, IgxCheckboxComponent, IgxGridCellComponent, NgClass, IgxGridExpandableCellComponent, IgxGridNotGroupedPipe, IgxGridTopLevelColumns, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe] + imports: [NgTemplateOutlet, IgxRowDragDirective, IgxGridForOfDirective, NgStyle, IgxCheckboxComponent, IgxGridCellComponent, NgClass, IgxGridExpandableCellComponent, IgxGridNotGroupedPipe, IgxGridTopLevelColumns, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe] }) export class IgxGridRowComponent extends IgxRowDirective { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts index fd5e5e62f46..6bb40c445ba 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts @@ -7,7 +7,6 @@ import { configureTestSuite } from '../../test-utils/configure-suite'; import { GridFunctions } from "../../test-utils/grid-functions.spec"; import { By } from "@angular/platform-browser"; import { IgxGridToolbarComponent } from '../toolbar/grid-toolbar.component'; -import { NgIf } from '@angular/common'; import { IgxGridToolbarActionsComponent, IgxGridToolbarTitleComponent } from '../toolbar/common'; import { IgxGridToolbarPinningComponent } from '../toolbar/grid-toolbar-pinning.component'; import { IgxGridToolbarHidingComponent } from '../toolbar/grid-toolbar-hiding.component'; @@ -256,14 +255,22 @@ describe('IgxGrid - Grid Toolbar #grid - ', () => { @Component({ template: ` - -

{{ customContent }}

- {{ toolbarTitle }} - - + @if (toolbarEnabled) { + + @if (customContentEnabled) { +

{{ customContent }}

+ } + @if (toolbarTitleEnabled) { + {{ toolbarTitle }} + } + @if (toolbarActionsEnabled) { + + } + + } `, - imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarTitleComponent, NgIf] + imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarTitleComponent] }) export class DefaultToolbarComponent { public toolbarEnabled = true; diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html index 374267ba41a..900ac1c9572 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.html @@ -2,7 +2,7 @@ - +@if (showGroupArea && (groupingExpressions.length > 0 || hasGroupableColumns)) { - +} - - - - - - -
- - - - -
+ @if (moving && columnInDrag && pinnedColumns.length <= 0) { + + } + @if (moving && columnInDrag && pinnedColumns.length > 0) { + + } + - + + @if (data + | gridTransaction:id:pipeTrigger + | visibleColumns:hasVisibleColumns + | gridAddRow:true:pipeTrigger + | gridRowPinning:id:true:pipeTrigger + | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true + | gridSort:sortingExpressions:groupingExpressions:sortStrategy:id:pipeTrigger:true; as pinnedData) { + @if (pinnedData.length > 0) { +
+ @for (rowData of pinnedData; track rowData; let rowIndex = $index) { + + + } +
+ } + } +
- -
- - + @if (this.groupingExpressions.length > 0) { +
+ } +
@@ -134,11 +140,15 @@
- - + @if (shouldOverlayLoading) { + + + }
- + @if (moving && columnInDrag) { + + }
@@ -158,11 +168,13 @@
- - + @if (hasSummarizedColumns && rootSummariesEnabled) { + + + }
@@ -185,18 +197,22 @@ {{emptyFilteredGridMessage}} - - - + @if (showAddButton) { + + + + } {{emptyGridMessage}} - - - + @if (showAddButton) { + + + + } @@ -226,7 +242,7 @@ - + -
-
- - +@if (rowEditable) { +
+
+ + +
-
+} {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }} @@ -277,7 +295,9 @@ - +@if (colResizingService.showResizer) { + +}
@if (platform.isElements) {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts index 88fcdcadc85..51ac5b0b53f 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts @@ -23,7 +23,7 @@ import { IgxTabContentComponent, IgxTabHeaderComponent, IgxTabItemComponent, Igx import { IgxGridRowComponent } from './grid-row.component'; import { ISortingExpression, SortingDirection } from '../../data-operations/sorting-strategy'; import { GRID_SCROLL_CLASS } from '../../test-utils/grid-functions.spec'; -import { AsyncPipe, NgFor, NgIf } from '@angular/common'; +import { AsyncPipe } from '@angular/common'; import { IgxPaginatorComponent, IgxPaginatorContentDirective } from '../../paginator/paginator.component'; import { IGridRowEventArgs, IgxColumnGroupComponent, IgxGridFooterComponent, IgxGridRow, IgxGroupByRow, IgxSummaryRow } from '../public_api'; import { getComponentSize } from '../../core/utils'; @@ -131,10 +131,10 @@ describe('IgxGrid Component Tests #grid', () => { expect(grid.columns.map(col => col.field)).toEqual(['Number', 'Boolean'], 'Invalid columns after exclusion initialized'); }); - it('should initialize a grid and allow changing columns runtime with ngFor', () => { + it('should initialize a grid and allow changing columns runtime with @for', () => { const fix = TestBed.createComponent(IgxGridTestComponent); fix.detectChanges(); - // reverse order of ngFor bound collection + // reverse order of @for bound collection fix.componentInstance.columns.reverse(); fix.detectChanges(); // check order @@ -2928,12 +2928,14 @@ describe('IgxGrid Component Tests #grid', () => { @Component({ template: `
- - + @for (column of columns; track column) { + + + }
`, - imports: [IgxGridComponent, IgxColumnComponent, NgFor] + imports: [IgxGridComponent, IgxColumnComponent] }) export class IgxGridTestComponent { @ViewChild('grid', { static: true }) public grid: IgxGridComponent; @@ -3002,11 +3004,15 @@ export class IgxGridTestComponent { @Component({ template: ` - - - + @for (col of columns; track col) { + + + } + @if (paging) { + + } `, - imports: [IgxGridComponent, IgxColumnComponent, IgxPaginatorComponent, NgFor, NgIf] + imports: [IgxGridComponent, IgxColumnComponent, IgxPaginatorComponent] }) export class IgxGridDefaultRenderingComponent { @ViewChild('grid', { read: IgxGridComponent, static: true }) @@ -3126,10 +3132,12 @@ export class IgxGridColumnHeaderInGroupAutoSizeComponent { @Component({ template: ` - - + @for (col of columns; track col) { + + + } `, - imports: [IgxGridComponent, IgxColumnComponent, NgFor] + imports: [IgxGridComponent, IgxColumnComponent] }) export class IgxGridColumnPercentageWidthComponent extends IgxGridDefaultRenderingComponent { public override initColumns(column) { @@ -3141,10 +3149,12 @@ export class IgxGridColumnPercentageWidthComponent extends IgxGridDefaultRenderi @Component({ template: ` - - + @for (col of columns; track col) { + + + } `, - imports: [IgxGridComponent, IgxColumnComponent, NgFor] + imports: [IgxGridComponent, IgxColumnComponent] }) export class IgxGridColumnHiddenPercentageWidthComponent extends IgxGridDefaultRenderingComponent { public hidden = true; @@ -3170,10 +3180,12 @@ export class IgxGridWithCustomFooterComponent extends IgxGridTestComponent { @Component({ template: `
- + @if (paging) { + + }
`, - imports: [IgxGridComponent, IgxPaginatorComponent, NgIf] + imports: [IgxGridComponent, IgxPaginatorComponent] }) export class IgxGridWrappedInContComponent extends IgxGridTestComponent { public override data = []; @@ -3223,10 +3235,12 @@ export class IgxGridWrappedInContComponent extends IgxGridTestComponent { @Component({ template: `
- + @if (paging) { + + }
`, - imports: [IgxGridComponent, IgxPaginatorComponent, NgIf] + imports: [IgxGridComponent, IgxPaginatorComponent] }) export class IgxGridFixedContainerHeightComponent extends IgxGridWrappedInContComponent { public override paging = false; @@ -3416,12 +3430,13 @@ export class IgxGridFormattingComponent extends BasicGridComponent { - - + @for (column of columns; track column) { + + + } @@ -3431,13 +3446,14 @@ export class IgxGridFormattingComponent extends BasicGridComponent { - - + @for (column of columns; track column) { + + + } @@ -3447,13 +3463,14 @@ export class IgxGridFormattingComponent extends BasicGridComponent { - - + @for (column of columns; track column) { + + + } @@ -3464,13 +3481,14 @@ export class IgxGridFormattingComponent extends BasicGridComponent { - - - + @for (column of columns; track column) { + + + } + @@ -3481,12 +3499,13 @@ export class IgxGridFormattingComponent extends BasicGridComponent {
- - + @for (column of columns; track column) { + + + }
@@ -3494,7 +3513,7 @@ export class IgxGridFormattingComponent extends BasicGridComponent {
`, - imports: [IgxGridComponent, IgxColumnComponent, IgxTabsComponent, IgxTabHeaderComponent, IgxTabContentComponent, IgxTabItemComponent, IgxPaginatorComponent, NgFor] + imports: [IgxGridComponent, IgxColumnComponent, IgxTabsComponent, IgxTabHeaderComponent, IgxTabContentComponent, IgxTabItemComponent, IgxPaginatorComponent] }) export class IgxGridInsideIgxTabsComponent { @ViewChild('grid2', { read: IgxGridComponent, static: true }) @@ -3539,12 +3558,14 @@ export class IgxGridInsideIgxTabsComponent { -

{{grid.totalRecords}}

+ @if (grid.rendered$ | async) { +

{{grid.totalRecords}}

+ } `, - imports: [IgxGridComponent, IgxColumnComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, NgIf, AsyncPipe] + imports: [IgxGridComponent, IgxColumnComponent, IgxPaginatorComponent, IgxPaginatorContentDirective, AsyncPipe] }) export class IgxGridWithCustomPaginationTemplateComponent { @ViewChild('grid', { read: IgxGridComponent, static: true }) @@ -3555,9 +3576,11 @@ export class IgxGridWithCustomPaginationTemplateComponent { @Component({ template: ` - + @for (column of columns; track column) { + + } `, - imports: [IgxGridComponent, IgxColumnComponent, NgFor] + imports: [IgxGridComponent, IgxColumnComponent] }) export class IgxGridPerformanceComponent implements AfterViewInit, OnInit { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts index 8c735725867..07d3b4cdb9b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts @@ -3,7 +3,7 @@ import { QueryList, ViewChild, TemplateRef, DoCheck, AfterContentInit, HostBinding, OnInit, AfterViewInit, ContentChildren, CUSTOM_ELEMENTS_SCHEMA, booleanAttribute } from '@angular/core'; -import { NgIf, NgTemplateOutlet, NgClass, NgFor, NgStyle } from '@angular/common'; +import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common'; import { IgxGridBaseDirective } from '../grid-base.directive'; import { IgxGridNavigationService } from '../grid-navigation.service'; @@ -116,9 +116,7 @@ export interface IGroupingDoneEventArgs extends IBaseEventArgs { selector: 'igx-grid', templateUrl: './grid.component.html', imports: [ - NgIf, NgClass, - NgFor, NgStyle, NgTemplateOutlet, IgxGridGroupByAreaComponent, diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts index def18ce2722..4eb5a737125 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.groupby.spec.ts @@ -20,7 +20,6 @@ import { GridSelectionMode } from '../common/enums'; import { ControlsFunction } from '../../test-utils/controls-functions.spec'; import { IGroupingExpression } from '../../data-operations/grouping-expression.interface'; import { IgxPaginatorComponent } from '../../paginator/paginator.component'; -import { NgFor, NgIf } from '@angular/common'; import { IgxCheckboxComponent } from '../../checkbox/checkbox.component'; import { IgxGroupByRowSelectorDirective } from '../selection/row-selectors'; import { IgxGridStateDirective, IgxGrouping } from '../public_api'; @@ -2377,7 +2376,7 @@ describe('IgxGrid - GroupBy #grid', () => { expect(dataRows.length).toEqual(6); })); - + it('should update the UI when updating records via the UI after grouping is re-applied so that they more to the correct group', async () => { const fix = TestBed.createComponent(DefaultGridComponent); const grid = fix.componentInstance.instance; @@ -3970,13 +3969,15 @@ describe('IgxGrid - GroupBy #grid', () => { [dropAreaTemplate]='currentDropArea' [data]="data" [autoGenerate]="true" (columnInit)="columnsCreated($event)" (groupingDone)="groupingDoneHandler($event)"> - + @if (paging) { + + } Custom template `, - imports: [IgxGridComponent, IgxPaginatorComponent, NgIf] + imports: [IgxGridComponent, IgxPaginatorComponent] }) export class DefaultGridComponent extends DataParent { @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) @@ -4122,11 +4123,13 @@ export class CustomTemplateGridComponent extends DataParent { [width]='width' [height]='height' [data]="testData"> - + @for (c of columns; track c) { + + } `, - imports: [IgxGridComponent, IgxColumnComponent, NgFor] + imports: [IgxGridComponent, IgxColumnComponent] }) export class GroupByDataMoreColumnsComponent extends DataParent { @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts index 5c6e6cf5a96..971bfea8388 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.master-detail.spec.ts @@ -16,7 +16,6 @@ import { IgxCheckboxComponent } from '../../checkbox/checkbox.component'; import { clearGridSubs, setupGridScrollDetection } from '../../test-utils/helper-utils.spec'; import { SortingDirection } from '../../data-operations/sorting-strategy'; import { IgxPaginatorComponent } from '../../paginator/paginator.component'; -import { NgFor, NgIf } from '@angular/common'; import { IgxColumnLayoutComponent } from '../columns/column-layout.component'; import { CellType, IgxColumnComponent, IgxGridDetailTemplateDirective } from '../public_api'; @@ -1258,14 +1257,18 @@ describe('IgxGrid Master Detail #grid', () => { @Component({ template: ` - - - + @for (c of columns; track c) { + + + } + @if (paging) { + + }
- + Available
{{dataItem.Address}}
@@ -1281,7 +1284,7 @@ describe('IgxGrid Master Detail #grid', () => {
`, - imports: [IgxGridComponent, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxCheckboxComponent, IgxPaginatorComponent, IgxInputGroupComponent, IgxInputDirective, NgIf, NgFor] + imports: [IgxGridComponent, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxCheckboxComponent, IgxPaginatorComponent, IgxInputGroupComponent, IgxInputDirective] }) export class DefaultGridMasterDetailComponent { @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) @@ -1306,9 +1309,13 @@ export class DefaultGridMasterDetailComponent { template: ` - - - + @for (c of columns; track c) { + + + } + @if (paging) { + + }
@@ -1322,7 +1329,7 @@ export class DefaultGridMasterDetailComponent { `, - imports: [IgxGridComponent, IgxColumnComponent, IgxCheckboxComponent, IgxGridDetailTemplateDirective, IgxPaginatorComponent, NgIf, NgFor] + imports: [IgxGridComponent, IgxColumnComponent, IgxCheckboxComponent, IgxGridDetailTemplateDirective, IgxPaginatorComponent] }) export class AllExpandedGridMasterDetailComponent extends DefaultGridMasterDetailComponent implements OnInit { public expStates = new Map(); @@ -1351,7 +1358,9 @@ export class AllExpandedGridMasterDetailComponent extends DefaultGridMasterDetai - + @if (paging) { + + }
@@ -1364,7 +1373,7 @@ export class AllExpandedGridMasterDetailComponent extends DefaultGridMasterDetai `, - imports: [IgxGridComponent, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxColumnLayoutComponent, IgxCheckboxComponent, IgxPaginatorComponent, NgIf, NgFor] + imports: [IgxGridComponent, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxColumnLayoutComponent, IgxCheckboxComponent, IgxPaginatorComponent] }) export class MRLMasterDetailComponent extends DefaultGridMasterDetailComponent { } diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts index 6f8be74655a..ee4f9232287 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.integration.spec.ts @@ -15,7 +15,6 @@ import { IgxGridToolbarComponent } from '../toolbar/grid-toolbar.component'; import { IgxGridToolbarActionsComponent } from '../toolbar/common'; import { IgxGridToolbarHidingComponent } from '../toolbar/grid-toolbar-hiding.component'; import { IgxGridToolbarPinningComponent } from '../toolbar/grid-toolbar-pinning.component'; -import { NgFor, NgIf } from '@angular/common'; type FixtureType = ColumnLayoutGroupingTestComponent | ColumnLayouHidingTestComponent | ColumnLayoutResizingTestComponent @@ -904,7 +903,7 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { it('should create only one ghost element when dragging a column', async () => { const headers: DebugElement[] = fixture.debugElement.queryAll(By.css(COLUMN_HEADER_CLASS)); - + const header = headers[1].nativeElement; UIInteractions.simulatePointerEvent('pointerdown', header, 50, 50); await wait(); @@ -1226,19 +1225,25 @@ describe('IgxGrid - multi-row-layout Integration #grid - ', () => { @Component({ template: ` - - - - - - - - + @if (showToolbar) { + + + + + + } + @for (group of colGroups; track group) { + + @for (col of group.columns; track col) { + + } + + } `, - imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarActionsComponent, NgIf, NgFor] + imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarActionsComponent] }) export class ColumnLayouHidingTestComponent { @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) @@ -1274,19 +1279,25 @@ export class ColumnLayouHidingTestComponent { @Component({ template: ` - - - - - - - - + @if (showToolbar) { + + + + + + } + @for (group of colGroups; track group.group) { + + @for (col of group.columns; track col.field) { + + } + + } `, - imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarPinningComponent, IgxGridToolbarActionsComponent, NgFor, NgIf] + imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarPinningComponent, IgxGridToolbarActionsComponent] }) export class ColumnLayoutPinningTestComponent { @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) @@ -1322,14 +1333,18 @@ export class ColumnLayoutPinningTestComponent { @Component({ template: ` - - - + @for (group of colGroups; track group) { + + @for (col of group.columns; track col) { + + } + + } `, - imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent, NgFor] + imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent] }) export class ColumnLayoutFilteringTestComponent extends ColumnLayoutPinningTestComponent { } @@ -1337,14 +1352,18 @@ export class ColumnLayoutFilteringTestComponent extends ColumnLayoutPinningTestC @Component({ template: ` - - - + @for (group of colGroups; track group) { + + @for (col of group.columns; track col) { + + } + + } `, - imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent, NgFor] + imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent] }) export class ColumnLayoutGroupingTestComponent extends ColumnLayoutPinningTestComponent { public override showToolbar = false; @@ -1377,14 +1396,18 @@ export class ColumnLayoutGroupingTestComponent extends ColumnLayoutPinningTestCo @Component({ template: ` - - - - + @for (group of colGroups; track group.group) { + + @for (col of group.columns; track col) { + + + } + + } `, - imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent, NgFor] + imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent] }) export class ColumnLayoutResizingTestComponent { diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts index b252f3a6e3f..2b5ffd40f0b 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/grid.multi-row-layout.spec.ts @@ -1,4 +1,4 @@ -import { TestBed, fakeAsync } from '@angular/core/testing'; +import { TestBed, fakeAsync, tick } from '@angular/core/testing'; import { IgxGridComponent } from './grid.component'; import { Component, ViewChild } from '@angular/core'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; @@ -10,7 +10,6 @@ import { DefaultSortingStrategy, SortingDirection } from '../../data-operations/ import { configureTestSuite } from '../../test-utils/configure-suite'; import { ICellPosition } from '../common/events'; import { GridFunctions, GRID_MRL_BLOCK } from '../../test-utils/grid-functions.spec'; -import { NgFor } from '@angular/common'; import { IgxColumnGroupComponent } from '../columns/column-group.component'; import { IgxColumnComponent } from '../columns/column.component'; @@ -98,7 +97,7 @@ describe('IgxGrid - multi-row-layout #grid', () => { // verify block style let sizes = grid.columnList.first.getGridTemplate(false).split(' ').map(width => parseFloat(width).toFixed(2) + "px").join(' '); - + expect(sizes).toBe('200.33px 200.33px 200.33px'); expect(grid.columnList.first.getGridTemplate(true)).toBe('repeat(3,1fr)'); @@ -649,7 +648,7 @@ describe('IgxGrid - multi-row-layout #grid', () => { GridFunctions.verifyDOMMatchesLayoutSettings(grid, gridFirstRow, fixture.componentInstance.colGroups); fixture.componentInstance.colGroups = [{ - group: 'group1', + group: 'group3', columns: [ { field: 'ID', rowStart: 1, colStart: 1 }, { field: 'CompanyName', rowStart: 1, colStart: 2 }, @@ -845,10 +844,13 @@ describe('IgxGrid - multi-row-layout #grid', () => { ] } ]; - fixture.componentInstance.colGroups = []; + let colGroups = []; for (let i = 0; i < 3; i++) { - fixture.componentInstance.colGroups = fixture.componentInstance.colGroups.concat(uniqueGroups); + const groups = structuredClone(uniqueGroups) + .map(({ group, columns }) => ({ group: group + i, columns })); + colGroups = colGroups.concat(groups); } + fixture.componentInstance.colGroups = colGroups; grid.columnWidth = '200px'; fixture.componentInstance.grid.width = '600px'; fixture.detectChanges(); @@ -894,8 +896,6 @@ describe('IgxGrid - multi-row-layout #grid', () => { it('should apply horizontal virtualization correctly for widths in px, % and no-width columns.', fakeAsync(() => { const fixture = TestBed.createComponent(ColumnLayoutTestComponent); - fixture.detectChanges(); - const grid = fixture.componentInstance.grid; // test with px fixture.componentInstance.colGroups = [{ group: 'group1', @@ -909,6 +909,8 @@ describe('IgxGrid - multi-row-layout #grid', () => { }]; fixture.componentInstance.grid.width = '617px'; fixture.detectChanges(); + tick(); // Required to render scrollbars + const grid = fixture.componentInstance.grid; const horizontalVirtualization = grid.rowList.first.virtDirRow; expect(grid.hasHorizontalScroll()).toBeTruthy(); @@ -1142,14 +1144,18 @@ describe('IgxGrid - multi-row-layout #grid', () => { @Component({ template: ` - - - + @for (group of colGroups; track group.group) { + + @for (col of group.columns; track col.field) { + + } + + } `, - imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent, NgFor] + imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent] }) export class ColumnLayoutTestComponent { @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) @@ -1173,20 +1179,24 @@ export class ColumnLayoutTestComponent { template: ` - + - - - + @for (group of colGroups; track group) { + + @for (col of group.columns; track col) { + + } + + } `, - imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent, IgxColumnGroupComponent, NgFor] + imports: [IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent, IgxColumnGroupComponent] }) export class ColumnLayoutAndGroupsTestComponent extends ColumnLayoutTestComponent { diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html index cefa0b2d3fd..7362a297960 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.html @@ -1,12 +1,12 @@ - + @if (rowDraggable) {
- + } - + @if (showRowSelectors) {
- + }
diff --git a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts index f7736407720..4928dda109a 100644 --- a/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grid/groupby-row.component.ts @@ -11,7 +11,7 @@ import { OnDestroy, Inject } from '@angular/core'; -import { NgIf, NgTemplateOutlet, DecimalPipe, DatePipe, getLocaleCurrencyCode, PercentPipe, CurrencyPipe } from '@angular/common'; +import { NgTemplateOutlet, DecimalPipe, DatePipe, getLocaleCurrencyCode, PercentPipe, CurrencyPipe } from '@angular/common'; import { takeUntil } from 'rxjs/operators'; import { Subject } from 'rxjs'; @@ -34,7 +34,6 @@ import { IgxColumnFormatterPipe } from '../common/pipes'; selector: 'igx-grid-groupby-row', templateUrl: './groupby-row.component.html', imports: [ - NgIf, NgTemplateOutlet, DecimalPipe, DatePipe, diff --git a/projects/igniteui-angular/src/lib/grids/grouping/grid-group-by-area.component.ts b/projects/igniteui-angular/src/lib/grids/grouping/grid-group-by-area.component.ts index 90fcf051064..4e7b8bf3b1d 100644 --- a/projects/igniteui-angular/src/lib/grids/grouping/grid-group-by-area.component.ts +++ b/projects/igniteui-angular/src/lib/grids/grouping/grid-group-by-area.component.ts @@ -14,7 +14,7 @@ import { IgxGroupAreaDropDirective } from '../grid.directives'; import { IgxSuffixDirective } from '../../directives/suffix/suffix.directive'; import { IgxIconComponent } from '../../icon/icon.component'; import { IgxChipComponent } from '../../chips/chip.component'; -import { NgFor, NgTemplateOutlet } from '@angular/common'; +import { NgTemplateOutlet } from '@angular/common'; import { IgxChipsAreaComponent } from '../../chips/chips-area.component'; /** @@ -26,7 +26,7 @@ import { IgxChipsAreaComponent } from '../../chips/chips-area.component'; selector: 'igx-grid-group-by-area', templateUrl: 'group-by-area.component.html', providers: [{ provide: IgxGroupByAreaDirective, useExisting: IgxGridGroupByAreaComponent }], - imports: [IgxChipsAreaComponent, NgFor, IgxChipComponent, IgxIconComponent, IgxSuffixDirective, IgxGroupAreaDropDirective, IgxDropDirective, NgTemplateOutlet, IgxGroupByMetaPipe] + imports: [IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxSuffixDirective, IgxGroupAreaDropDirective, IgxDropDirective, NgTemplateOutlet, IgxGroupByMetaPipe] }) export class IgxGridGroupByAreaComponent extends IgxGroupByAreaDirective { @Input() diff --git a/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.component.html b/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.component.html index b44cc270a5d..b9f9dcc62b1 100644 --- a/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.component.html +++ b/projects/igniteui-angular/src/lib/grids/grouping/group-by-area.component.html @@ -1,5 +1,5 @@ - + @for (expression of chipExpressions; track expression.fieldName; let last = $last) { - + }
- +@if (grid.hasColumnLayouts && column.columnGroup) { + @if (grid.moving) { + + }
- - - - + @for (child of column.children; track child) { + @if (!child.hidden) { + + + } + }
- - + @if (grid.moving) { + + } +} @@ -30,8 +36,10 @@ - - +@if (!grid.hasColumnLayouts && column.columnGroup) { + @if (grid.moving) { + + }
- + @if (column.collapsible) {
- + }
-
- - - - -
- - + @if (grid.type !== 'pivot') { +
+ @for (child of column.children; track child) { + @if (!child.hidden) { + + + } + } +
+ } + @if (grid.moving) { + + } +} - - +@if (!column.columnGroup) { + @if (grid.moving) { + + } - - - - - + @if (grid.allowFiltering && grid.filterMode === 'quickFilter') { + + } + @if (!column.columnGroup && column.resizable) { + + + } + @if (grid.moving) { + + } +} diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts index aa1c1352e81..6607a21ff74 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-group.component.ts @@ -25,7 +25,7 @@ import { IgxResizeHandleDirective } from '../resizing/resize-handle.directive'; import { IgxIconComponent } from '../../icon/icon.component'; import { IgxColumnMovingDropDirective } from '../moving/moving.drop.directive'; import { IgxColumnMovingDragDirective } from '../moving/moving.drag.directive'; -import { NgIf, NgClass, NgStyle, NgFor, NgTemplateOutlet } from '@angular/common'; +import { NgClass, NgStyle, NgTemplateOutlet } from '@angular/common'; const Z_INDEX = 9999; @@ -36,7 +36,7 @@ const Z_INDEX = 9999; changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-group', templateUrl: './grid-header-group.component.html', - imports: [NgIf, NgClass, NgStyle, NgFor, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxIconComponent, NgTemplateOutlet, IgxGridHeaderComponent, IgxGridFilteringCellComponent, IgxResizeHandleDirective, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe] + imports: [NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxIconComponent, NgTemplateOutlet, IgxGridHeaderComponent, IgxGridFilteringCellComponent, IgxResizeHandleDirective, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe] }) export class IgxGridHeaderGroupComponent implements DoCheck { @@ -261,7 +261,7 @@ export class IgxGridHeaderGroupComponent implements DoCheck { */ @HostListener('mousedown', ['$event']) public onMouseDown(event: MouseEvent): void { - if (!this.grid.allowFiltering || + if (!this.grid.allowFiltering || (event.composedPath().findIndex(el => (el as Element).tagName?.toLowerCase() === 'igx-grid-filtering-cell') < 1)) { // Hack for preventing text selection in IE and Edge while dragging the resize element diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html index 938accf4fe9..fcbb9358d16 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.html @@ -5,26 +5,26 @@
- + @if (grid.moving && grid.columnInDrag && pinnedColumnCollection.length <= 0) { - - + } + @if (grid.moving && grid.columnInDrag && pinnedColumnCollection.length > 0) { - + } - + @if (grid.rowDraggable) {
- + } - + @if (grid.showRowSelectors) {
- + } - + @if (isHierarchicalGrid) {
- + } - + @if (grid?.groupingExpressions?.length) {
- + } - - + @if (pinnedColumnCollection.length && grid.isPinningToStart) { + @for (column of pinnedColumnCollection | igxTopLevel; track trackPinnedColumn(column)) { - - + } + } - - + @if (pinnedColumnCollection.length && !grid.isPinningToStart) { + @for (column of pinnedColumnCollection | igxTopLevel; track trackPinnedColumn(column)) { - - + } + }
- + @if (grid.filteringService.isFilterRowVisible) { - + } - + @if (grid.moving && grid.columnInDrag) { - + }
diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts index 80067809dc9..4e664f1f249 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header-row.component.ts @@ -11,7 +11,7 @@ import { ViewChildren, booleanAttribute } from '@angular/core'; -import { flatten } from '../../core/utils'; +import { flatten, trackByIdentity } from '../../core/utils'; import { IgxGridForOfDirective } from '../../directives/for-of/for_of.directive'; import { ColumnType, GridType, IgxHeadSelectorTemplateContext } from '../common/grid.interface'; import { IgxGridFilteringCellComponent } from '../filtering/base/grid-filtering-cell.component'; @@ -22,7 +22,7 @@ import { IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe } from './pipes'; import { IgxGridTopLevelColumns } from '../common/pipes'; import { IgxCheckboxComponent } from '../../checkbox/checkbox.component'; import { IgxColumnMovingDropDirective } from '../moving/moving.drop.directive'; -import { NgIf, NgTemplateOutlet, NgClass, NgFor, NgStyle } from '@angular/common'; +import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common'; /** * @@ -36,7 +36,7 @@ import { NgIf, NgTemplateOutlet, NgClass, NgFor, NgStyle } from '@angular/common changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header-row', templateUrl: './grid-header-row.component.html', - imports: [NgIf, IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, NgFor, IgxGridHeaderGroupComponent, NgStyle, IgxGridForOfDirective, IgxGridFilteringRowComponent, IgxCheckboxComponent, IgxGridTopLevelColumns, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe] + imports: [IgxColumnMovingDropDirective, NgTemplateOutlet, NgClass, IgxGridHeaderGroupComponent, NgStyle, IgxGridForOfDirective, IgxGridFilteringRowComponent, IgxCheckboxComponent, IgxGridTopLevelColumns, IgxHeaderGroupWidthPipe, IgxHeaderGroupStylePipe] }) export class IgxGridHeaderRowComponent implements DoCheck { @@ -198,4 +198,7 @@ export class IgxGridHeaderRowComponent implements DoCheck { this.grid.selectionService.selectAllRows(event); } } + + /** state persistence switching all pinned columns resets collection */ + protected trackPinnedColumn = trackByIdentity; } diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html index 1864eb10869..d142eeae4b5 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.html @@ -18,19 +18,19 @@ *ngTemplateOutlet="column.headerTemplate ? column.headerTemplate : defaultColumn; context: { $implicit: column, column: column}"> - +@if (!column.columnGroup) {
- + @if (column.sortable && !disabled) {
- - + } + @if (grid.allowFiltering && column.filterable && grid.filterMode === 'excelStyleFilter') {
- + }
- +} diff --git a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts index b4c719b4a01..c691ba3c8d3 100644 --- a/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts +++ b/projects/igniteui-angular/src/lib/grids/headers/grid-header.component.ts @@ -19,7 +19,7 @@ import { ColumnType, GridType, IGX_GRID_BASE } from '../common/grid.interface'; import { GridSelectionMode } from '../common/enums'; import { SortingDirection } from '../../data-operations/sorting-strategy'; import { SortingIndexPipe } from './pipes'; -import { NgTemplateOutlet, NgIf, NgClass } from '@angular/common'; +import { NgTemplateOutlet, NgClass } from '@angular/common'; import { IgxIconComponent } from '../../icon/icon.component'; import { ExpressionsTreeUtil } from '../../data-operations/expressions-tree-util'; @@ -30,7 +30,7 @@ import { ExpressionsTreeUtil } from '../../data-operations/expressions-tree-util changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-header', templateUrl: 'grid-header.component.html', - imports: [IgxIconComponent, NgTemplateOutlet, NgIf, NgClass, SortingIndexPipe] + imports: [IgxIconComponent, NgTemplateOutlet, NgClass, SortingIndexPipe] }) export class IgxGridHeaderComponent implements DoCheck, OnDestroy { diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts index 6ec8fa6978e..1ce7118cd4a 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-cell.component.ts @@ -22,14 +22,14 @@ import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { IgxIconComponent } from '../../icon/icon.component'; import { IgxTextHighlightDirective } from '../../directives/text-highlight/text-highlight.directive'; import { IgxChipComponent } from '../../chips/chip.component'; -import { NgIf, NgClass, NgTemplateOutlet, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe } from '@angular/common'; +import { NgClass, NgTemplateOutlet, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe } from '@angular/common'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-hierarchical-grid-cell', templateUrl: '../cell.component.html', providers: [HammerGesturesManager], - imports: [NgIf, IgxChipComponent, IgxTextHighlightDirective, IgxIconComponent, NgClass, FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxTextSelectionDirective, IgxCheckboxComponent, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxSuffixDirective, NgTemplateOutlet, IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe] + imports: [IgxChipComponent, IgxTextHighlightDirective, IgxIconComponent, NgClass, FormsModule, ReactiveFormsModule, IgxInputGroupComponent, IgxInputDirective, IgxFocusDirective, IgxTextSelectionDirective, IgxCheckboxComponent, IgxDatePickerComponent, IgxTimePickerComponent, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxSuffixDirective, NgTemplateOutlet, IgxTooltipTargetDirective, IgxTooltipDirective, IgxGridCellImageAltPipe, IgxStringReplacePipe, IgxColumnFormatterPipe, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe] }) export class IgxHierarchicalGridCellComponent extends IgxGridCellComponent implements OnInit { // protected hSelection; diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html index 604d707b2e3..962169bcf4d 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.html @@ -18,32 +18,39 @@
- - + @if (moving && columnInDrag && pinnedColumns.length <= 0) { + + } + @if (moving && columnInDrag && pinnedColumns.length > 0) { + + } - -
- - - - -
- + @if (data + | gridTransaction:id:pipeTrigger + | visibleColumns:hasVisibleColumns + | gridAddRow:true:pipeTrigger + | gridRowPinning:id:true:pipeTrigger + | gridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:id:pipeTrigger:filteringPipeTrigger:true + | gridSort:sortingExpressions:[]:sortStrategy:id:pipeTrigger:true; as pinnedData + ) { + @if (pinnedData.length > 0) { +
+ @for (rowData of pinnedData; track rowData; let rowIndex = $index) { + + + } +
+ } + } @@ -85,25 +92,35 @@ 'igx-grid__tr-container': true, 'igx-grid__tr--highlighted':isRowHighlighted(rowData) }"> - - + @for (layout of childLayoutList; track layout) { + + + }
- + @if (moving && columnInDrag) { + + }
- + @if (!this.parent) { + + }
- - + @if (shouldOverlayLoading) { + + + }
- + @if (moving && columnInDrag) { + + }
@@ -120,12 +137,14 @@
- - + (keydown)="navigation.summaryNav($event)"> + @if (hasSummarizedColumns && rootSummariesEnabled) { + + + }
@@ -149,18 +168,22 @@ {{emptyFilteredGridMessage}} - - - + @if (showAddButton) { + + + + } {{emptyGridMessage}} - - - + @if (showAddButton) { + + + + } @@ -190,13 +213,15 @@ -
-
- - +@if (rowEditable) { +
+
+ + +
-
+} {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }} @@ -226,7 +251,9 @@ - +@if (colResizingService.showResizer) { + +}
@if (platform.isElements) { diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts index 7e23eff7060..a06f2a229f7 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts @@ -22,7 +22,7 @@ import { ViewChildren, ViewContainerRef } from '@angular/core'; -import { NgIf, NgClass, NgFor, NgTemplateOutlet, NgStyle } from '@angular/common'; +import { NgClass, NgTemplateOutlet, NgStyle } from '@angular/common'; import { IgxHierarchicalGridAPIService } from './hierarchical-grid-api.service'; import { IgxRowIslandComponent } from './row-island.component'; @@ -314,9 +314,7 @@ export class IgxChildGridRowComponent implements AfterViewInit, OnInit { IgxRowIslandAPIService ], imports: [ - NgIf, NgClass, - NgFor, NgTemplateOutlet, NgStyle, IgxGridHeaderRowComponent, diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts index 7c6906103bb..baa369f3828 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.spec.ts @@ -13,7 +13,6 @@ import { IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirecti import { GridSelectionMode, Size } from '../common/enums'; import { GridFunctions } from '../../test-utils/grid-functions.spec'; import { IgxGridCellComponent } from '../cell.component'; -import { NgFor, NgIf } from '@angular/common'; import { IgxIconComponent } from '../../icon/icon.component'; import { IgxExcelStyleColumnOperationsTemplateDirective, IgxExcelStyleFilterOperationsTemplateDirective, IgxGridExcelStyleFilteringComponent } from '../filtering/excel-style/excel-style-filtering.component'; import { IgxExcelStyleHeaderComponent } from '../filtering/excel-style/excel-style-header.component'; @@ -1320,7 +1319,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { hierarchicalGrid = fixture.componentInstance.hgrid; }); - it('should render correct columns when setting columns for child in AfterViewInit using ngFor', () => { + it('should render correct columns when setting columns for child in AfterViewInit using @for', () => { const gridHead = fixture.debugElement.query(By.css(THEAD_CLASS)); const colHeaders = gridHead.queryAll(By.css('igx-grid-header')); expect(colHeaders.length).toEqual(2); @@ -1356,7 +1355,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { expect(child2Headers[2].nativeElement.innerText).toEqual('Col1'); }); - it('should render correct columns when setting columns for parent and child post init using ngFor', fakeAsync(() => { + it('should render correct columns when setting columns for parent and child post init using @for', fakeAsync(() => { const row = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent; UIInteractions.simulateClickAndSelectEvent(row.expander); fixture.detectChanges(); @@ -1882,10 +1881,12 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { @Component({ template: ` - - - + [autoGenerate]="false" [height]="'400px'" [width]="width" #hierarchicalGrid> + + @if (showAnotherCol) { + + } + @@ -1896,7 +1897,7 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => { `, - imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent, NgIf] + imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent] }) export class IgxHierarchicalGridTestBaseComponent { @ViewChild('hierarchicalGrid', { read: IgxHierarchicalGridComponent, static: true }) public hgrid: IgxHierarchicalGridComponent; @@ -1934,11 +1935,15 @@ export class IgxHierarchicalGridTestBaseComponent { @Component({ template: ` - - + + - - + @if (toggleColumns) { + + } + @if (toggleColumns) { + + } @@ -1946,7 +1951,7 @@ export class IgxHierarchicalGridTestBaseComponent { `, - imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent, NgIf] + imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent] }) export class IgxHierarchicalGridMultiLayoutComponent extends IgxHierarchicalGridTestBaseComponent { @ViewChild('rowIsland1', { read: IgxRowIslandComponent, static: true }) public rowIsland1: IgxRowIslandComponent; @@ -2019,15 +2024,21 @@ export class IgxHGridRemoteOnDemandComponent { - + @for (colField of parentCols; track colField) { + + } - + @for (colField of islandCols1; track colField) { + + } - + @for (colField of islandCols2; track colField) { + + } `, - imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent, NgFor] + imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent] }) export class IgxHierarchicalGridColumnsUpdateComponent extends IgxHierarchicalGridTestBaseComponent implements AfterViewInit { public cols1 = ['ID', 'ProductName', 'Col1', 'Col2', 'Col3']; @@ -2080,13 +2091,17 @@ export class IgxHierarchicalGridSizingComponent { @Component({ template: ` - - - - + [autoGenerate]="true" [height]="'400px'" [width]="'500px'" #hierarchicalGrid> + @if (toggleRI) { + + @if (toggleChildRI) { + + + } + + } `, - imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent, NgIf] + imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent] }) export class IgxHierarchicalGridToggleRIComponent extends IgxHierarchicalGridTestBaseComponent { public toggleRI = true; @@ -2096,13 +2111,19 @@ public toggleChildRI = true; @Component({ template: ` - - - - + [autoGenerate]="false" [height]="'400px'" [width]="'500px'"> + @if (toggleColumns) { + + } + @if (toggleColumns) { + + } + @if (toggleRI) { + + + } `, - imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent, NgIf] + imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxRowIslandComponent] }) export class IgxHierarchicalGridToggleRIAndColsComponent extends IgxHierarchicalGridToggleRIComponent { public override toggleRI = false; diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html index 918ede26d54..42d4a19c5d3 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.html @@ -19,14 +19,14 @@ - + @if (rowDraggable) {
- + } - + @if (showRowSelectors) {
- + } -
- - -
+ @if (hasChildren) { +
+ + +
+ } - + @if (pinnedColumns.length > 0 && grid.isPinningToStart) { - + } - + @if (pinnedColumns.length > 0 && !grid.isPinningToStart) { - + }
@@ -99,33 +101,34 @@ - - + @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) { + + + } diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts index 82949482523..e1b448b5b33 100644 --- a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-row.component.ts @@ -17,14 +17,14 @@ import { IgxCheckboxComponent } from '../../checkbox/checkbox.component'; import { IgxGridForOfDirective } from '../../directives/for-of/for_of.directive'; import { IgxRowDragDirective } from '../row-drag.directive'; import { IgxIconComponent } from '../../icon/icon.component'; -import { NgTemplateOutlet, NgIf, NgClass, NgStyle, NgFor } from '@angular/common'; +import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-hierarchical-grid-row', templateUrl: './hierarchical-row.component.html', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxHierarchicalRowComponent) }], - imports: [NgTemplateOutlet, IgxIconComponent, NgIf, IgxRowDragDirective, NgClass, IgxGridForOfDirective, IgxHierarchicalGridCellComponent, NgStyle, IgxCheckboxComponent, NgFor, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe] + imports: [NgTemplateOutlet, IgxIconComponent, IgxRowDragDirective, NgClass, IgxGridForOfDirective, IgxHierarchicalGridCellComponent, NgStyle, IgxCheckboxComponent, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe] }) export class IgxHierarchicalRowComponent extends IgxRowDirective { @ViewChild('expander', { read: ElementRef }) diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.html index 08f0109e206..5a41d48b3bb 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.html +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.html @@ -10,160 +10,168 @@ /> - - - {{ item.displayName || item.memberName }} - - - - {{ item.displayName || item.member }} - + @for ( + item of dims | filterPivotItems: input.value:grid?.pipeTrigger; + track item.memberName + ) { + + + {{ item.displayName || item.memberName }} + + } + @for ( + item of values | filterPivotItems: input.value:grid?.pipeTrigger; + track item + ) { + + + {{ item.displayName || item.member }} + + }
- - - -
- {{ grid?.resourceStrings[panel.i18n] }} -
-
- - {{ this.grid ? this.grid[panel.dataKey].length : 0 }} -
- - - - - -
-
-
- {{ - item.aggregate.key - }} - ( - {{ item[panel.displayKey] || item[panel.itemKey] }} - ) -
- - -
-
- - - - - - -
+ +
+ {{ grid?.resourceStrings[panel.i18n] }} +
+
+ + {{ this.grid ? this.grid[panel.dataKey].length : 0 }}
- - -
+ + - {{ grid?.resourceStrings.igx_grid_pivot_selector_panel_empty }} -
- - + @if (this.grid && this.grid[panel.dataKey].length > 0) { + + @for ( + item of this.grid[panel.dataKey]; + track (item.memberName || item.member) + ) { + +
+
+
+ @if (panel.type === null) { + {{ + item.aggregate.key + }} + } + @if (panel.type === null) { + ( + } + {{ item[panel.displayKey] || item[panel.itemKey] }} + @if (panel.type === null) { + ) + } +
+ @if (panel.sortable && item.sortDirection) { + + + } +
+
+ @if (panel.type !== null) { + + + } + @if (panel.type === null) { + + + } + @if (panel.dragChannels.length > 0) { + + + } +
+
+ + } + + } + @if (this.grid && this.grid[panel.dataKey].length === 0) { +
+ {{ grid?.resourceStrings.igx_grid_pivot_selector_panel_empty }} +
+ } + + + } - - {{ item.label }} - + @for (item of aggregateList; track item) { + + {{ item.label }} + + } diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts index e530c093bbb..64ebfce8054 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-data-selector.component.ts @@ -40,7 +40,6 @@ import { IgxExpansionPanelComponent } from "../../expansion-panel/expansion-pane import { IgxAccordionComponent } from "../../accordion/accordion.component"; import { IgxCheckboxComponent } from "../../checkbox/checkbox.component"; import { IgxListItemComponent } from "../../list/list-item.component"; -import { NgFor, NgIf } from "@angular/common"; import { IgxListComponent } from "../../list/list.component"; import { IgxInputDirective } from "../../directives/input/input.directive"; import { IgxPrefixDirective } from "../../directives/prefix/prefix.directive"; @@ -85,7 +84,7 @@ interface IDataSelectorPanel { @Component({ selector: "igx-pivot-data-selector", templateUrl: "./pivot-data-selector.component.html", - imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, IgxInputDirective, IgxListComponent, NgFor, IgxListItemComponent, IgxCheckboxComponent, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxDropDirective, IgxExpansionPanelTitleDirective, IgxChipComponent, IgxExpansionPanelBodyComponent, NgIf, IgxDragDirective, IgxDropDownItemNavigationDirective, IgxDragHandleDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxFilterPivotItemsPipe] + imports: [IgxInputGroupComponent, IgxIconComponent, IgxPrefixDirective, IgxInputDirective, IgxListComponent, IgxListItemComponent, IgxCheckboxComponent, IgxAccordionComponent, IgxExpansionPanelComponent, IgxExpansionPanelHeaderComponent, IgxDropDirective, IgxExpansionPanelTitleDirective, IgxChipComponent, IgxExpansionPanelBodyComponent, IgxDragDirective, IgxDropDownItemNavigationDirective, IgxDragHandleDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxFilterPivotItemsPipe] }) export class IgxPivotDataSelectorComponent { diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html index f027ce2452c..f1cb6f73e0e 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html @@ -23,12 +23,14 @@ (dragStop)="selectionService.dragMode = $event" (scroll)="preventContainerScroll($event)" (dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode" [style.height.px]="totalHeight" [style.width.px]="pivotContentCalcWidth || null" #tbody [attr.aria-activedescendant]="activeDescendant"> - - 0) { + + } - + @if (shouldOverlayLoading) { + + + }
- + }
@@ -113,7 +119,9 @@
- +@if (colResizingService.showResizer) { + +}
@@ -130,51 +138,57 @@ -
- - - - -
+ @for (dim of rowDimensions; track dim.memberName; let dimIndex = $index) { +
+ + + + +
+ }
- + @if (dataView | pivotGridHorizontalRowGrouping:pivotConfiguration:pipeTrigger:regroupTrigger; as groupedData) { - + }
-
- - -
+ @if (columnDimensions.length > 0 || values.length > 0) { +
+ + +
+ } diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts index 1b91da92ff7..042519ef0c8 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts @@ -29,7 +29,7 @@ import { OnChanges, SimpleChanges } from '@angular/core'; -import { DOCUMENT, NgTemplateOutlet, NgIf, NgClass, NgStyle, NgFor } from '@angular/common'; +import { DOCUMENT, NgTemplateOutlet, NgClass, NgStyle } from '@angular/common'; import { first, take, takeUntil} from 'rxjs/operators'; import { IgxGridBaseDirective } from '../grid-base.directive'; @@ -159,8 +159,6 @@ const MINIMUM_COLUMN_WIDTH_SUPER_COMPACT = 104; IgxForOfScrollSyncService ], imports: [ - NgIf, - NgFor, NgClass, NgStyle, NgTemplateOutlet, diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface.ts index 5a4065ac5be..80adca67018 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.interface.ts @@ -112,7 +112,7 @@ export interface IPivotConfiguration { export interface IPivotDimension { /** Allows defining a hierarchy when multiple sub groups need to be extracted from single member. */ childLevel?: IPivotDimension; - /** Field name to use in order to extract value. */ + /** Unique member to extract related data field value or the result of the memberFunction. */ memberName: string; /* csTreatAsEvent: MemberFunctionHandler */ @@ -151,7 +151,7 @@ export interface IPivotDimension { * Configuration of a pivot value aggregation. */ export interface IPivotValue { - /** Field name to use in order to extract value. */ + /** Unique member to extract related data field value for aggregations. */ member: string; /** Display name to show instead of member for the column header of this value. **/ displayName?: string; diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html index 637e952d7fe..8d72f72940e 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.html @@ -2,62 +2,69 @@
-
- - - {{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}} - - - + + + @if (grid.filterDimensions.length === 0) { + {{grid.resourceStrings.igx_grid_pivot_empty_filter_drop_area}} + } + @for (filter of this.filterAreaDimensions; track filter; let last = $last) { + + + + + {{filter.displayName || filter.memberName}} + + @if (last) { + + } + } + + {{grid.resourceStrings.igx_grid_pivot_filter_drop_chip}} + + + @if (isFiltersButton && grid.filterDimensions.length !== 0) { +
+ (click)='onFiltersAreaDropdownClick($event)'> - {{filter.displayName || filter.memberName}} - - - - - - - {{grid.resourceStrings.igx_grid_pivot_filter_drop_chip}} - - -
- - - + +
+ }
-
+ }
-
- - {{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}} - - + + @if (grid.rowDimensions.length === 0) { + {{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}} + } + @for (row of grid.rowDimensions; track row.memberName; let last = $last) { + {{ row.displayName || row.memberName}} - - + @if (row.sortDirection) { + + + } - - - - - - {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}} - - -
+ @if (last) { + + } + } + + {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}} + + +
+ }
-
- - - - {{grid.resourceStrings.igx_grid_pivot_empty_column_drop_area}} - - - + + + @if (grid.columnDimensions.length === 0) { + + {{grid.resourceStrings.igx_grid_pivot_empty_column_drop_area}} + } + @for (col of grid.columnDimensions; track col.memberName; let last = $last) { + + - - - - - {{col.displayName || col.memberName}} - - + + + + + {{col.displayName || col.memberName}} + @if (col.sortDirection) { + + + } + + @if (last) { + + } + } + + {{grid.resourceStrings.igx_grid_pivot_column_drop_chip}} - - - - - - {{grid.resourceStrings.igx_grid_pivot_column_drop_chip}} - - -
+ +
+ } -
- - - {{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}} - - - + + + @if (grid.values.length === 0) { + {{grid.resourceStrings.igx_grid_pivot_empty_value_drop_area}} + } + @for (value of grid.values; track value.member; let last = $last) { + + -
- - -
- +
+ + +
+ + + @if (last) { + + } + } + + {{grid.resourceStrings.igx_grid_pivot_value_drop_chip}} - - - - - - {{grid.resourceStrings.igx_grid_pivot_value_drop_chip}} - - -
+ +
+ }
@@ -180,111 +198,117 @@
- + @if (!grid.pivotUI.showRowHeaders || grid.rowDimensions.length === 0) {
- - {{grid.resourceStrings.igx_grid_pivot_empty_row_drop_area}} - + } + @for (row of grid.rowDimensions; track row.memberName; let last = $last) { - - - - - {{ row.displayName || row.memberName}} + + + + + {{ row.displayName || row.memberName}} + @if (row.sortDirection) { - - - - - + } + + @if (last) { + + } + } {{grid.resourceStrings.igx_grid_pivot_row_drop_chip}} - + }
- + } - + @if (grid.pivotUI.showRowHeaders && grid.visibleRowDimensions.length > 0) {
- - - - + @for (dim of grid.visibleRowDimensions; track dim; let colIndex = $index; let isLast = $last) { + @if (getRowDimensionColumn(dim); as dimCol) { + + + } + }
- + } - - + @if (pinnedColumnCollection.length && grid.isPinningToStart) { + @for (column of pinnedColumnCollection | igxTopLevel; track column) { + [ngStyle]="column.headerGroupStyles | igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column" + [style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL" + [style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL" + (pointerdown)="grid.navigation.focusOutRowHeader($event)"> - - -
-
- - - - -
+ } + } +
+ @for (dimLevelColumns of columnDimensionsByLevel; track $index; let i = $index) { +
+ + + + +
+ }
- - + @if (pinnedColumnCollection.length && !grid.isPinningToStart) { + @for (column of pinnedColumnCollection | igxTopLevel; track column) { + [ngStyle]="column.headerGroupStyles |igxHeaderGroupStyle:column:grid.pipeTrigger" [column]="column" + [style.min-width]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL" + [style.flex-basis]="column.resolvedWidth | igxHeaderGroupWidth:grid.defaultHeaderGroupMinWidth:hasMRL" + [style.left]="column.rightPinnedOffset" (pointerdown)="grid.navigation.focusOutRowHeader($event)"> - - + } + }
@@ -293,21 +317,25 @@
- - {{ item.label }} - + @for (item of aggregateList; track item.key) { + + {{ item.label }} + + }
- - {{filter.displayName || filter.memberName}} - - + @for (filter of this.filterDropdownDimensions; track filter) { + + {{filter.displayName || filter.memberName}} + + } +
@@ -317,15 +345,16 @@
- - - {{filter.displayName || filter.memberName}} - + @for (filter of grid.filterDimensions; track filter) { + + + {{filter.displayName || filter.memberName}} + + }
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts index 4c1cf49841b..8ef6713927b 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-header-row.component.ts @@ -35,7 +35,7 @@ import { IgxBadgeComponent } from '../../badge/badge.component'; import { IgxPrefixDirective } from '../../directives/prefix/prefix.directive'; import { IgxIconComponent } from '../../icon/icon.component'; import { IgxDropDirective } from '../../directives/drag-drop/drag-drop.directive'; -import { NgIf, NgFor, NgTemplateOutlet, NgClass, NgStyle } from '@angular/common'; +import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common'; import { IgxPivotRowHeaderGroupComponent } from './pivot-row-header-group.component'; import { IgxPivotRowDimensionHeaderGroupComponent } from './pivot-row-dimension-header-group.component'; @@ -51,7 +51,7 @@ import { IgxPivotRowDimensionHeaderGroupComponent } from './pivot-row-dimension- changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-header-row', templateUrl: './pivot-header-row.component.html', - imports: [NgIf, IgxDropDirective, IgxChipsAreaComponent, NgFor, IgxChipComponent, IgxIconComponent, + imports: [IgxDropDirective, IgxChipsAreaComponent, IgxChipComponent, IgxIconComponent, IgxPrefixDirective, IgxBadgeComponent, IgxSuffixDirective, IgxDropDownItemNavigationDirective, NgTemplateOutlet, IgxGridHeaderGroupComponent, NgClass, NgStyle, IgxGridForOfDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxGridExcelStyleFilteringComponent, diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.html index 0ce641f9d02..e3c40924119 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.html +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.html @@ -9,8 +9,10 @@ - - +@if (!column.columnGroup) { + @if (grid.hasMovableColumns) { + + } - - - - + @if (!column.columnGroup && column.resizable) { + + + } + @if (grid.hasMovableColumns) { + + } +} diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts index d6c31e60447..1687303b5dd 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header-group.component.ts @@ -11,7 +11,7 @@ import { IgxHeaderGroupStylePipe } from '../headers/pipes'; import { IgxPivotResizeHandleDirective } from '../resizing/pivot-grid/pivot-resize-handle.directive'; import { IgxColumnMovingDropDirective } from '../moving/moving.drop.directive'; import { IgxColumnMovingDragDirective } from '../moving/moving.drag.directive'; -import { NgIf, NgClass, NgStyle } from '@angular/common'; +import { NgClass, NgStyle } from '@angular/common'; import { IgxIconComponent } from '../../icon/icon.component'; import { IMultiRowLayoutNode } from '../common/types'; @@ -22,7 +22,7 @@ import { IMultiRowLayoutNode } from '../common/types'; changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-dimension-header-group', templateUrl: './pivot-row-dimension-header-group.component.html', - imports: [IgxIconComponent, NgIf, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxPivotResizeHandleDirective, IgxHeaderGroupStylePipe] + imports: [IgxIconComponent, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxPivotResizeHandleDirective, IgxHeaderGroupStylePipe] }) export class IgxPivotRowDimensionHeaderGroupComponent extends IgxGridHeaderGroupComponent implements PivotRowHeaderGroupType { diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header.component.ts index 0b376ca5f87..afd14656238 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-header.component.ts @@ -5,7 +5,7 @@ import { GridType, IGX_GRID_BASE, PivotGridType } from '../common/grid.interface import { IgxGridHeaderComponent } from '../headers/grid-header.component'; import { IgxPivotColumnResizingService } from '../resizing/pivot-grid/pivot-resizing.service'; import { SortingIndexPipe } from '../headers/pipes'; -import { NgTemplateOutlet, NgIf, NgClass } from '@angular/common'; +import { NgTemplateOutlet, NgClass } from '@angular/common'; import { IgxIconComponent } from '../../icon/icon.component'; import { ISortingExpression, SortingDirection } from '../../data-operations/sorting-strategy'; import { takeUntil } from 'rxjs/operators'; @@ -19,7 +19,7 @@ import { PivotUtil } from './pivot-util'; changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-dimension-header', templateUrl: '../headers/grid-header.component.html', - imports: [IgxIconComponent, NgTemplateOutlet, NgIf, NgClass, SortingIndexPipe] + imports: [IgxIconComponent, NgTemplateOutlet, NgClass, SortingIndexPipe] }) export class IgxPivotRowDimensionHeaderComponent extends IgxGridHeaderComponent implements AfterViewInit { private pivotGrid: PivotGridType; diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-mrl-row.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-mrl-row.component.html index 8cd685921b7..7e917a0eeaf 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-mrl-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-mrl-row.component.html @@ -1,5 +1,7 @@ - +@for ( + cell of rowGroup | pivotGridHorizontalRowCellMerging:grid.pivotConfiguration:grid.pipeTrigger; + track getGroupKey(cell); let cellIndex = $index +) { - +} diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-mrl-row.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-mrl-row.component.ts index 9e8c61468b2..335008b8de8 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-mrl-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-dimension-mrl-row.component.ts @@ -14,10 +14,10 @@ import { } from '@angular/core'; import { IGX_GRID_BASE, PivotGridType } from '../common/grid.interface'; import { IgxGridHeaderRowComponent } from '../headers/grid-header-row.component'; -import { IPivotDimension, IPivotDimensionData, IPivotGridRecord } from './pivot-grid.interface'; -import { NgFor } from '@angular/common'; +import { IPivotDimension, IPivotDimensionData, IPivotGridHorizontalGroup, IPivotGridRecord } from './pivot-grid.interface'; import { IgxPivotRowDimensionContentComponent } from './pivot-row-dimension-content.component'; import { IgxPivotGridHorizontalRowCellMerging } from './pivot-grid.pipes'; +import { PivotUtil } from './pivot-util'; /** * @@ -31,7 +31,7 @@ import { IgxPivotGridHorizontalRowCellMerging } from './pivot-grid.pipes'; changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-dimension-mrl-row', templateUrl: './pivot-row-dimension-mrl-row.component.html', - imports: [NgFor, IgxPivotRowDimensionContentComponent, IgxPivotGridHorizontalRowCellMerging] + imports: [IgxPivotRowDimensionContentComponent, IgxPivotGridHorizontalRowCellMerging] }) export class IgxPivotRowDimensionMrlRowComponent extends IgxGridHeaderRowComponent { @@ -115,4 +115,10 @@ export class IgxPivotRowDimensionMrlRowComponent extends IgxGridHeaderRowCompone } return resWidth; } + + protected getGroupKey(group: IPivotGridHorizontalGroup) { + const rec = group.records[0]; + const key = PivotUtil.getRecordKey(rec, group.rootDimension); + return key; + } } diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-header-group.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-header-group.component.ts index e804570aed4..4af9f47c472 100644 --- a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-header-group.component.ts +++ b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-row-header-group.component.ts @@ -10,7 +10,7 @@ import { IgxHeaderGroupStylePipe } from '../headers/pipes'; import { IgxPivotResizeHandleDirective } from '../resizing/pivot-grid/pivot-resize-handle.directive'; import { IgxColumnMovingDropDirective } from '../moving/moving.drop.directive'; import { IgxColumnMovingDragDirective } from '../moving/moving.drag.directive'; -import { NgIf, NgClass, NgStyle } from '@angular/common'; +import { NgClass, NgStyle } from '@angular/common'; import { IgxIconComponent } from '../../icon/icon.component'; import { SortingDirection } from '../../data-operations/sorting-strategy'; @@ -21,7 +21,7 @@ import { SortingDirection } from '../../data-operations/sorting-strategy'; changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-pivot-row-header-group', templateUrl: './pivot-row-dimension-header-group.component.html', - imports: [IgxIconComponent, NgIf, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxPivotResizeHandleDirective, IgxHeaderGroupStylePipe] + imports: [IgxIconComponent, IgxPivotRowDimensionHeaderComponent, NgClass, NgStyle, IgxColumnMovingDragDirective, IgxColumnMovingDropDirective, IgxPivotResizeHandleDirective, IgxHeaderGroupStylePipe] }) export class IgxPivotRowHeaderGroupComponent extends IgxGridHeaderGroupComponent implements PivotRowHeaderGroupType { diff --git a/projects/igniteui-angular/src/lib/grids/row.directive.ts b/projects/igniteui-angular/src/lib/grids/row.directive.ts index b3b44e1f763..9b9b71b8d1b 100644 --- a/projects/igniteui-angular/src/lib/grids/row.directive.ts +++ b/projects/igniteui-angular/src/lib/grids/row.directive.ts @@ -26,6 +26,7 @@ import { CellType, ColumnType, GridType, IGX_GRID_BASE } from './common/grid.int import { mergeWith } from 'lodash-es'; import { Subject } from 'rxjs'; import { takeUntil } from 'rxjs/operators'; +import { trackByIdentity } from '../core/utils'; @Directive({ selector: '[igxRowBaseComponent]', @@ -599,4 +600,10 @@ export class IgxRowDirective implements DoCheck, AfterViewInit, OnDestroy { const dragIndicatorOff = this.grid.rowDragging && !this.dragging ? 'igx-grid__drag-indicator--off' : ''; return `${defaultDragIndicatorCssClass} ${dragIndicatorOff}`; } + + /** + * - state persistence switching all pinned columns resets collection + * - MRL unpinnedColumns igxFor modes entire child loop on unpin + */ + protected trackPinnedColumn = trackByIdentity; } diff --git a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts index 08521fb8754..2084025bb84 100644 --- a/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.directive.spec.ts @@ -17,7 +17,6 @@ import { DefaultSortingStrategy, ISortingExpression, SortingDirection } from '.. import { GridSelectionRange } from './common/types'; import { CustomFilter } from '../test-utils/grid-samples.spec'; import { IgxPaginatorComponent } from '../paginator/paginator.component'; -import { NgFor } from '@angular/common'; import { IgxColumnComponent, IgxColumnGroupComponent, IgxColumnLayoutComponent, IgxGridDetailTemplateDirective } from './public_api'; import { IColumnState, IGridState } from './state-base.directive'; @@ -880,35 +879,37 @@ class HelperFunctions { template: ` - - + @for (c of columns; track c) { + + + } Custom Content: {{cell.value}} `, - imports: [IgxGridComponent, IgxColumnComponent, IgxPaginatorComponent, IgxGridStateDirective, NgFor] + imports: [IgxGridComponent, IgxColumnComponent, IgxPaginatorComponent, IgxGridStateDirective] }) export class IgxGridStateComponent { @ViewChild('grid', { read: IgxGridComponent, static: true }) @@ -987,7 +988,7 @@ export class IgxGridStateWithDetailsComponent { `, - imports: [IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxGridStateDirective, NgFor] + imports: [IgxGridComponent, IgxColumnComponent, IgxColumnGroupComponent, IgxGridStateDirective] }) export class CollapsibleColumnGroupTestComponent { @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true }) diff --git a/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts b/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts index d1516d1f4e5..a6ec23656c4 100644 --- a/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.hierarchicalgrid.spec.ts @@ -15,7 +15,6 @@ import { ISortingExpression, SortingDirection } from '../data-operations/sorting import { GridSelectionRange } from './common/types'; import { IgxColumnComponent } from './public_api'; import { IgxPaginatorComponent } from '../paginator/paginator.component'; -import { NgFor } from '@angular/common'; import { IColumnState, IGridState } from './state-base.directive'; describe('IgxHierarchicalGridState - input properties #hGrid', () => { @@ -637,30 +636,9 @@ class HelperFunctions { @Component({ template: ` - - - - - + @for (c of columns; track c) { + + } + + + @for (c of childColumns; track c) { + + + } `, - imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxPaginatorComponent, IgxRowIslandComponent, IgxGridStateDirective, NgFor] + imports: [IgxHierarchicalGridComponent, IgxColumnComponent, IgxPaginatorComponent, IgxRowIslandComponent, IgxGridStateDirective] }) export class IgxHierarchicalGridTestExpandedBaseComponent { @ViewChild('hGrid', { read: IgxHierarchicalGridComponent, static: true }) public hgrid: IgxHierarchicalGridComponent; diff --git a/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts b/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts index 564e9e8dc5e..c3e853fb7e9 100644 --- a/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts +++ b/projects/igniteui-angular/src/lib/grids/state.treegrid.spec.ts @@ -16,7 +16,6 @@ import { IgxTreeGridComponent } from './tree-grid/public_api'; import { ISortingExpression } from '../data-operations/sorting-strategy'; import { GridSelectionRange } from './common/types'; import { IgxPaginatorComponent } from '../paginator/paginator.component'; -import { NgFor } from '@angular/common'; import { IgxColumnComponent } from './public_api'; import { IColumnState, IGridState } from './state-base.directive'; @@ -346,30 +345,32 @@ class HelperFunctions { - - + @for (c of columns; track c) { + + + } `, - imports: [IgxTreeGridComponent, IgxColumnComponent, IgxPaginatorComponent, IgxGridStateDirective, NgFor] + imports: [IgxTreeGridComponent, IgxColumnComponent, IgxPaginatorComponent, IgxGridStateDirective] }) export class IgxTreeGridTreeDataTestComponent { @ViewChild(IgxTreeGridComponent, { static: true }) public treeGrid: IgxTreeGridComponent; diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.html b/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.html index c6dadcaa324..f8f6c00aa31 100644 --- a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.html +++ b/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.html @@ -1,17 +1,14 @@ - +@if (hasSummary) { - - - -
- - {{ translateSummary(summary) }} - - {{ - formatSummaryResult(summary) - }} - -
- - +} + + @for (summary of summaryResults; track trackSummaryResult(summary)) { +
+ {{ translateSummary(summary) }} + + {{ formatSummaryResult(summary) }} + +
+ } + diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts b/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts index 9ca2d072e5f..8f4da37f72e 100644 --- a/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/summaries/summary-cell.component.ts @@ -4,15 +4,16 @@ import { IgxSummaryResult } from './grid-summary'; import { GridColumnDataType } from '../../data-operations/data-util'; -import { formatCurrency, formatDate, formatNumber, formatPercent, getLocaleCurrencyCode, getLocaleCurrencySymbol, NgIf, NgTemplateOutlet, NgFor } from '@angular/common'; +import { formatCurrency, formatDate, formatNumber, formatPercent, getLocaleCurrencyCode, getLocaleCurrencySymbol, NgTemplateOutlet } from '@angular/common'; import { ISelectionNode } from '../common/types'; import { ColumnType } from '../common/grid.interface'; +import { trackByIdentity } from '../../core/utils'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-grid-summary-cell', templateUrl: './summary-cell.component.html', - imports: [NgIf, NgTemplateOutlet, NgFor] + imports: [NgTemplateOutlet] }) export class IgxSummaryCellComponent { @@ -114,6 +115,9 @@ export class IgxSummaryCellComponent { this.column.pipeArgs.display : getLocaleCurrencySymbol(this.grid.locale); } + /** cached single summary res after filter resets collection */ + protected trackSummaryResult = trackByIdentity; + public translateSummary(summary: IgxSummaryResult): string { return this.grid.resourceStrings[`igx_grid_summary_${summary.key}`] || summary.label; } diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html b/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html index 6a07570631a..9bcc77428bb 100644 --- a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.html @@ -1,15 +1,15 @@ - - +@if (summaries.size) { + @if (grid.summariesMargin) {
- - + } + @if (pinnedColumns.length > 0 && grid.isPinningToStart) { - + } - + @if (pinnedColumns.length > 0 && !grid.isPinningToStart) { - - + } +} - + } diff --git a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts b/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts index dfe6211477b..6628188091d 100644 --- a/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/summaries/summary-row.component.ts @@ -17,7 +17,8 @@ import { IgxGridForOfDirective } from '../../directives/for-of/for_of.directive' import { IgxForOfSyncService } from '../../directives/for-of/for_of.sync.service'; import { ColumnType, GridType, IGX_GRID_BASE } from '../common/grid.interface'; import { IgxGridNotGroupedPipe } from '../common/pipes'; -import { NgIf, NgTemplateOutlet, NgFor } from '@angular/common'; +import { NgTemplateOutlet } from '@angular/common'; +import { trackByIdentity } from '../../core/utils'; @Component({ @@ -25,7 +26,7 @@ import { NgIf, NgTemplateOutlet, NgFor } from '@angular/common'; selector: 'igx-grid-summary-row', templateUrl: './summary-row.component.html', providers: [IgxForOfSyncService], - imports: [NgIf, NgTemplateOutlet, IgxGridForOfDirective, IgxSummaryCellComponent, NgFor, IgxGridNotGroupedPipe] + imports: [NgTemplateOutlet, IgxGridForOfDirective, IgxSummaryCellComponent, IgxGridNotGroupedPipe] }) export class IgxSummaryRowComponent implements DoCheck { @@ -118,4 +119,7 @@ export class IgxSummaryRowComponent implements DoCheck { $implicit: row }; } + + /** state persistence switching all pinned columns resets collection */ + protected trackPinnedColumn = trackByIdentity; } diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.html b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.html index 57869977324..6a517c59ef4 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.html +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.html @@ -8,6 +8,10 @@ - {{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }} - ({{ numberOfColumns }}) + @if (!ref.textContent.trim()) { + {{ grid?.resourceStrings.igx_grid_toolbar_advanced_filtering_button_label }} + } + @if (grid?.advancedFilteringExpressionsTree) { + ({{ numberOfColumns }}) + } diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts index ae9bb87c1f8..cf2b6a0fa39 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-advanced-filtering.component.ts @@ -2,7 +2,6 @@ import { AfterViewInit, Component, Inject, Input } from '@angular/core'; import { IgxToolbarToken } from './token'; import { OverlaySettings } from '../../services/overlay/utilities'; import { IgxIconComponent } from '../../icon/icon.component'; -import { NgIf } from '@angular/common'; import { IgxRippleDirective } from '../../directives/ripple/ripple.directive'; import { IgxButtonDirective } from '../../directives/button/button.directive'; import { IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree'; @@ -30,7 +29,7 @@ import { isTree } from '../../data-operations/expressions-tree-util'; @Component({ selector: 'igx-grid-toolbar-advanced-filtering', templateUrl: './grid-toolbar-advanced-filtering.component.html', - imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent, NgIf] + imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent] }) export class IgxGridToolbarAdvancedFilteringComponent implements AfterViewInit { protected numberOfColumns: number; diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.html b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.html index d74fb7a1a14..adbc7c8cf71 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.html +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.html @@ -5,31 +5,42 @@ - - {{ grid?.resourceStrings.igx_grid_toolbar_exporter_button_label }} - + @if (!ref.textContent.trim()) { + + {{ grid?.resourceStrings.igx_grid_toolbar_exporter_button_label }} + + }
    -
  • - - - - - {{ grid?.resourceStrings.igx_grid_toolbar_exporter_excel_entry_text}} - -
    • + @if (exportExcel) { +
  • + + + + @if (!excel.childNodes.length) { + + {{ grid?.resourceStrings.igx_grid_toolbar_exporter_excel_entry_text}} + + } +
    • + } -
  • - - - - - {{ grid?.resourceStrings.igx_grid_toolbar_exporter_csv_entry_text }} -
    • + @if (exportCSV) { +
  • + + + + @if (!csv.childNodes.length) { + + {{ grid?.resourceStrings.igx_grid_toolbar_exporter_csv_entry_text }} + + } +
    • + }
diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.ts b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.ts index fd6255e398e..a26a42dca40 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.ts +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-exporter.component.ts @@ -13,7 +13,6 @@ import { import { IgxToggleDirective } from '../../directives/toggle/toggle.directive'; import { GridType } from '../common/grid.interface'; import { IgxToolbarToken } from './token'; -import { NgIf } from '@angular/common'; import { IgxIconComponent } from '../../icon/icon.component'; import { IgxRippleDirective } from '../../directives/ripple/ripple.directive'; import { IgxButtonDirective } from '../../directives/button/button.directive'; @@ -51,7 +50,7 @@ export interface IgxExporterEvent { @Component({ selector: 'igx-grid-toolbar-exporter', templateUrl: './grid-toolbar-exporter.component.html', - imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent, NgIf, IgxToggleDirective, IgxExcelTextDirective, IgxCSVTextDirective] + imports: [IgxButtonDirective, IgxRippleDirective, IgxIconComponent, IgxToggleDirective, IgxExcelTextDirective, IgxCSVTextDirective] }) export class IgxGridToolbarExporterComponent extends BaseToolbarDirective { diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-hiding.component.html b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-hiding.component.html index 5f330d56e6b..9794e20a475 100644 --- a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-hiding.component.html +++ b/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar-hiding.component.html @@ -1,4 +1,4 @@ - +@if (grid.rendered$ | async) {
- +} @@ -252,25 +273,39 @@ -
- {{grid.resourceStrings.igx_grid_required_validation_error}} -
-
- {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }} -
-
- {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }} -
-
- {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }} -
-
- {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }} -
-
- {{grid.resourceStrings.igx_grid_email_validation_error }} -
-
- {{grid.resourceStrings.igx_grid_pattern_validation_error}} -
+ @if (formGroup?.get(column?.field).errors?.['required']) { +
+ {{grid.resourceStrings.igx_grid_required_validation_error}} +
+ } + @if (formGroup?.get(column?.field).errors?.['minlength']) { +
+ {{grid.resourceStrings.igx_grid_min_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.minlength.requiredLength }} +
+ } + @if (formGroup?.get(column?.field).errors?.['maxlength']) { +
+ {{grid.resourceStrings.igx_grid_max_length_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.maxlength.requiredLength }} +
+ } + @if (formGroup?.get(column?.field).errors?.['min']) { +
+ {{grid.resourceStrings.igx_grid_min_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.min.min }} +
+ } + @if (formGroup?.get(column?.field).errors?.['max']) { +
+ {{grid.resourceStrings.igx_grid_max_validation_error | igxStringReplace:'{0}':formGroup.get(column.field).errors.max.max }} +
+ } + @if (formGroup?.get(column?.field).errors?.['email']) { +
+ {{grid.resourceStrings.igx_grid_email_validation_error }} +
+ } + @if (formGroup?.get(column?.field).errors?.['pattern']) { +
+ {{grid.resourceStrings.igx_grid_pattern_validation_error}} +
+ } diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts index 062dc011059..e27d68065ba 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-cell.component.ts @@ -3,7 +3,7 @@ import { Component, Input } from '@angular/core'; -import { NgIf, NgClass, NgStyle, NgTemplateOutlet, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe } from '@angular/common'; +import { NgClass, NgStyle, NgTemplateOutlet, DecimalPipe, PercentPipe, CurrencyPipe, DatePipe } from '@angular/common'; import { HammerGesturesManager } from '../../core/touch'; import { IgxGridExpandableCellComponent } from '../grid/expandable-cell.component'; @@ -34,7 +34,6 @@ import { IgxTextSelectionDirective } from '../../directives/text-selection/text- templateUrl: 'tree-cell.component.html', providers: [HammerGesturesManager], imports: [ - NgIf, NgClass, NgStyle, NgTemplateOutlet, diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html index 0c253b596be..05bbb9e49c4 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.html @@ -6,87 +6,89 @@
- -
- -
- - -
- + @if (rowDraggable) { +
+ +
+ } + @if (showRowSelectors) { +
+ + +
+ } + @if (pinnedColumns.length > 0 && grid.isPinningToStart) { + + } + + + + -
- - - - - - - - - - - - + + + + + - + @if (pinnedColumns.length > 0 && !grid.isPinningToStart) { + + } - - - +
- + @for (col of pinnedColumns | igxNotGrouped; track trackPinnedColumn(col)) { - + - + } diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.ts index 7c3be816245..e84fa6ae9a5 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid-row.component.ts @@ -7,14 +7,14 @@ import { IgxTreeGridCellComponent } from './tree-cell.component'; import { IgxGridCellComponent } from '../cell.component'; import { IgxGridForOfDirective } from '../../directives/for-of/for_of.directive'; import { IgxRowDragDirective } from '../row-drag.directive'; -import { NgTemplateOutlet, NgIf, NgClass, NgStyle, NgFor } from '@angular/common'; +import { NgTemplateOutlet, NgClass, NgStyle } from '@angular/common'; @Component({ changeDetection: ChangeDetectionStrategy.OnPush, selector: 'igx-tree-grid-row', templateUrl: 'tree-grid-row.component.html', providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxTreeGridRowComponent) }], - imports: [NgTemplateOutlet, NgIf, IgxRowDragDirective, IgxGridForOfDirective, IgxGridCellComponent, NgClass, NgStyle, IgxTreeGridCellComponent, IgxCheckboxComponent, NgFor, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe] + imports: [NgTemplateOutlet, IgxRowDragDirective, IgxGridForOfDirective, IgxGridCellComponent, NgClass, NgStyle, IgxTreeGridCellComponent, IgxCheckboxComponent, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridCellStyleClassesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe] }) export class IgxTreeGridRowComponent extends IgxRowDirective implements DoCheck { @ViewChildren('treeCell') diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html index 23b405b715d..5983eb81ffa 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.html @@ -20,33 +20,40 @@ (dragStop)="selectionService.dragMode = $event" [attr.aria-activedescendant]="activeDescendant" [attr.role]="dataView.length ? null : 'row'" (dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode" [style.height.px]='totalHeight' [style.width.px]='calcWidth' #tbody (scroll)='preventContainerScroll($event)'> - - + @if (moving && columnInDrag && pinnedColumns.length <= 0) { + + } + @if (moving && columnInDrag && pinnedColumns.length > 0) { + + } - -
- - - - -
- + @if (data + | treeGridTransaction:pipeTrigger + | visibleColumns:hasVisibleColumns + | treeGridNormalizeRecord:pipeTrigger + | treeGridAddRow:true:pipeTrigger + | gridRowPinning:id:true:pipeTrigger + | treeGridFiltering:filteringExpressionsTree:filterStrategy:advancedFilteringExpressionsTree:pipeTrigger:filteringPipeTrigger:true + | treeGridSorting:sortingExpressions:treeGroupArea?.expressions:sortStrategy:pipeTrigger:true; as pinnedData + ) { + @if (pinnedData.length > 0) { +
+ @for (rowData of pinnedData; track trackPinnedRowData(rowData); let rowIndex = $index) { + + + } +
+ } + } - + @if (shouldOverlayLoading) { + + + }
- -
+ @if (moving && columnInDrag) { + + } +
@@ -114,12 +125,14 @@
- - + (keydown)="navigation.summaryNav($event)" [attr.aria-activedescendant]="activeDescendant"> + @if (hasSummarizedColumns && rootSummariesEnabled) { + + + }
@@ -142,18 +155,22 @@ {{emptyFilteredGridMessage}} - - - + @if (showAddButton) { + + + + } {{emptyGridMessage}} - - - + @if (showAddButton) { + + + + } @@ -170,13 +187,15 @@
-
-
- - +@if (rowEditable) { +
+
+ + +
-
+} {{ this.resourceStrings.igx_grid_row_edit_text | igxStringReplace:'{0}':rowChangesCount.toString() | igxStringReplace:'{1}':hiddenColumnsCount.toString() }} @@ -209,7 +228,9 @@ - +@if (colResizingService.showResizer) { + +}
@if (platform.isElements) { diff --git a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts index 9aa620cb3fd..a36bdc1af15 100644 --- a/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts +++ b/projects/igniteui-angular/src/lib/grids/tree-grid/tree-grid.component.ts @@ -23,7 +23,7 @@ import { CUSTOM_ELEMENTS_SCHEMA, booleanAttribute } from '@angular/core'; -import { DOCUMENT, NgIf, NgClass, NgFor, NgTemplateOutlet, NgStyle } from '@angular/common'; +import { DOCUMENT, NgClass, NgTemplateOutlet, NgStyle } from '@angular/common'; import { IgxTreeGridAPIService } from './tree-grid-api.service'; import { IgxGridBaseDirective } from '../grid-base.directive'; @@ -133,8 +133,6 @@ let NEXT_ID = 0; IgxForOfScrollSyncService ], imports: [ - NgIf, - NgFor, NgClass, NgStyle, NgTemplateOutlet, @@ -1076,6 +1074,13 @@ export class IgxTreeGridComponent extends IgxGridBaseDirective implements GridTy return this.treeGroupArea ? this.getComputedHeight(this.treeGroupArea.nativeElement) : 0; } + /** {@link triggerPipes} will re-create pinnedData on CRUD operations */ + protected trackPinnedRowData(record: ITreeGridRecord) { + // TODO FIX: pipeline data doesn't match end interface (¬_¬ ) + // return record.key || (record as any).rowID; + return record; + } + /** * @description A recursive way to deselect all selected children of a given record * @param recordID ID of the record whose children to deselect diff --git a/projects/igniteui-angular/src/lib/icon/icon.component.ts b/projects/igniteui-angular/src/lib/icon/icon.component.ts index 8186a6d85eb..dbd531ce68a 100644 --- a/projects/igniteui-angular/src/lib/icon/icon.component.ts +++ b/projects/igniteui-angular/src/lib/icon/icon.component.ts @@ -14,7 +14,6 @@ import type { IconReference } from "./types"; import { filter, takeUntil } from "rxjs/operators"; import { Subject } from "rxjs"; import { SafeHtml } from "@angular/platform-browser"; -import { NgIf, NgTemplateOutlet } from "@angular/common"; /** * Icon provides a way to include material icons to markup diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.html b/projects/igniteui-angular/src/lib/input-group/input-group.component.html index 64bd7ae925d..8b5a258edfa 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.html +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.html @@ -1,6 +1,10 @@ -
+@if (isTypeBox) { +
+ +
+} @else { -
+}
@@ -19,40 +23,44 @@ - - - + @if (isFileType) { + + + + } -
- {{ fileNames }} -
+ @if (isFileType) { +
+ {{ fileNames }} +
+ } - - - + @if (isFileType && isFilled) { + + + + } @@ -84,7 +92,9 @@
-
+ @if (hasBorder) { +
+ }
@@ -108,7 +118,9 @@
-
+ @if (hasBorder) { +
+ }
@@ -132,21 +144,18 @@ - - + @switch (theme) { + @case ('bootstrap') { - - - + } + @case ('fluent') { - - - + } + @case ('indigo') { - - - + } + @default { - - + } + } diff --git a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts index 3c1fbcd3a2d..4e07fcc07dc 100644 --- a/projects/igniteui-angular/src/lib/input-group/input-group.component.ts +++ b/projects/igniteui-angular/src/lib/input-group/input-group.component.ts @@ -1,4 +1,4 @@ -import { DOCUMENT, NgIf, NgTemplateOutlet, NgClass, NgSwitch, NgSwitchCase, NgSwitchDefault } from '@angular/common'; +import { DOCUMENT, NgTemplateOutlet, NgClass } from '@angular/common'; import { ChangeDetectorRef, Component, @@ -32,7 +32,7 @@ import { IgxTheme, THEME_TOKEN, ThemeToken } from '../services/theme/theme.token selector: 'igx-input-group', templateUrl: 'input-group.component.html', providers: [{ provide: IgxInputGroupBase, useExisting: IgxInputGroupComponent }], - imports: [NgIf, NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, NgClass, IgxSuffixDirective, IgxIconComponent, NgSwitch, NgSwitchCase, NgSwitchDefault] + imports: [NgTemplateOutlet, IgxPrefixDirective, IgxButtonDirective, NgClass, IgxSuffixDirective, IgxIconComponent] }) export class IgxInputGroupComponent implements IgxInputGroupBase { /** diff --git a/projects/igniteui-angular/src/lib/list/list-item.component.html b/projects/igniteui-angular/src/lib/list/list-item.component.html index a4f8f728522..ef538fa89f4 100644 --- a/projects/igniteui-angular/src/lib/list/list-item.component.html +++ b/projects/igniteui-angular/src/lib/list/list-item.component.html @@ -1,15 +1,19 @@ -
- - -
- -
- - -
+@if (!isHeader && list.listItemLeftPanningTemplate) { +
+ + +
+} + +@if (!isHeader && list.listItemRightPanningTemplate) { +
+ + +
+} @@ -33,15 +37,15 @@
- +@if (isHeader) { - +} - +@if (!isHeader) {
- +} diff --git a/projects/igniteui-angular/src/lib/list/list-item.component.ts b/projects/igniteui-angular/src/lib/list/list-item.component.ts index 6af120b0db6..6d4eb22a51d 100644 --- a/projects/igniteui-angular/src/lib/list/list-item.component.ts +++ b/projects/igniteui-angular/src/lib/list/list-item.component.ts @@ -18,7 +18,7 @@ import { import { HammerGesturesManager } from '../core/touch'; import { rem } from '../core/utils'; -import { NgIf, NgTemplateOutlet } from '@angular/common'; +import { NgTemplateOutlet } from '@angular/common'; /** * The Ignite UI List Item component is a container intended for row items in the Ignite UI for Angular List component. @@ -39,7 +39,7 @@ import { NgIf, NgTemplateOutlet } from '@angular/common'; selector: 'igx-list-item', templateUrl: 'list-item.component.html', changeDetection: ChangeDetectionStrategy.OnPush, - imports: [NgIf, NgTemplateOutlet] + imports: [NgTemplateOutlet] }) export class IgxListItemComponent implements IListChild { /** diff --git a/projects/igniteui-angular/src/lib/list/list.component.html b/projects/igniteui-angular/src/lib/list/list.component.html index 7b2c0a438d6..46bafca512b 100644 --- a/projects/igniteui-angular/src/lib/list/list.component.html +++ b/projects/igniteui-angular/src/lib/list/list.component.html @@ -12,7 +12,7 @@
- +@if (!children || children.length === 0 || isLoading) { - +} diff --git a/projects/igniteui-angular/src/lib/list/list.component.ts b/projects/igniteui-angular/src/lib/list/list.component.ts index 492b5e1e2a5..32b4d00b75d 100644 --- a/projects/igniteui-angular/src/lib/list/list.component.ts +++ b/projects/igniteui-angular/src/lib/list/list.component.ts @@ -1,4 +1,4 @@ -import { NgIf, NgTemplateOutlet } from '@angular/common'; +import { NgTemplateOutlet } from '@angular/common'; import { Component, ContentChild, @@ -146,7 +146,7 @@ export class IgxListLineSubTitleDirective { selector: 'igx-list', templateUrl: 'list.component.html', providers: [{ provide: IgxListBaseDirective, useExisting: IgxListComponent }], - imports: [NgIf, NgTemplateOutlet] + imports: [NgTemplateOutlet] }) export class IgxListComponent extends IgxListBaseDirective { /** diff --git a/projects/igniteui-angular/src/lib/navbar/navbar.component.html b/projects/igniteui-angular/src/lib/navbar/navbar.component.html index 67191d51d76..772a0a5e3f7 100644 --- a/projects/igniteui-angular/src/lib/navbar/navbar.component.html +++ b/projects/igniteui-angular/src/lib/navbar/navbar.component.html @@ -1,19 +1,20 @@

[alignment]="properties.alignment" [disabled]="properties.disabled" > - @for(city of cities; track city){ + @for (city of cities; track city){ Weekday format - @for(option of ['narrow', 'short', 'long']; track option) { + @for (option of ['narrow', 'short', 'long']; track option) {
@@ -81,8 +91,12 @@
{{cell.value | currency:'USD':'symbol':'1.4-4'}} - trending_up - trending_down + @if (trends.positive(cell.row.data)) { + trending_up + } + @if (trends.negative(cell.row.data)) { + trending_down + }
@@ -92,10 +106,12 @@ - - + @for (c of columns; track c) { + + + }
@@ -113,8 +129,12 @@
{{cell.value | currency:'USD':'symbol':'1.4-4'}} - trending_up - trending_down + @if (trends.positive(cell.row.data)) { + trending_up + } + @if (trends.negative(cell.row.data)) { + trending_down + }
@@ -124,10 +144,12 @@ - - + @for (c of columns; track c) { + + + }
@@ -146,8 +168,12 @@
{{cell.value | currency:'USD':'symbol':'1.4-4'}} - trending_up - trending_down + @if (trends.positive(cell.row.data)) { + trending_up + } + @if (trends.negative(cell.row.data)) { + trending_down + }
@@ -157,10 +183,12 @@ - - + @for (c of columns; track c) { + + + }
diff --git a/src/app/dockmanager-grid/dockmanager-grid.sample.ts b/src/app/dockmanager-grid/dockmanager-grid.sample.ts index a69d35d6db6..d43818f503a 100644 --- a/src/app/dockmanager-grid/dockmanager-grid.sample.ts +++ b/src/app/dockmanager-grid/dockmanager-grid.sample.ts @@ -5,7 +5,7 @@ import { defineCustomElements } from 'igniteui-dockmanager/loader'; import { Subject } from 'rxjs'; import { first, takeUntil } from 'rxjs/operators'; -import { CommonModule, NgFor } from '@angular/common'; +import { CommonModule } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { SignalRService } from './signal-r.service'; @@ -48,7 +48,6 @@ export class DockSlotComponent implements AfterViewInit, OnDestroy { styleUrls: ['dockmanager-grid.sample.scss'], templateUrl: 'dockmanager-grid.sample.html', imports: [ - NgFor, CommonModule, FormsModule, IGX_GRID_DIRECTIVES, diff --git a/src/app/drag-drop/drag-drop.sample.html b/src/app/drag-drop/drag-drop.sample.html index 1fcf609e085..7166d42a69b 100644 --- a/src/app/drag-drop/drag-drop.sample.html +++ b/src/app/drag-drop/drag-drop.sample.html @@ -5,8 +5,12 @@

No ghost dragging:

- Drag me - Weeeee + @if (!draggedElem) { + Drag me + } + @if (draggedElem) { + Weeeee + } edit
@@ -14,8 +18,12 @@

No ghost dragging:

- Drag me - Weeeee + @if (!draggedElem) { + Drag me + } + @if (draggedElem) { + Weeeee + } edit
@@ -28,12 +36,20 @@

Ghost and base templating:

- Drag me + @if (!customDragged) { + Drag me + }
- Weeeee - It's ok here - Pls no + @if (!ghostInDropArea) { + Weeeee + } + @if (ghostInDropArea && friendlyArea) { + It's ok here + } + @if (ghostInDropArea && !friendlyArea) { + Pls no + }
@@ -43,12 +59,20 @@

Ghost and base templating:

- Drag me + @if (!customDraggedScroll) { + Drag me + }
- Weeeee - It's ok here - Pls no + @if (!ghostInDropArea) { + Weeeee + } + @if (ghostInDropArea && friendlyArea) { + It's ok here + } + @if (ghostInDropArea && !friendlyArea) { + Pls no + }
@@ -94,18 +118,22 @@

Nested Drag Handle:

drag_indicator Movies list
-
-
- drag_indicator - {{category.text}} -
-
+ @for (category of categoriesNotes; track category) { +
drag_indicator - {{note.text}} + {{category.text}}
+ @for (note of getCategoryMovies(category.text); track note) { +
+
+ drag_indicator + {{note.text}} +
+
+ }
-
+ }
@@ -140,8 +168,12 @@

Playground:

No ghost dragging:

- Drag me - Weeeee + @if (!draggedElem) { + Drag me + } + @if (draggedElem) { + Weeeee + }
@@ -151,9 +183,15 @@

Playground:

- Weeeee - It's ok here - Pls no + @if (!ghostInDropArea) { + Weeeee + } + @if (ghostInDropArea && friendlyArea) { + It's ok here + } + @if (ghostInDropArea && !friendlyArea) { + Pls no + }
@@ -161,20 +199,24 @@

Playground:

-
- Drag me + @if (!customDraggedAnim) { + Drag me + }
-
- Drag me + @if (!customDraggedAnimScroll) { + Drag me + }
@@ -186,7 +228,9 @@

Playground:

- Drag me + @if (!customDraggedAnimXY) { + Drag me + }
@@ -199,7 +243,9 @@

Playground:

- Drag me + @if (!customDraggedAnimHostXY) { + Drag me + }
@@ -216,12 +262,14 @@

Playground:

Wishlist reorder with transitions:

-
- {{item.text}} -
+ @for (item of listNotes; track item; let itemIndex = $index) { +
+ {{item.text}} +
+ }
@@ -231,32 +279,37 @@

Wishlist reorder with transitions:

Multi selection row drag with custom ghost:

From
-
+ @for (item of sourceRows; track item) { +
{{ item.name }} -
+
+ }
To
-
- {{ item.name }} -
+ @for (item of targetRows; track item) { +
+ {{ item.name }} +
+ }
- - {{ row.name }} - + @for (row of selectedRows; track row) { + + {{ row.name }} + + }
@@ -267,14 +320,16 @@

Multi selection row drag with custom ghost:

Drag a suspect inside or outside the cage:

-
- {{elem.value}} -
+ @for (elem of draggableElems; track elem) { +
+ {{elem.value}} +
+ }
- - + @for (c of columns; track c) { + + + }

Grid sample with rowClasses property applied based on row ID

Grid sample with rowClasses property applied based on r [pinning]='pinningConfig' (cellClick)="selectedRowId = $event.cell.row.key" > - - + @for (c of columns; track c) { + + + } @@ -71,16 +75,18 @@

Grid sample with rowClasses property applied based on r width="80%" height="600px" > - - + @for (c of columns; track c) { + + + }

diff --git a/src/app/gird-cell-styling/grid-cell-styling.sample.ts b/src/app/gird-cell-styling/grid-cell-styling.sample.ts index 0cae74c0fc4..07c2a00de5b 100644 --- a/src/app/gird-cell-styling/grid-cell-styling.sample.ts +++ b/src/app/gird-cell-styling/grid-cell-styling.sample.ts @@ -1,5 +1,5 @@ import { Component, ViewChild, OnInit } from '@angular/core'; -import { NgFor, JsonPipe } from '@angular/common'; +import { JsonPipe } from '@angular/common'; import { SAMPLE_DATA, HIERARCHICAL_SAMPLE_DATA } from '../shared/sample-data'; import { IgxActionStripComponent, IgxButtonDirective, IgxColumnComponent, IgxGridComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, IgxHintDirective, IgxInputDirective, IgxInputGroupComponent, IgxTreeGridComponent, IPinningConfig, RowPinningPosition, RowType } from 'igniteui-angular'; @@ -9,7 +9,7 @@ import { IgxActionStripComponent, IgxButtonDirective, IgxColumnComponent, IgxGri selector: 'app-grid-cell-styling.sample', styleUrls: ['grid-cell-styling.sample.scss'], templateUrl: 'grid-cell-styling.sample.html', - imports: [IgxButtonDirective, IgxInputGroupComponent, IgxInputDirective, IgxHintDirective, IgxGridComponent, NgFor, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent, IgxTreeGridComponent, JsonPipe] + imports: [IgxButtonDirective, IgxInputGroupComponent, IgxInputDirective, IgxHintDirective, IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent, IgxTreeGridComponent, JsonPipe] }) export class GridCellStylingSampleComponent implements OnInit { @ViewChild('grid1', { static: true }) diff --git a/src/app/grid-add-row/grid-add-row.sample.html b/src/app/grid-add-row/grid-add-row.sample.html index 1e340da6cec..abd3b0fe7b3 100644 --- a/src/app/grid-add-row/grid-add-row.sample.html +++ b/src/app/grid-add-row/grid-add-row.sample.html @@ -15,27 +15,28 @@ (rowDelete)="log($event)" (rowDeleted)="log($event)" > - - + @for (c of columns; track c) { + + + } - - + @if (paging) { + + + } @@ -46,7 +47,9 @@

Settings

- {{value}} + @for (value of selectOptions; track value) { + {{value}} + } diff --git a/src/app/grid-add-row/grid-add-row.sample.ts b/src/app/grid-add-row/grid-add-row.sample.ts index cfd84d38061..f436435263c 100644 --- a/src/app/grid-add-row/grid-add-row.sample.ts +++ b/src/app/grid-add-row/grid-add-row.sample.ts @@ -1,5 +1,4 @@ import { Component, OnInit, ViewChild } from '@angular/core'; -import { NgFor, NgIf } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { IRowDataCancelableEventArgs, IRowDataEventArgs, IgxActionStripComponent, IgxButtonDirective, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxColumnComponent, IgxGridComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxPaginatorComponent, IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular'; @@ -7,7 +6,7 @@ import { IRowDataCancelableEventArgs, IRowDataEventArgs, IgxActionStripComponent selector: 'app-grid-add-row', styleUrls: ['grid-add-row.sample.scss'], templateUrl: `grid-add-row.sample.html`, - imports: [IgxGridComponent, NgFor, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent, NgIf, IgxPaginatorComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxButtonDirective, IgxSelectComponent, FormsModule, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective] + imports: [IgxGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent, IgxPaginatorComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxButtonDirective, IgxSelectComponent, FormsModule, IgxSelectItemComponent, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective] }) export class GridAddRowSampleComponent implements OnInit { diff --git a/src/app/grid-auto-size/grid-auto-size.sample.html b/src/app/grid-auto-size/grid-auto-size.sample.html index ed67cb38e4d..b3a51451e9c 100644 --- a/src/app/grid-auto-size/grid-auto-size.sample.html +++ b/src/app/grid-auto-size/grid-auto-size.sample.html @@ -22,35 +22,37 @@
- - - - - - - - - - -
+ + + + + + + + @for (c of columns; track c) { + + + } + + diff --git a/src/app/grid-auto-size/grid-auto-size.sample.ts b/src/app/grid-auto-size/grid-auto-size.sample.ts index 42bce4c11db..07d8b95883d 100644 --- a/src/app/grid-auto-size/grid-auto-size.sample.ts +++ b/src/app/grid-auto-size/grid-auto-size.sample.ts @@ -1,5 +1,4 @@ import { Component, ViewChild, OnInit, HostBinding } from '@angular/core'; -import { NgFor } from '@angular/common'; import { SAMPLE_DATA } from '../shared/sample-data'; import { GridSelectionMode, IgxGridComponent, IGX_BUTTON_GROUP_DIRECTIVES, IGX_GRID_DIRECTIVES } from 'igniteui-angular'; @@ -9,7 +8,7 @@ import { GridSelectionMode, IgxGridComponent, IGX_BUTTON_GROUP_DIRECTIVES, IGX_G selector: 'app-grid-column-moving-sample', styleUrls: ['grid-auto-size.sample.scss'], templateUrl: 'grid-auto-size.sample.html', - imports: [NgFor, IGX_GRID_DIRECTIVES, IGX_BUTTON_GROUP_DIRECTIVES] + imports: [IGX_GRID_DIRECTIVES, IGX_BUTTON_GROUP_DIRECTIVES] }) export class GridAutoSizeSampleComponent implements OnInit { diff --git a/src/app/grid-cell-api/grid-cell-api.sample.html b/src/app/grid-cell-api/grid-cell-api.sample.html index f0edb3cc1f2..e95e8a5e920 100644 --- a/src/app/grid-cell-api/grid-cell-api.sample.html +++ b/src/app/grid-cell-api/grid-cell-api.sample.html @@ -39,8 +39,10 @@

igxGrid

Address: {{dataItem.Address}}
 - - + @for (c of columns; track c) { + + + } diff --git a/src/app/grid-groupby/grid-groupby.sample.ts b/src/app/grid-groupby/grid-groupby.sample.ts index 322bd46415d..f6943665d38 100644 --- a/src/app/grid-groupby/grid-groupby.sample.ts +++ b/src/app/grid-groupby/grid-groupby.sample.ts @@ -1,5 +1,4 @@ import { Component, ViewChild, OnInit, HostBinding } from '@angular/core'; -import { NgFor } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { DefaultSortingStrategy, GridSummaryCalculationMode, GridSummaryPosition, GroupMemberCountSortingStrategy, IRowSelectionEventArgs, ISortingExpression, ISortingOptions, IgxButtonDirective, IgxButtonGroupComponent, IgxColumnComponent, IgxDropDownComponent, IgxDropDownItemComponent, IgxDropDownItemNavigationDirective, IgxGridComponent, IgxSwitchComponent, IgxToggleActionDirective, SortingDirection } from 'igniteui-angular'; @@ -7,7 +6,7 @@ import { DefaultSortingStrategy, GridSummaryCalculationMode, GridSummaryPosition selector: 'app-grid-sample', styleUrls: ['grid-groupby.sample.scss'], templateUrl: 'grid-groupby.sample.html', - imports: [IgxSwitchComponent, FormsModule, IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, NgFor, IgxDropDownItemComponent, IgxButtonGroupComponent, IgxGridComponent, IgxColumnComponent] + imports: [IgxSwitchComponent, FormsModule, IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent, IgxButtonGroupComponent, IgxGridComponent, IgxColumnComponent] }) export class GridGroupBySampleComponent implements OnInit { @HostBinding('style.--ig-size') diff --git a/src/app/grid-localization/grid-localization.sample.html b/src/app/grid-localization/grid-localization.sample.html index 0e506adebd5..28cff2ae551 100644 --- a/src/app/grid-localization/grid-localization.sample.html +++ b/src/app/grid-localization/grid-localization.sample.html @@ -5,9 +5,11 @@ Grid with Localization - - {{ locale }} - + @for (locale of selectLocales; track locale) { + + {{ locale }} + + } diff --git a/src/app/grid-localization/grid-localization.sample.ts b/src/app/grid-localization/grid-localization.sample.ts index d1872d9e190..d760416129b 100644 --- a/src/app/grid-localization/grid-localization.sample.ts +++ b/src/app/grid-localization/grid-localization.sample.ts @@ -1,5 +1,5 @@ import { Component, OnInit, ViewChild } from '@angular/core'; -import { registerLocaleData, NgFor } from '@angular/common'; +import { registerLocaleData } from '@angular/common'; import { FormsModule } from '@angular/forms'; import localeBG from '@angular/common/locales/bg'; @@ -25,7 +25,7 @@ import { IResourceStrings, GridResourceStringsEN, IgxColumnComponent, IgxGridCom selector: 'app-grid-localization', styleUrls: ['./grid-localization.sample.scss'], templateUrl: 'grid-localization.sample.html', - imports: [IgxGridComponent, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxSelectComponent, FormsModule, NgFor, IgxSelectItemComponent] + imports: [IgxGridComponent, IgxColumnComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxSelectComponent, FormsModule, IgxSelectItemComponent] }) export class GridLocalizationSampleComponent implements OnInit { diff --git a/src/app/grid-master-detail/grid-master-detail.sample.html b/src/app/grid-master-detail/grid-master-detail.sample.html index dcd69f4e14b..12f4ce35d5c 100644 --- a/src/app/grid-master-detail/grid-master-detail.sample.html +++ b/src/app/grid-master-detail/grid-master-detail.sample.html @@ -2,13 +2,16 @@ - - + @for (c of columns; track c) { + + + } -
{{ cell.value}}
- + @if (cell.value > 1000) { +
{{ cell.value}}
+ } - + @if (renderGrid) { + + + @for (col of gridCollection; track col) { + + } + + + + } - diff --git a/src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts b/src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts index e3cc675a156..0cfa14f46de 100644 --- a/src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts +++ b/src/app/grid-multi-row-layout-config/grid-mrl-config.sample.ts @@ -1,5 +1,5 @@ import { Component, ViewChild, ElementRef, ChangeDetectorRef, ViewChildren, QueryList } from '@angular/core'; -import { NgFor, NgStyle, NgIf } from '@angular/common'; +import { NgStyle } from '@angular/common'; import { SAMPLE_DATA } from '../shared/sample-data'; import { GridSelectionMode, IDropBaseEventArgs, IDropDroppedEventArgs, IgxButtonDirective, IgxColumnComponent, IgxColumnLayoutComponent, IgxDialogComponent, IgxDragDirective, IgxDropDirective, IgxGridComponent } from 'igniteui-angular'; @@ -19,7 +19,7 @@ interface ColumnConfig { selector: 'app-grid-mrl-config-sample', templateUrl: 'grid-mrl-config.sample.html', styleUrls: ['grid-mrl-config.sample.scss'], - imports: [NgFor, IgxDragDirective, NgStyle, IgxDropDirective, NgIf, IgxButtonDirective, IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent, IgxDialogComponent] + imports: [IgxDragDirective, NgStyle, IgxDropDirective, IgxButtonDirective, IgxGridComponent, IgxColumnLayoutComponent, IgxColumnComponent, IgxDialogComponent] }) export class GridMRLConfigSampleComponent { diff --git a/src/app/grid-nested-props/grid-nested-props.sample.html b/src/app/grid-nested-props/grid-nested-props.sample.html index 0b6f2dd4f55..9cb4a5e118c 100644 --- a/src/app/grid-nested-props/grid-nested-props.sample.html +++ b/src/app/grid-nested-props/grid-nested-props.sample.html @@ -18,16 +18,18 @@ - - + @for (each of config; track each) { + + + } diff --git a/src/app/grid-nested-props/grid-nested-props.sample.ts b/src/app/grid-nested-props/grid-nested-props.sample.ts index 79383ffcee4..1575e658483 100644 --- a/src/app/grid-nested-props/grid-nested-props.sample.ts +++ b/src/app/grid-nested-props/grid-nested-props.sample.ts @@ -1,5 +1,4 @@ import { Component } from '@angular/core'; -import { NgFor } from '@angular/common'; import { GridColumnDataType, IGX_GRID_DIRECTIVES, IgxTreeGridComponent } from 'igniteui-angular'; interface GridConfig { @@ -11,7 +10,7 @@ interface GridConfig { @Component({ selector: 'app-grid-nested-props', templateUrl: 'grid-nested-props.sample.html', - imports: [NgFor, IGX_GRID_DIRECTIVES, IgxTreeGridComponent] + imports: [IGX_GRID_DIRECTIVES, IgxTreeGridComponent] }) export class GridNestedPropsSampleComponent { public data = []; diff --git a/src/app/grid-percentage-columns/grid-percantge-widths.sample.html b/src/app/grid-percentage-columns/grid-percantge-widths.sample.html index fa048118be8..569372a8c9f 100644 --- a/src/app/grid-percentage-columns/grid-percantge-widths.sample.html +++ b/src/app/grid-percentage-columns/grid-percantge-widths.sample.html @@ -39,11 +39,15 @@

Pipe and locale settings

- {{cur}} + @for (cur of currencies; track cur) { + {{cur}} + } - {{cur}} + @for (cur of locales; track cur) { + {{cur}} + } @@ -66,8 +70,12 @@

Pipe and locale settings

 - Continued - Discontinued + @if (val) { + Continued + } + @if (!val) { + Discontinued + } diff --git a/src/app/grid-percentage-columns/grid-percantge-widths.sample.ts b/src/app/grid-percentage-columns/grid-percantge-widths.sample.ts index ba7ad778ffe..4f6c0632681 100644 --- a/src/app/grid-percentage-columns/grid-percantge-widths.sample.ts +++ b/src/app/grid-percentage-columns/grid-percantge-widths.sample.ts @@ -1,5 +1,5 @@ import { Component, OnInit, ViewChild } from '@angular/core'; -import { NgFor, NgIf, CurrencyPipe, DatePipe } from '@angular/common'; +import { CurrencyPipe, DatePipe } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { data, dataWithoutPK } from '../shared/data'; @@ -9,7 +9,7 @@ import { IColumnPipeArgs, IgxButtonDirective, IgxCardComponent, IgxCardContentDi providers: [], selector: 'app-grid-percantge-widths.sample', templateUrl: 'grid-percantge-widths.sample.html', - imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxPaginatorComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSelectComponent, NgFor, IgxSelectItemComponent, IgxButtonDirective, NgIf, CurrencyPipe, DatePipe] + imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxPaginatorComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxInputGroupComponent, IgxLabelDirective, FormsModule, IgxInputDirective, IgxSelectComponent, IgxSelectItemComponent, IgxButtonDirective, CurrencyPipe, DatePipe] }) export class GridColumnPercentageWidthsSampleComponent implements OnInit { @ViewChild('grid1', { read: IgxGridComponent, static: true }) diff --git a/src/app/grid-performance/grid-performance.sample.html b/src/app/grid-performance/grid-performance.sample.html index b4bf59772ad..7e702eaa343 100644 --- a/src/app/grid-performance/grid-performance.sample.html +++ b/src/app/grid-performance/grid-performance.sample.html @@ -7,8 +7,10 @@

Fixed Size Rows

- - + @for (c of columns; track c) { + + + }
diff --git a/src/app/grid-performance/grid-performance.sample.ts b/src/app/grid-performance/grid-performance.sample.ts index a51dbb3e4c8..734539ae64d 100644 --- a/src/app/grid-performance/grid-performance.sample.ts +++ b/src/app/grid-performance/grid-performance.sample.ts @@ -1,5 +1,4 @@ import { Component, OnInit, ViewChild } from '@angular/core'; -import { NgFor } from '@angular/common'; import { GridSelectionMode, IgxColumnComponent, IgxGridComponent, IgxGridToolbarActionsComponent, IgxGridToolbarComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent } from 'igniteui-angular'; @@ -7,7 +6,7 @@ import { GridSelectionMode, IgxColumnComponent, IgxGridComponent, IgxGridToolbar selector: 'app-grid-performance-sample', templateUrl: 'grid-performance.sample.html', styleUrls: ['grid-performance.sample.scss'], - imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, NgFor, IgxColumnComponent] + imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxColumnComponent] }) export class GridPerformanceSampleComponent implements OnInit { diff --git a/src/app/grid-re-create/grid-re-create.sample.html b/src/app/grid-re-create/grid-re-create.sample.html index d8eb968a9ae..69220ebb819 100644 --- a/src/app/grid-re-create/grid-re-create.sample.html +++ b/src/app/grid-re-create/grid-re-create.sample.html @@ -1,8 +1,10 @@ -
- - - - -
+@if (create) { +
+ + + + +
+} diff --git a/src/app/grid-re-create/grid-re-create.sample.ts b/src/app/grid-re-create/grid-re-create.sample.ts index e8a1990a8be..3a06e4a6fda 100644 --- a/src/app/grid-re-create/grid-re-create.sample.ts +++ b/src/app/grid-re-create/grid-re-create.sample.ts @@ -1,4 +1,3 @@ -import { NgIf } from '@angular/common'; import { Component, OnInit } from '@angular/core'; import { IgxColumnComponent, IgxGridComponent } from 'igniteui-angular'; @@ -10,7 +9,7 @@ import { IgxColumnComponent, IgxGridComponent } from 'igniteui-angular'; standalone: true, providers: [ ], - imports: [NgIf, IgxGridComponent, IgxColumnComponent] + imports: [IgxGridComponent, IgxColumnComponent] }) export class GridRecreateSampleComponent implements OnInit { public data = [] as any[]; diff --git a/src/app/grid-remote-paging/grid-remote-paging.sample.html b/src/app/grid-remote-paging/grid-remote-paging.sample.html index be4223a43a0..724b93a9d9f 100644 --- a/src/app/grid-remote-paging/grid-remote-paging.sample.html +++ b/src/app/grid-remote-paging/grid-remote-paging.sample.html @@ -7,9 +7,11 @@ - - + @if (paging) { + + + } @@ -19,7 +21,9 @@

Paging settings

- {{value}} + @for (value of selectOptions; track value) { + {{value}} + } diff --git a/src/app/grid-remote-paging/grid-remote-paging.sample.ts b/src/app/grid-remote-paging/grid-remote-paging.sample.ts index 91ee22a4936..8a2da80baa0 100644 --- a/src/app/grid-remote-paging/grid-remote-paging.sample.ts +++ b/src/app/grid-remote-paging/grid-remote-paging.sample.ts @@ -1,5 +1,5 @@ import { AfterViewInit, Component, OnDestroy, OnInit, ViewChild } from '@angular/core'; -import { NgIf, NgFor, AsyncPipe } from '@angular/common'; +import { AsyncPipe } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { Observable } from 'rxjs'; @@ -10,7 +10,7 @@ import { GridPagingMode, IgxButtonDirective, IgxCardComponent, IgxCardContentDir selector: 'app-grid-remote-paging-sample', templateUrl: 'grid-remote-paging.sample.html', providers: [RemoteService], - imports: [IgxGridComponent, IgxColumnComponent, NgIf, IgxPaginatorComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxButtonDirective, IgxSelectComponent, FormsModule, NgFor, IgxSelectItemComponent, AsyncPipe] + imports: [IgxGridComponent, IgxColumnComponent, IgxPaginatorComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxButtonDirective, IgxSelectComponent, FormsModule, IgxSelectItemComponent, AsyncPipe] }) export class GridRemotePagingSampleComponent implements OnInit, AfterViewInit, OnDestroy { @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent; diff --git a/src/app/grid-row-api/grid-row-api.sample.html b/src/app/grid-row-api/grid-row-api.sample.html index c2d908af1bf..8d727f2a4d7 100644 --- a/src/app/grid-row-api/grid-row-api.sample.html +++ b/src/app/grid-row-api/grid-row-api.sample.html @@ -28,10 +28,12 @@

igxGrid

Address: {{dataItem.Address}}
- - + @for (c of columns; track c) { + + + }
{{dragIcon}}{{countIcon}} @@ -84,11 +86,13 @@

IgxTreeGrid Hierarchical Data

- - + @for (c of treeGridHierColumns; track c) { + + + } @@ -135,11 +139,13 @@

IgxTreeGrid Flat Data

- - + @for (c of treeColumns; track c) { + + + } @@ -183,9 +189,11 @@

igxHierarchicalGrid

- - + @for (c of hColumns; track c) { + + + } Grid with rowEditing and with transactions Row
@@ -50,8 +52,10 @@

Grid with rowEditing and with transactions

Column
@@ -114,24 +118,26 @@

Cancel Grid Edit Events

- -
-
- - - - This is a custom editing template -
-
-
- - - + @if (customTemplate) { + +
+
+ + + + This is a custom editing template +
+
+
+ + + +
-
- + + } Changes: {{rowChangesCount}} @@ -205,16 +211,20 @@

Grid without row editing and with transactions

Performance grid with transactions and row edit

- - + @for (c of columns; track c) { + + + }
Submit the following transactions?
-

- {{ transaction }} -

+ @for (transaction of currentActiveGrid.transactions; track transaction) { +

+ {{ transaction }} +

+ }
diff --git a/src/app/grid-row-edit/grid-row-edit-sample.component.ts b/src/app/grid-row-edit/grid-row-edit-sample.component.ts index 18f9aac150e..0860d0918cf 100644 --- a/src/app/grid-row-edit/grid-row-edit-sample.component.ts +++ b/src/app/grid-row-edit/grid-row-edit-sample.component.ts @@ -1,5 +1,4 @@ import { Component, ViewChild } from '@angular/core'; -import { NgFor, NgIf } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { data } from '../shared/data'; @@ -20,7 +19,7 @@ import { IgxColumnGroupComponent } from '../../../projects/igniteui-angular/src/ selector: 'app-grid-row-edit', styleUrls: [`grid-row-edit-sample.component.scss`], templateUrl: 'grid-row-edit-sample.component.html', - imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxColumnRequiredValidatorDirective, IgxCellEditorTemplateDirective, FormsModule, IgxFocusDirective, IgxCheckboxComponent, NgFor, IgxButtonDirective, IgxSwitchComponent, IgxColumnGroupComponent, NgIf, IgxRowEditTabStopDirective, IgxRowEditTextDirective, IgxRowEditActionsDirective, IgxPaginatorComponent, IgxToggleDirective] + imports: [IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxColumnRequiredValidatorDirective, IgxCellEditorTemplateDirective, FormsModule, IgxFocusDirective, IgxCheckboxComponent, IgxButtonDirective, IgxSwitchComponent, IgxColumnGroupComponent, IgxRowEditTabStopDirective, IgxRowEditTextDirective, IgxRowEditActionsDirective, IgxPaginatorComponent, IgxToggleDirective] }) export class GridRowEditSampleComponent { @ViewChild(IgxToggleDirective, { static: true }) diff --git a/src/app/grid-row-pinning/grid-row-pinning.sample.html b/src/app/grid-row-pinning/grid-row-pinning.sample.html index 5a9f1f02fca..b2ea6f8a3df 100644 --- a/src/app/grid-row-pinning/grid-row-pinning.sample.html +++ b/src/app/grid-row-pinning/grid-row-pinning.sample.html @@ -44,10 +44,12 @@

igxGrid

- - + @for (c of columns; track c) { + + + }
@@ -74,9 +76,11 @@

igxHierarchicalGrid

- - + @for (c of hColumns; track c) { + + + } @@ -109,11 +113,13 @@

igxTreeGrid

- - + @for (c of treeColumns; track c) { + + + } diff --git a/src/app/grid-row-pinning/grid-row-pinning.sample.ts b/src/app/grid-row-pinning/grid-row-pinning.sample.ts index 9926f71136e..12928cb8ecd 100644 --- a/src/app/grid-row-pinning/grid-row-pinning.sample.ts +++ b/src/app/grid-row-pinning/grid-row-pinning.sample.ts @@ -1,5 +1,4 @@ import { Component, OnInit, ViewChild, AfterViewInit, HostBinding } from '@angular/core'; -import { NgFor } from '@angular/common'; import { IgxGridComponent, @@ -28,7 +27,7 @@ import { GridSearchBoxComponent } from '../grid-search-box/grid-search-box.compo providers: [ IgxIconService ], - imports: [NgFor, IGX_HIERARCHICAL_GRID_DIRECTIVES, IgxGridComponent, IgxTreeGridComponent, IgxIconComponent, GridSearchBoxComponent, IgxSwitchComponent, IgxButtonDirective] + imports: [IGX_HIERARCHICAL_GRID_DIRECTIVES, IgxGridComponent, IgxTreeGridComponent, IgxIconComponent, GridSearchBoxComponent, IgxSwitchComponent, IgxButtonDirective] }) export class GridRowPinningSampleComponent implements OnInit, AfterViewInit { diff --git a/src/app/grid-search-box/grid-search-box.component.html b/src/app/grid-search-box/grid-search-box.component.html index b70068de6af..f4acb8f175c 100644 --- a/src/app/grid-search-box/grid-search-box.component.html +++ b/src/app/grid-search-box/grid-search-box.component.html @@ -1,35 +1,47 @@ - - clear + @if (searchText.length === 0) { + + } + @if (searchText.length > 0) { + clear + } - -
- - {{ grid.lastSearchInfo.activeMatchIndex + 1 }}/{{ grid.lastSearchInfo.matchCount }} - - - 0/0 - -
-
- - - Aa - - - Ab - - -
-
- navigate_before - navigate_next -
- + @if (searchText.length > 0) { + + @if (grid.lastSearchInfo) { +
+ @if (grid.lastSearchInfo.matchCount > 0) { + + {{ grid.lastSearchInfo.activeMatchIndex + 1 }}/{{ grid.lastSearchInfo.matchCount }} + + } + @if (grid.lastSearchInfo.matchCount === 0) { + + 0/0 + + } +
+ } +
+ + + Aa + + + Ab + + +
+
+ navigate_before + navigate_next +
+ + } diff --git a/src/app/grid-search-box/grid-search-box.component.ts b/src/app/grid-search-box/grid-search-box.component.ts index 77ba72711d3..557f3931a07 100644 --- a/src/app/grid-search-box/grid-search-box.component.ts +++ b/src/app/grid-search-box/grid-search-box.component.ts @@ -1,5 +1,4 @@ import { Component, Input } from '@angular/core'; -import { NgIf } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { IGX_CHIPS_DIRECTIVES, IGX_INPUT_GROUP_DIRECTIVES, IgxGridComponent, IgxHierarchicalGridComponent, IgxIconComponent, IgxRippleDirective, IgxTreeGridComponent } from 'igniteui-angular'; @@ -8,7 +7,7 @@ import { IGX_CHIPS_DIRECTIVES, IGX_INPUT_GROUP_DIRECTIVES, IgxGridComponent, Igx selector: 'app-grid-search-box', styleUrls: ['./grid-search-box.component.scss'], templateUrl: './grid-search-box.component.html', - imports: [NgIf, IgxIconComponent, FormsModule, IgxRippleDirective, IGX_INPUT_GROUP_DIRECTIVES, IGX_CHIPS_DIRECTIVES] + imports: [IgxIconComponent, FormsModule, IgxRippleDirective, IGX_INPUT_GROUP_DIRECTIVES, IGX_CHIPS_DIRECTIVES] }) export class GridSearchBoxComponent { @Input() diff --git a/src/app/grid-search/grid-search.sample.html b/src/app/grid-search/grid-search.sample.html index 5b8831b8702..29af39438db 100644 --- a/src/app/grid-search/grid-search.sample.html +++ b/src/app/grid-search/grid-search.sample.html @@ -19,10 +19,12 @@ - - + @for (c of columns; track c) { + + + }
diff --git a/src/app/grid-search/grid-search.sample.ts b/src/app/grid-search/grid-search.sample.ts index 42ee83222c8..cf46bc18adf 100644 --- a/src/app/grid-search/grid-search.sample.ts +++ b/src/app/grid-search/grid-search.sample.ts @@ -1,5 +1,4 @@ import { Component, ViewChild, OnInit, HostBinding } from '@angular/core'; -import { NgFor } from '@angular/common'; import { SAMPLE_DATA } from '../shared/sample-data'; @@ -11,7 +10,7 @@ import { GridSearchBoxComponent } from '../grid-search-box/grid-search-box.compo selector: 'app-grid-search-sample', styleUrls: ['grid-search.sample.scss'], templateUrl: 'grid-search.sample.html', - imports: [NgFor, IGX_GRID_DIRECTIVES, IGX_BUTTON_GROUP_DIRECTIVES, GridSearchBoxComponent] + imports: [IGX_GRID_DIRECTIVES, IGX_BUTTON_GROUP_DIRECTIVES, GridSearchBoxComponent] }) export class GridSearchComponent implements OnInit { diff --git a/src/app/grid-selection/grid-selection.sample.html b/src/app/grid-selection/grid-selection.sample.html index c426ef747da..0b8fad057a7 100644 --- a/src/app/grid-selection/grid-selection.sample.html +++ b/src/app/grid-selection/grid-selection.sample.html @@ -3,12 +3,16 @@ - {{ item }} + @for (item of selectionModes; track item) { + {{ item }} + } - {{ item }} + @for (item of selectionModes; track item) { + {{ item }} + }
diff --git a/src/app/grid-selection/grid-selection.sample.ts b/src/app/grid-selection/grid-selection.sample.ts index bf6cb631cc7..f2b4390b1b9 100644 --- a/src/app/grid-selection/grid-selection.sample.ts +++ b/src/app/grid-selection/grid-selection.sample.ts @@ -1,5 +1,4 @@ import { AfterViewInit, ChangeDetectorRef, Component, ViewChild } from '@angular/core'; -import { NgFor } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { Observable } from 'rxjs'; @@ -21,7 +20,6 @@ import { data } from '../shared/data'; IgxColumnComponent, IgxGridComponent, IgxSwitchComponent, - NgFor, ] }) export class GridSelectionComponent implements AfterViewInit { diff --git a/src/app/grid-state/grid-state.component.html b/src/app/grid-state/grid-state.component.html index ff9c226732e..f1f1217856c 100644 --- a/src/app/grid-state/grid-state.component.html +++ b/src/app/grid-state/grid-state.component.html @@ -3,9 +3,11 @@ Flat Grid - - {{collapsed() ? 'Expand':'Collapse'}} - + @if (templatedIcon) { + + {{collapsed() ? 'Expand':'Collapse'}} + + }
@@ -22,11 +24,13 @@ - - + @for (c of initialColumns; track c) { + + + } @@ -47,9 +51,11 @@ Multi-column Headers - - {{collapsed() ? 'Expand':'Collapse'}} - + @if (templatedIcon) { + + {{collapsed() ? 'Expand':'Collapse'}} + + } @@ -113,9 +119,11 @@ Multi-Row Layouts - - {{collapsed() ? 'Expand':'Collapse'}} - + @if (templatedIcon) { + + {{collapsed() ? 'Expand':'Collapse'}} + + } @@ -169,9 +177,11 @@ Hierarchical Grid - - {{collapsed() ? 'Expand':'Collapse'}} - + @if (templatedIcon) { + + {{collapsed() ? 'Expand':'Collapse'}} + + }
@@ -186,10 +196,12 @@ - - + @for (c of hierGridColumns; track c) { + + + } @@ -199,24 +211,30 @@ - - + @for (c of hierGridColumns; track c) { + + + } - - - - - + } + + + @for (c of hierGridColumns; track c) { + + + } @@ -232,9 +250,11 @@ Tree Grid Flat data using PK and FK - - {{collapsed() ? 'Expand':'Collapse'}} - + @if (templatedIcon) { + + {{collapsed() ? 'Expand':'Collapse'}} + + }
@@ -248,11 +268,13 @@ - - + @for (c of treeGridColumns; track c) { + + + }
@@ -264,9 +286,11 @@ Tree Grid Flat Child Collection - - {{collapsed() ? 'Expand':'Collapse'}} - + @if (templatedIcon) { + + {{collapsed() ? 'Expand':'Collapse'}} + + }
@@ -296,22 +320,24 @@
  • Navigate away to visit the ABOUT page to save grid - state into local storage.
    • + state into local storage.
  • Use the switch buttons to turn on/off saving state for the corresponding feature.
  • Use the - delete - and - refresh - buttons to clear the localStorage content and reload the page with clear state.
    • + [igxTooltipTarget]="clear"> + delete + and + refresh + buttons to clear the localStorage content and reload the page with clear state.
-
- {{ f.shortName }} - -
+ @for (f of features; track f) { +
+ {{ f.shortName }} + +
+ }
@@ -320,13 +346,15 @@
-
- -
+ @for (f of features; track f) { +
+ +
+ }
Hi I'm {{ cell.value }} - + diff --git a/src/app/grid-state/grid-state.component.ts b/src/app/grid-state/grid-state.component.ts index 83dcdd4489a..35c9f3e83ca 100644 --- a/src/app/grid-state/grid-state.component.ts +++ b/src/app/grid-state/grid-state.component.ts @@ -1,5 +1,5 @@ import { Component, OnInit, ViewChild, QueryList, ViewChildren, TemplateRef } from '@angular/core'; -import { NgIf, NgTemplateOutlet, NgFor } from '@angular/common'; +import { NgTemplateOutlet } from '@angular/common'; import { Router, RouterLink } from '@angular/router'; import { FormsModule } from '@angular/forms'; @@ -51,7 +51,7 @@ interface GridState { selector: 'app-grid', styleUrls: ['./grid-state.component.scss'], templateUrl: './grid-state.component.html', - imports: [IgxColumnLayoutComponent, IgxExpansionPanelComponent, IgxCellHeaderTemplateDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, NgIf, IgxExpansionPanelIconDirective, IgxExpansionPanelBodyComponent, NgTemplateOutlet, IgxGridComponent, IgxGridStateDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarAdvancedFilteringComponent, NgFor, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxPaginatorComponent, IgxTooltipDirective, IgxColumnGroupComponent, IgxHierarchicalGridComponent, IgxRowIslandComponent, IgxTreeGridComponent, RouterLink, IgxTooltipTargetDirective, IgxIconComponent, IgxSwitchComponent, FormsModule, IgxButtonDirective, IgxCellTemplateDirective] + imports: [IgxColumnLayoutComponent, IgxExpansionPanelComponent, IgxCellHeaderTemplateDirective, IgxExpansionPanelHeaderComponent, IgxExpansionPanelTitleDirective, IgxExpansionPanelIconDirective, IgxExpansionPanelBodyComponent, NgTemplateOutlet, IgxGridComponent, IgxGridStateDirective, IgxGridToolbarComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarAdvancedFilteringComponent, IgxColumnComponent, IgxGridDetailTemplateDirective, IgxPaginatorComponent, IgxTooltipDirective, IgxColumnGroupComponent, IgxHierarchicalGridComponent, IgxRowIslandComponent, IgxTreeGridComponent, RouterLink, IgxTooltipTargetDirective, IgxIconComponent, IgxSwitchComponent, FormsModule, IgxButtonDirective, IgxCellTemplateDirective] }) export class GridSaveStateComponent implements OnInit { @ViewChild(IgxExpansionPanelComponent, { static: true }) diff --git a/src/app/grid-summaries/grid-summaries.sample.html b/src/app/grid-summaries/grid-summaries.sample.html index 015d0c17568..7263cdb8c50 100644 --- a/src/app/grid-summaries/grid-summaries.sample.html +++ b/src/app/grid-summaries/grid-summaries.sample.html @@ -4,18 +4,24 @@ - - Grid Toolbar - - - - - - Export to Excel 👌 - Export to CSV 👍 - - - + @if (showToolbar) { + + Grid Toolbar + + @if (columnPinning) { + + } + @if (columnHiding) { + + } + + + Export to Excel 👌 + Export to CSV 👍 + + + + } @@ -55,7 +61,9 @@ - + @if (paging) { + + }
diff --git a/src/app/grid-summaries/grid-summaries.sample.ts b/src/app/grid-summaries/grid-summaries.sample.ts index 22c85a8226d..ae40bca4f09 100644 --- a/src/app/grid-summaries/grid-summaries.sample.ts +++ b/src/app/grid-summaries/grid-summaries.sample.ts @@ -1,5 +1,4 @@ import { Component, HostBinding, OnInit, ViewChild } from '@angular/core'; -import { NgIf } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { IgxGridComponent, @@ -46,7 +45,7 @@ class MySummary extends IgxNumberSummaryOperand { selector: 'app-grid-summaries-sample', styleUrls: ['./grid-summaries.component.scss'], templateUrl: 'grid-summaries.sample.html', - imports: [IgxButtonGroupComponent, IgxGridComponent, NgIf, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxSummaryTemplateDirective, IgxPaginatorComponent, FormsModule, IgxSwitchComponent] + imports: [IgxButtonGroupComponent, IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxColumnComponent, IgxCellTemplateDirective, IgxSummaryTemplateDirective, IgxPaginatorComponent, FormsModule, IgxSwitchComponent] }) export class GridSummaryComponent implements OnInit { @HostBinding('style.--ig-size') diff --git a/src/app/grid-toolbar/grid-toolbar-custom.sample.html b/src/app/grid-toolbar/grid-toolbar-custom.sample.html index c7905078199..751ee085459 100644 --- a/src/app/grid-toolbar/grid-toolbar-custom.sample.html +++ b/src/app/grid-toolbar/grid-toolbar-custom.sample.html @@ -4,26 +4,32 @@

Toolbar

- - - - - - - - - - Export to Excel 👌 - Export to CSV 👍 - - - + @if (showToolbar) { + + + + + + @if (columnPinning) { + + } + @if (columnHiding) { + + } + + + Export to Excel 👌 + Export to CSV 👍 + + + + } diff --git a/src/app/grid-toolbar/grid-toolbar-custom.sample.ts b/src/app/grid-toolbar/grid-toolbar-custom.sample.ts index 8df6f2c7111..fd68850afa3 100644 --- a/src/app/grid-toolbar/grid-toolbar-custom.sample.ts +++ b/src/app/grid-toolbar/grid-toolbar-custom.sample.ts @@ -1,6 +1,5 @@ import { Component } from '@angular/core'; -import { NgIf } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { IgxButtonDirective, IgxCSVTextDirective, IgxColumnComponent, IgxExcelTextDirective, IgxGridComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxIconComponent, IgxRippleDirective, IgxSwitchComponent } from 'igniteui-angular'; @@ -9,7 +8,7 @@ import { IgxButtonDirective, IgxCSVTextDirective, IgxColumnComponent, IgxExcelTe selector: 'app-grid-toolbar-custom-sample', styleUrls: ['grid-toolbar-custom.sample.scss'], templateUrl: 'grid-toolbar-custom.sample.html', - imports: [IgxGridComponent, NgIf, IgxGridToolbarComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxSwitchComponent, FormsModule] + imports: [IgxGridComponent, IgxGridToolbarComponent, IgxButtonDirective, IgxRippleDirective, IgxIconComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxSwitchComponent, FormsModule] }) export class GridToolbarCustomSampleComponent { public showToolbar = true; diff --git a/src/app/grid-toolbar/grid-toolbar.sample.html b/src/app/grid-toolbar/grid-toolbar.sample.html index 62ab7c10141..1354af76fdd 100644 --- a/src/app/grid-toolbar/grid-toolbar.sample.html +++ b/src/app/grid-toolbar/grid-toolbar.sample.html @@ -3,19 +3,27 @@

Toolbar

- - - {{ title }} - - - - Really advanced filtering - - Transform to Excel 👌 - Transform to CSV 👍 - - - + @if (showToolbar) { + + @if (customContent) { + + } + {{ title }} + + @if (pinningEnabled) { + + } + @if (hidingEnabled) { + + } + Really advanced filtering + + Transform to Excel 👌 + Transform to CSV 👍 + + + + }
Toolbar diff --git a/src/app/grid-toolbar/grid-toolbar.sample.ts b/src/app/grid-toolbar/grid-toolbar.sample.ts index b279c638877..ecdf804e20e 100644 --- a/src/app/grid-toolbar/grid-toolbar.sample.ts +++ b/src/app/grid-toolbar/grid-toolbar.sample.ts @@ -1,5 +1,4 @@ import { Component } from '@angular/core'; -import { NgIf } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { IgxCSVTextDirective, IgxColumnComponent, IgxCsvExporterService, IgxExcelExporterService, IgxExcelTextDirective, IgxGridComponent, IgxGridToolbarActionsComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarComponent, IgxGridToolbarExporterComponent, IgxGridToolbarHidingComponent, IgxGridToolbarPinningComponent, IgxGridToolbarTitleComponent, IgxSwitchComponent } from 'igniteui-angular'; @@ -7,7 +6,7 @@ import { IgxCSVTextDirective, IgxColumnComponent, IgxCsvExporterService, IgxExce selector: 'app-grid-toolbar-sample', styleUrls: ['grid-toolbar.sample.scss'], templateUrl: 'grid-toolbar.sample.html', - imports: [IgxGridComponent, NgIf, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxSwitchComponent, FormsModule] + imports: [IgxGridComponent, IgxGridToolbarComponent, IgxGridToolbarTitleComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxSwitchComponent, FormsModule] }) export class GridToolbarSampleComponent { public showToolbar = true; diff --git a/src/app/grid-updates-test/grid-updates.component.html b/src/app/grid-updates-test/grid-updates.component.html index 4a90adba310..0b1a462503c 100644 --- a/src/app/grid-updates-test/grid-updates.component.html +++ b/src/app/grid-updates-test/grid-updates.component.html @@ -10,12 +10,14 @@ (rowSelectionChanging)="handleRowSelectionChange($event)" rowSelection="single" #grid> - - + @for (each of nestedConfigColumns; track each) { + + + }

Selected Name: {{selectedItem?.name}}

diff --git a/src/app/grid-updates-test/grid-updates.component.ts b/src/app/grid-updates-test/grid-updates.component.ts index 10d37ed32ff..6e1e90bbc25 100644 --- a/src/app/grid-updates-test/grid-updates.component.ts +++ b/src/app/grid-updates-test/grid-updates.component.ts @@ -1,5 +1,4 @@ import { Component, OnInit, ViewChild } from '@angular/core'; -import { NgFor } from '@angular/common'; import { IRowSelectionEventArgs, IgxColumnComponent, IgxGridComponent } from 'igniteui-angular'; import { AMINO_DATA } from './aminoData'; @@ -7,7 +6,7 @@ import { AMINO_DATA } from './aminoData'; selector: 'app-grid-updates', styleUrls: ['./grid-updates.component.scss'], templateUrl: './grid-updates.component.html', - imports: [IgxGridComponent, NgFor, IgxColumnComponent] + imports: [IgxGridComponent, IgxColumnComponent] }) export class GridUpdatesComponent implements OnInit { @ViewChild('grid') public grid: IgxGridComponent; diff --git a/src/app/grid-validation/grid-validation.sample.component.html b/src/app/grid-validation/grid-validation.sample.component.html index 45b89cc48b3..3ec23bda707 100644 --- a/src/app/grid-validation/grid-validation.sample.component.html +++ b/src/app/grid-validation/grid-validation.sample.component.html @@ -17,9 +17,11 @@

Grid without transactions

-
- This name is forbidden. -
+ @if (cell.validation.errors?.['forbiddenName']) { +
+ This name is forbidden. +
+ } @@ -43,9 +45,11 @@

Grid with transactions

-
- This name is forbidden. -
+ @if (cell.validation.errors?.['forbiddenName']) { +
+ This name is forbidden. +
+ } @@ -66,21 +70,23 @@

Grid with transactions

TreeGrid

- - - {{cell.row.validation.status}} - - - - - - - - - + foreignKey="PID" [width]="'900px'" [height]="'800px'" [rowEditable]="true" [moving]="true"> + + + {{cell.row.validation.status}} + + + @for (c of treeColumns; track c) { + + + } + + + + +
@@ -88,18 +94,24 @@

TreeGrid

Hierarchical Grid

- - - - - - - -
- This name is forbidden. -
- + @for (c of hColumns; track c) { + + } + + @for (c of hColumns2; track c) { + + + + + @if (cell.validation.errors?.['forbiddenName']) { +
+ This name is forbidden. +
+ } + + + } diff --git a/src/app/grid-validation/grid-validation.sample.component.ts b/src/app/grid-validation/grid-validation.sample.component.ts index 7f40f4a142a..9b45a74a557 100644 --- a/src/app/grid-validation/grid-validation.sample.component.ts +++ b/src/app/grid-validation/grid-validation.sample.component.ts @@ -1,5 +1,5 @@ import { Component, Directive, ViewChild, Input } from '@angular/core'; -import { NgTemplateOutlet, NgIf, NgFor } from '@angular/common'; +import { NgTemplateOutlet } from '@angular/common'; import { AbstractControl, NG_VALIDATORS, ValidationErrors, ValidatorFn, Validators, FormsModule } from '@angular/forms'; import { data } from '../shared/data'; @@ -35,8 +35,6 @@ export function forbiddenNameValidator(nameRe: RegExp): ValidatorFn { styleUrls: [`grid-validation.sample.component.scss`], templateUrl: 'grid-validation.sample.component.html', imports: [ - NgFor, - NgIf, NgTemplateOutlet, FormsModule, ForbiddenValidatorDirective, diff --git a/src/app/grid/grid.sample.html b/src/app/grid/grid.sample.html index 9a9bcde16e0..2f67f33a48f 100644 --- a/src/app/grid/grid.sample.html +++ b/src/app/grid/grid.sample.html @@ -58,24 +58,26 @@
Revertable for the last deleted row
-
-

{{ col.field }}

-
- Filtering -
-
- Sorting -
-
- Editable -
-
- Hidden -
-
- Disable Hiding + @for (col of grid1.columns; track col) { +
+

{{ col.field }}

+
+ Filtering +
+
+ Sorting +
+
+ Editable +
+
+ Hidden +
+
+ Disable Hiding +
-
+ }
@@ -94,24 +96,26 @@

Grid with templated column cells and local observable d >

-
-

{{ col.field }}

-
- Filtering -
-
- Sorting -
-
- Editable + @for (col of grid2.columns; track col) { +
+

{{ col.field }}

+
+ Filtering +
+
+ Sorting +
+
+ Editable +
+
+ Hidden +
+
+ Disable Hiding +
-
- Hidden -
-
- Disable Hiding -
-
+ }
@@ -139,12 +143,15 @@

{{ col.field }}

+ --> @@ -154,7 +161,9 @@

{{ col.field }}

 - + @if (gridPaging) { + + } diff --git a/src/app/grid/grid.sample.ts b/src/app/grid/grid.sample.ts index 49ecefe32b6..fc94203ef0a 100644 --- a/src/app/grid/grid.sample.ts +++ b/src/app/grid/grid.sample.ts @@ -1,6 +1,6 @@ import { Component, OnInit, ViewChild, AfterViewInit } from '@angular/core'; import { Observable } from 'rxjs'; -import { NgFor, AsyncPipe, NgIf } from '@angular/common'; +import { AsyncPipe } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { RemoteService } from '../shared/remote.service'; @@ -18,8 +18,6 @@ import { CsvFileTypes, DefaultSortingStrategy, GridSelectionMode, IgxBaseExporte ], imports: [ FormsModule, - NgFor, - NgIf, AsyncPipe, IGX_GRID_DIRECTIVES, IGX_CARD_DIRECTIVES, diff --git a/src/app/hierarchical-grid-remote-virtualization/hierarchical-grid-remote-virtualization.html b/src/app/hierarchical-grid-remote-virtualization/hierarchical-grid-remote-virtualization.html index 15d9aeda183..ae896940d26 100644 --- a/src/app/hierarchical-grid-remote-virtualization/hierarchical-grid-remote-virtualization.html +++ b/src/app/hierarchical-grid-remote-virtualization/hierarchical-grid-remote-virtualization.html @@ -1,11 +1,11 @@ - -
- - -
- {{ val }} -
+ @if (!rowData.emptyRec) { +
+ {{ val }} +
+ } @else { +
+ } diff --git a/src/app/hierarchical-grid-remote-virtualization/hierarchical-grid-remote-virtualization.ts b/src/app/hierarchical-grid-remote-virtualization/hierarchical-grid-remote-virtualization.ts index 4bff9369e6b..84ad3c5d662 100644 --- a/src/app/hierarchical-grid-remote-virtualization/hierarchical-grid-remote-virtualization.ts +++ b/src/app/hierarchical-grid-remote-virtualization/hierarchical-grid-remote-virtualization.ts @@ -1,5 +1,4 @@ import { Component, ViewChild, AfterViewInit, ChangeDetectorRef } from '@angular/core'; -import { NgIf } from '@angular/common'; import { IGX_HIERARCHICAL_GRID_DIRECTIVES, IgxHierarchicalGridComponent @@ -13,7 +12,7 @@ import { debounceTime } from 'rxjs/operators'; templateUrl: 'hierarchical-grid-remote-virtualization.html', styleUrls: ['hierarchical-grid-remote-virtualization.scss'], providers: [RemoteService], - imports: [NgIf, IGX_HIERARCHICAL_GRID_DIRECTIVES] + imports: [IGX_HIERARCHICAL_GRID_DIRECTIVES] }) export class HierarchicalGridRemoteVirtualizationComponent implements AfterViewInit { @ViewChild('hGrid', { static: true }) diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.html b/src/app/hierarchical-grid/hierarchical-grid.sample.html index d5daa1761ff..3c700c62688 100644 --- a/src/app/hierarchical-grid/hierarchical-grid.sample.html +++ b/src/app/hierarchical-grid/hierarchical-grid.sample.html @@ -115,8 +115,8 @@

Sample One

@@ -154,27 +154,37 @@

Sample three (batch editing)

- - - + [rowEditable]="true" [primaryKey]="'ID'" [data]="localData" [height]="'600px'" [width]="'100%'" #hGrid2> + @if (columnsReady) { - -
- -
- + } + @if (columnsReady) { + + } + @if (layoutsReady) { + + + + @if (riToggle) { +
+ +
+ } + + } -
- - - - -
+ @if (!riToggle) { +
+ + + + +
+ }

Sample 4

@@ -188,11 +198,15 @@

Sample 4

- + @for (c of columns; track c) { + + } - + @for (c of childColumns; track c) { + + }
diff --git a/src/app/hierarchical-grid/hierarchical-grid.sample.ts b/src/app/hierarchical-grid/hierarchical-grid.sample.ts index 6981abed203..af746d3344c 100644 --- a/src/app/hierarchical-grid/hierarchical-grid.sample.ts +++ b/src/app/hierarchical-grid/hierarchical-grid.sample.ts @@ -1,5 +1,4 @@ import { Component, ViewChild, ChangeDetectorRef, AfterViewInit, HostBinding } from '@angular/core'; -import { NgIf, NgFor } from '@angular/common'; import { GridSearchBoxComponent } from '../grid-search-box/grid-search-box.component'; import { IgxRowIslandComponent, @@ -17,7 +16,7 @@ import { selector: 'app-hierarchical-grid-sample', styleUrls: ['hierarchical-grid.sample.scss'], templateUrl: 'hierarchical-grid.sample.html', - imports: [NgIf, NgFor, GridSearchBoxComponent, IGX_HIERARCHICAL_GRID_DIRECTIVES, IgxIconComponent, IGX_BUTTON_GROUP_DIRECTIVES] + imports: [GridSearchBoxComponent, IGX_HIERARCHICAL_GRID_DIRECTIVES, IgxIconComponent, IGX_BUTTON_GROUP_DIRECTIVES] }) export class HierarchicalGridSampleComponent implements AfterViewInit { @HostBinding('style.--ig-size') diff --git a/src/app/hound/hound.component.html b/src/app/hound/hound.component.html index 8ef2412902d..e88cf5b9161 100644 --- a/src/app/hound/hound.component.html +++ b/src/app/hound/hound.component.html @@ -21,10 +21,14 @@
- - {{ item.field }} - {{item.icon}} - + @for (item of ddItems; track item) { + + {{ item.field }} + @if (item.icon) { + {{item.icon}} + } + + }
@@ -50,9 +54,11 @@ - - {{item}} - + @for (item of items; track item) { + + {{item}} + + } + placeholder="Location(s)"> diff --git a/src/app/hound/hound.component.ts b/src/app/hound/hound.component.ts index 405526479ea..8fff9069931 100644 --- a/src/app/hound/hound.component.ts +++ b/src/app/hound/hound.component.ts @@ -24,7 +24,6 @@ import { IgxToggleActionDirective, } from "igniteui-angular"; import {FormsModule} from "@angular/forms"; -import {NgForOf, NgIf} from "@angular/common"; @Component({ selector: 'app-hound', @@ -39,7 +38,6 @@ import {NgForOf, NgIf} from "@angular/common"; IgxPrefixDirective, IgxSuffixDirective, IgxSelectComponent, - NgForOf, IgxComboComponent, IgxCheckboxComponent, IgxDropDownComponent, @@ -47,7 +45,6 @@ import {NgForOf, NgIf} from "@angular/common"; IgxToggleActionDirective, IgxRadioComponent, IgxRadioGroupDirective, - NgIf, IgxSelectItemComponent, IgxTabsModule, IgxTabsComponent, diff --git a/src/app/input/input.sample.html b/src/app/input/input.sample.html index 5d185b669dc..e7380a237b4 100644 --- a/src/app/input/input.sample.html +++ b/src/app/input/input.sample.html @@ -31,9 +31,13 @@

Personal Info

- {{item}} - {{item}} + } + @for (item of ['Male', 'Female']; track item) { + {{item}} + }
@@ -58,15 +62,17 @@

Airplane Mode

- - {{item.icon}} -

{{item.name}}

-
- - {{item.active ? 'ON': 'OFF'}} - -
- + @for (item of settings; track item) { + + {{item.icon}} +

{{item.name}}

+
+ + {{item.active ? 'ON': 'OFF'}} + +
+ + }
@@ -82,8 +88,8 @@

Checkbox sample

Alicia Keys + [(ngModel)]="user.registered" + [disableTransitions]="true"> Value diff --git a/src/app/input/input.sample.ts b/src/app/input/input.sample.ts index aba60cc2faa..3a358e7da24 100644 --- a/src/app/input/input.sample.ts +++ b/src/app/input/input.sample.ts @@ -1,5 +1,4 @@ import { Component, ChangeDetectionStrategy } from '@angular/core'; -import { NgFor } from '@angular/common'; import { UntypedFormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { IChangeCheckboxEventArgs, IGX_INPUT_GROUP_DIRECTIVES, IGX_LIST_DIRECTIVES, IgxAvatarComponent, IgxButtonDirective, IgxCheckboxComponent, IgxIconComponent, IgxRadioComponent, IgxSwitchComponent } from 'igniteui-angular'; @@ -9,7 +8,7 @@ import { IChangeCheckboxEventArgs, IGX_INPUT_GROUP_DIRECTIVES, IGX_LIST_DIRECTIV selector: 'app-input-sample', styleUrls: ['input.sample.scss'], templateUrl: 'input.sample.html', - imports: [FormsModule, NgFor, ReactiveFormsModule, IGX_INPUT_GROUP_DIRECTIVES, IGX_LIST_DIRECTIVES, IgxSwitchComponent, IgxIconComponent, IgxCheckboxComponent, IgxAvatarComponent, IgxRadioComponent, IgxButtonDirective] + imports: [FormsModule, ReactiveFormsModule, IGX_INPUT_GROUP_DIRECTIVES, IGX_LIST_DIRECTIVES, IgxSwitchComponent, IgxIconComponent, IgxCheckboxComponent, IgxAvatarComponent, IgxRadioComponent, IgxButtonDirective] }) export class InputSampleComponent { public placeholder = 'Please enter a value'; diff --git a/src/app/list-panning/list-panning.sample.html b/src/app/list-panning/list-panning.sample.html index 1840cd8a5bc..d936463426a 100644 --- a/src/app/list-panning/list-panning.sample.html +++ b/src/app/list-panning/list-panning.sample.html @@ -11,12 +11,14 @@

Swipe left or right to perform action

Dial
Contacts - + @for (item of navItems; track item) { +

{{item.text}}

{{item.phone}} star - + + }
@@ -33,12 +35,14 @@

Swipe left or right to perform action

Delete
Contacts - + @for (item of navItems2; track item) { + -

{{item.text}}

- {{item.phone}} +

{{item.text}}

+ {{item.phone}} star - + + }
diff --git a/src/app/list-panning/list-panning.sample.ts b/src/app/list-panning/list-panning.sample.ts index 0fe2cf9f78f..23bf59db6f4 100644 --- a/src/app/list-panning/list-panning.sample.ts +++ b/src/app/list-panning/list-panning.sample.ts @@ -1,12 +1,11 @@ import { Component, ViewChild, ViewEncapsulation } from '@angular/core'; -import { NgFor } from '@angular/common'; import { IGX_LIST_DIRECTIVES, IgxAvatarComponent, IgxButtonDirective, IgxIconComponent, IgxRippleDirective, IgxToastComponent } from 'igniteui-angular'; @Component({ selector: 'app-list-panning-sample', styleUrls: ['list-panning.sample.scss'], templateUrl: 'list-panning.sample.html', encapsulation: ViewEncapsulation.None, - imports: [NgFor, IgxRippleDirective, IgxAvatarComponent, IgxIconComponent, IgxToastComponent, IgxButtonDirective, IGX_LIST_DIRECTIVES] + imports: [IgxRippleDirective, IgxAvatarComponent, IgxIconComponent, IgxToastComponent, IgxButtonDirective, IGX_LIST_DIRECTIVES] }) export class ListPanningSampleComponent { @ViewChild('toast', { static: true }) diff --git a/src/app/list-performance/list-performance.sample.html b/src/app/list-performance/list-performance.sample.html index 7ac4c69c6eb..b9c9abf50f8 100644 --- a/src/app/list-performance/list-performance.sample.html +++ b/src/app/list-performance/list-performance.sample.html @@ -6,22 +6,26 @@

Performance sample

- - clear - + @if (searchContacts.value.length > 0) { + + clear + + } - - Contacts -
- - - {{item.text}} - star - -
- + @if (showList) { + + Contacts +
+ + + {{item.text}} + star + +
+ + } diff --git a/src/app/list-performance/list-performance.sample.ts b/src/app/list-performance/list-performance.sample.ts index cfe6cc291a1..774f86ff013 100644 --- a/src/app/list-performance/list-performance.sample.ts +++ b/src/app/list-performance/list-performance.sample.ts @@ -1,5 +1,4 @@ import { Component } from '@angular/core'; -import { NgIf } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { IGX_INPUT_GROUP_DIRECTIVES, IGX_LIST_DIRECTIVES, IgxAvatarComponent, IgxButtonDirective, IgxCardComponent, IgxFilterOptions, IgxFilterPipe, IgxForOfDirective, IgxIconComponent, IgxRippleDirective } from 'igniteui-angular'; @@ -9,7 +8,7 @@ import { IGX_INPUT_GROUP_DIRECTIVES, IGX_LIST_DIRECTIVES, IgxAvatarComponent, Ig selector: 'app-list-performance-sample', styleUrls: ['list-performance.sample.scss'], templateUrl: 'list-performance.sample.html', - imports: [IgxIconComponent, FormsModule, NgIf, IgxButtonDirective, IgxCardComponent, IgxForOfDirective, IgxRippleDirective, IgxAvatarComponent, IgxFilterPipe, IGX_LIST_DIRECTIVES, IGX_INPUT_GROUP_DIRECTIVES] + imports: [IgxIconComponent, FormsModule, IgxButtonDirective, IgxCardComponent, IgxForOfDirective, IgxRippleDirective, IgxAvatarComponent, IgxFilterPipe, IGX_LIST_DIRECTIVES, IGX_INPUT_GROUP_DIRECTIVES] }) export class ListPerformanceSampleComponent { public search1: string; diff --git a/src/app/navdrawer/navdrawer.sample.html b/src/app/navdrawer/navdrawer.sample.html index a9ed1186619..06a8ad2343a 100644 --- a/src/app/navdrawer/navdrawer.sample.html +++ b/src/app/navdrawer/navdrawer.sample.html @@ -25,8 +25,10 @@
Modes
Position
- {{item}} + @for (item of ['left', 'right']; track item) { + {{item}} + }

Can be "left"(default) or "right". Only has effect when not pinned.

diff --git a/src/app/navdrawer/navdrawer.sample.ts b/src/app/navdrawer/navdrawer.sample.ts index 5e6cf814df3..c9cd134b9e2 100644 --- a/src/app/navdrawer/navdrawer.sample.ts +++ b/src/app/navdrawer/navdrawer.sample.ts @@ -1,5 +1,4 @@ import { Component } from '@angular/core'; -import { NgFor } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { IgxRadioComponent, IgxSwitchComponent } from 'igniteui-angular'; import { AppComponent } from '../app.component'; @@ -10,7 +9,7 @@ import { AppComponent } from '../app.component'; selector: 'app-navbar-sample', styleUrls: ['navdrawer.sample.scss'], templateUrl: 'navdrawer.sample.html', - imports: [IgxSwitchComponent, FormsModule, NgFor, IgxRadioComponent] + imports: [IgxSwitchComponent, FormsModule, IgxRadioComponent] }) export class NavdrawerSampleComponent { constructor(public app: AppComponent) {} diff --git a/src/app/overlay/overlay-presets.sample.html b/src/app/overlay/overlay-presets.sample.html index 50f472488b7..a115dd3af5f 100644 --- a/src/app/overlay/overlay-presets.sample.html +++ b/src/app/overlay/overlay-presets.sample.html @@ -5,29 +5,37 @@

Absolute Position Strategies

- {{item}} + @for (item of absStrategies; track item) { + {{item}} + }

Absolute Position Settings

- {{item}} + @for (item of absPositions; track item) { + {{item}} + }

Relative Position Strategies

- {{item}} + @for (item of relStrategies; track item) { + {{item}} + }
-
-

Relative Position Settings

- {{item}} -
+
+

Relative Position Settings

+ @for (item of relPositions; track item) { + {{item}} + } +
Outlet @@ -37,11 +45,13 @@ - -
- {{ item }} -
- + @for (item of items; track item) { + +
+ {{ item }} +
+ + }
diff --git a/src/app/overlay/overlay-presets.sample.ts b/src/app/overlay/overlay-presets.sample.ts index 26da56991af..bbfb28d5bdc 100644 --- a/src/app/overlay/overlay-presets.sample.ts +++ b/src/app/overlay/overlay-presets.sample.ts @@ -1,5 +1,4 @@ import { Component, ViewChild, ElementRef, OnInit } from '@angular/core'; -import { NgFor } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { IgxDropDownComponent, @@ -19,7 +18,7 @@ import { selector: 'overlay-presets-sample', templateUrl: './overlay-presets.sample.html', styleUrls: ['overlay-presets.sample.scss'], - imports: [NgFor, IgxRadioComponent, FormsModule, IgxButtonDirective, IgxRippleDirective, IgxDragDirective, IgxDropDownComponent, IgxDropDownItemComponent] + imports: [IgxRadioComponent, FormsModule, IgxButtonDirective, IgxRippleDirective, IgxDragDirective, IgxDropDownComponent, IgxDropDownItemComponent] }) export class OverlayPresetsSampleComponent implements OnInit { @ViewChild(IgxDropDownComponent, { static: true }) diff --git a/src/app/overlay/overlay.sample.html b/src/app/overlay/overlay.sample.html index c44853e74fe..f57447e6fef 100644 --- a/src/app/overlay/overlay.sample.html +++ b/src/app/overlay/overlay.sample.html @@ -38,13 +38,17 @@

Strategies

Position Strategies

- {{item}} + }

Scroll Strategies

- {{item}} + }
@@ -86,11 +90,13 @@ - -
- {{ item }} -
- + @for (item of items; track item) { + +
+ {{ item }} +
+ + }
diff --git a/src/app/overlay/overlay.sample.ts b/src/app/overlay/overlay.sample.ts index fc29c0b9120..f69ea23cfc7 100644 --- a/src/app/overlay/overlay.sample.ts +++ b/src/app/overlay/overlay.sample.ts @@ -1,6 +1,5 @@ import { Component, ViewChild, ElementRef, ChangeDetectorRef, OnInit } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { NgFor } from '@angular/common'; import { IgxDropDownComponent, OverlaySettings, @@ -30,7 +29,7 @@ import { IAnimationParams } from 'igniteui-angular/animations'; selector: 'overlay-sample', styleUrls: ['overlay.sample.css'], templateUrl: './overlay.sample.html', - imports: [NgFor, IgxRadioComponent, FormsModule, IgxSwitchComponent, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxButtonDirective, IgxRippleDirective, IgxDragDirective, IgxDropDownComponent, IgxDropDownItemComponent] + imports: [IgxRadioComponent, FormsModule, IgxSwitchComponent, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgxButtonDirective, IgxRippleDirective, IgxDragDirective, IgxDropDownComponent, IgxDropDownItemComponent] }) export class OverlaySampleComponent implements OnInit { @ViewChild(IgxDropDownComponent, { static: true }) diff --git a/src/app/radio/radio.sample.html b/src/app/radio/radio.sample.html index 391cf5260a9..d0e509bcfb5 100644 --- a/src/app/radio/radio.sample.html +++ b/src/app/radio/radio.sample.html @@ -2,28 +2,30 @@
- - -
Reserve your dream vacation at {{ opt }}
- - -

- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut - labore et dolore magna - aliqua. Elit pellentesque habitant morbi tristique senectus et netus et. Aliquet bibendum - enim facilisis gravida. Rutrum -

- - - - Pick choice {{ opt }} - - + @for (opt of options; track opt) { + + +
Reserve your dream vacation at {{ opt }}
+ + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut + labore et dolore magna + aliqua. Elit pellentesque habitant morbi tristique senectus et netus et. Aliquet bibendum + enim facilisis gravida. Rutrum +

+ + + + Pick choice {{ opt }} + + + }

Selected: {{ initial }}

@@ -33,9 +35,11 @@
Reserve your dream vacation at {{ opt }}

Radio group without data model (Vertical Alignment)

- - {{item}} - + @for (item of ['Foo', 'Bar', 'Baz']; track item) { + + {{item}} + + }
- - + + @for (item of seasons; track item) { + {{item.name}} - + } +
diff --git a/src/app/radio/radio.sample.ts b/src/app/radio/radio.sample.ts index 3ab5979d2ad..bc25a6e32fc 100644 --- a/src/app/radio/radio.sample.ts +++ b/src/app/radio/radio.sample.ts @@ -1,5 +1,5 @@ import { Component, ViewChild, AfterContentInit } from '@angular/core'; -import { NgFor, JsonPipe } from '@angular/common'; +import { JsonPipe } from '@angular/common'; import { UntypedFormGroup, UntypedFormBuilder, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { IgxRadioGroupDirective, IgxLayoutDirective, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxRippleDirective, IgxButtonDirective, IgxRadioComponent, RadioGroupAlignment } from 'igniteui-angular'; @@ -18,7 +18,7 @@ class Person { selector: 'app-radio-sample', styleUrls: ['radio.sample.scss'], templateUrl: 'radio.sample.html', - imports: [IgxRadioGroupDirective, FormsModule, IgxLayoutDirective, NgFor, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxRippleDirective, IgxButtonDirective, IgxRadioComponent, ReactiveFormsModule, JsonPipe] + imports: [IgxRadioGroupDirective, FormsModule, IgxLayoutDirective, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxCardActionsComponent, IgxRippleDirective, IgxButtonDirective, IgxRadioComponent, ReactiveFormsModule, JsonPipe] }) export class RadioSampleComponent implements AfterContentInit { @ViewChild('radioGroupZZ', { read: IgxRadioGroupDirective, static: true }) diff --git a/src/app/rating/rating.sample.html b/src/app/rating/rating.sample.html index 5b501514e3b..518ad2fa666 100644 --- a/src/app/rating/rating.sample.html +++ b/src/app/rating/rating.sample.html @@ -1,23 +1,23 @@
- - - {{model.Name}} - {{ model.Name }}'s rating is: {{ model.Rating }} - - -
- - - - - - - - - - - -
- - + @for (model of models; track model) { + + + {{model.Name}} + {{ model.Name }}'s rating is: {{ model.Rating }} + + +
+ + + + + + + + + +
+ + + }
diff --git a/src/app/rating/rating.sample.ts b/src/app/rating/rating.sample.ts index ac7cc07267b..14bfa4cba9d 100644 --- a/src/app/rating/rating.sample.ts +++ b/src/app/rating/rating.sample.ts @@ -1,6 +1,5 @@ import { Component } from '@angular/core'; import { FormsModule } from '@angular/forms'; -import { NgFor } from '@angular/common'; import { defineComponents, IgcRatingComponent } from 'igniteui-webcomponents'; import { IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgcFormControlDirective } from 'igniteui-angular'; @@ -11,7 +10,7 @@ defineComponents(IgcRatingComponent); selector: 'app-rating-sample', styleUrls: ['rating.sample.scss'], templateUrl: 'rating.sample.html', - imports: [NgFor, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgcFormControlDirective] + imports: [IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, FormsModule, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective, IgcFormControlDirective] }) export class RatingSampleComponent { public models = [{ diff --git a/src/app/reactive-from/reactive-form-sample.component.html b/src/app/reactive-from/reactive-form-sample.component.html index c818ca5a1de..b2b14304773 100644 --- a/src/app/reactive-from/reactive-form-sample.component.html +++ b/src/app/reactive-from/reactive-form-sample.component.html @@ -4,11 +4,15 @@

Book your movie ticket

- - - {{ movie }} - - + @for (genre of genres; track genre) { + + @for (movie of genre.movies; track movie) { + + {{ movie }} + + } + + } local_movies diff --git a/src/app/reactive-from/reactive-form-sample.component.ts b/src/app/reactive-from/reactive-form-sample.component.ts index 9ee391dd838..c2088e10afb 100644 --- a/src/app/reactive-from/reactive-form-sample.component.ts +++ b/src/app/reactive-from/reactive-form-sample.component.ts @@ -1,5 +1,4 @@ import { Component } from '@angular/core'; -import { NgFor } from '@angular/common'; import { UntypedFormBuilder, UntypedFormControl, UntypedFormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms'; import { IgxSelectComponent, IgxSelectGroupComponent, IgxSelectItemComponent, IgxLabelDirective, IgxSelectToggleIconDirective, IgxIconComponent, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, IgxPrefixDirective, IgxHintDirective, IgxComboComponent, IgxDatePickerComponent, IgxTimePickerComponent, IgxButtonDirective, IgxRippleDirective } from 'igniteui-angular'; @@ -7,7 +6,7 @@ import { IgxSelectComponent, IgxSelectGroupComponent, IgxSelectItemComponent, Ig selector: 'app-reactive-form', styleUrls: ['reactive-form-sample.component.scss'], templateUrl: 'reactive-form-sample.component.html', - imports: [FormsModule, ReactiveFormsModule, IgxSelectComponent, NgFor, IgxSelectGroupComponent, IgxSelectItemComponent, IgxLabelDirective, IgxSelectToggleIconDirective, IgxIconComponent, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, IgxPrefixDirective, IgxHintDirective, IgxComboComponent, IgxDatePickerComponent, IgxTimePickerComponent, IgxButtonDirective, IgxRippleDirective] + imports: [FormsModule, ReactiveFormsModule, IgxSelectComponent, IgxSelectGroupComponent, IgxSelectItemComponent, IgxLabelDirective, IgxSelectToggleIconDirective, IgxIconComponent, IgxInputGroupComponent, IgxInputDirective, IgxSuffixDirective, IgxPrefixDirective, IgxHintDirective, IgxComboComponent, IgxDatePickerComponent, IgxTimePickerComponent, IgxButtonDirective, IgxRippleDirective] }) export class ReactiveFormSampleComponent { public genres = []; diff --git a/src/app/select/select.sample.html b/src/app/select/select.sample.html index 639bbe97877..a1dcd55c199 100644 --- a/src/app/select/select.sample.html +++ b/src/app/select/select.sample.html @@ -31,11 +31,13 @@

Select with ngModel, set items OnInit

None - - alarm - {{ item.field }} - notifications_active - + @for (item of items; track item; let inx = $index) { + + alarm + {{ item.field }} + notifications_active + + }
Header content @@ -101,8 +103,8 @@

Select - disabled item

-

Select - using Groups

- Select - using Groups + Select - using Groups (closed)="testOnClosed()" (selectionChanging)="testOnSelection($event)" [disabled]="false"> - - - alarm - - OutsideGroup - - - alarm - InsideGroup1 - alarm - - - alarm - InsideGroup2 - alarm - - - alarm - InsideGroup3 - alarm - - - + + + alarm + + OutsideGroup + + + alarm + InsideGroup1 + alarm + + + alarm + InsideGroup2 + alarm + + + alarm + InsideGroup3 + alarm + + +
@@ -144,9 +146,11 @@

Select in a Form

alarm - - {{ city }} - + @for (city of cities; track city; let inx = $index) { + + {{ city }} + + } @@ -169,9 +173,11 @@

Select - dynamically change required

Fruit None - - {{fruit}} - + @for (fruit of fruits; track fruit) { + + {{fruit}} + + }
Selected: {{selected}}
Valid: {{model.valid}}
diff --git a/src/app/select/select.sample.ts b/src/app/select/select.sample.ts index f97e8349d9a..bf64a880d2b 100644 --- a/src/app/select/select.sample.ts +++ b/src/app/select/select.sample.ts @@ -1,6 +1,5 @@ import { Component, OnInit, ViewChildren, QueryList, ViewChild } from '@angular/core'; import { UntypedFormBuilder, UntypedFormGroup, Validators, FormsModule, ReactiveFormsModule } from '@angular/forms'; -import { NgFor } from '@angular/common'; import { IgxButtonDirective, IgxSelectComponent, IgxLabelDirective, IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, IgxSelectHeaderDirective, IgxSelectFooterDirective, IgxSuffixDirective, IgxHintDirective, IgxSelectGroupComponent, IgxSwitchComponent, ISelectionEventArgs, CancelableEventArgs, HorizontalAlignment, VerticalAlignment, ConnectedPositioningStrategy, AbsoluteScrollStrategy } from 'igniteui-angular'; import { scaleInTop, scaleOutBottom } from 'igniteui-angular/animations'; import { SizeSelectorComponent } from '../size-selector/size-selector.component'; @@ -19,7 +18,6 @@ import { SizeSelectorComponent } from '../size-selector/size-selector.component' IgxPrefixDirective, IgxIconComponent, IgxSelectItemComponent, - NgFor, IgxSelectHeaderDirective, IgxSelectFooterDirective, IgxSuffixDirective, diff --git a/src/app/styleguide/animations/animations.sample.html b/src/app/styleguide/animations/animations.sample.html index 24f62b2161d..b4b57ed1ba4 100644 --- a/src/app/styleguide/animations/animations.sample.html +++ b/src/app/styleguide/animations/animations.sample.html @@ -3,12 +3,11 @@

Animations categories

- -

{{ category }}

- + @for (category of animationsCategories; track category) { + +

{{ category }}

+ + }
@@ -16,9 +15,11 @@

Animations categories

Animations

- -

{{ animation.name }}

- + @for (animation of animations; track animation) { + +

{{ animation.name }}

+ + }
diff --git a/src/app/styleguide/animations/animations.sample.ts b/src/app/styleguide/animations/animations.sample.ts index 716f4e3a283..b161c21857e 100644 --- a/src/app/styleguide/animations/animations.sample.ts +++ b/src/app/styleguide/animations/animations.sample.ts @@ -1,5 +1,4 @@ import { AnimationReferenceMetadata } from '@angular/animations'; -import { NgFor } from '@angular/common'; import { Component, ViewChild } from '@angular/core'; import { AbsolutePosition, @@ -31,7 +30,7 @@ import { selector: 'app-animations-sample', styleUrls: ['animations.sample.scss'], templateUrl: 'animations.sample.html', - imports: [IgxListComponent, NgFor, IgxListItemComponent, IgxRippleDirective, IgxDialogComponent] + imports: [IgxListComponent, IgxListItemComponent, IgxRippleDirective, IgxDialogComponent] }) export class AnimationsSampleComponent { @ViewChild('dialog', { static: true, read: IgxDialogComponent }) diff --git a/src/app/styleguide/colors/color.sample.html b/src/app/styleguide/colors/color.sample.html index 53d880bef60..f68f875f295 100644 --- a/src/app/styleguide/colors/color.sample.html +++ b/src/app/styleguide/colors/color.sample.html @@ -2,14 +2,20 @@

Color Palettes

-
-
-

{{color.name}}

-
- {{variant}} -
+ @for (color of colors; track color) { +
+ @if (color.variants.length > 1) { +
+

{{color.name}}

+ @for (variant of color.variants; track variant) { +
+ {{variant}} +
+ } +
+ }
-
+ }
diff --git a/src/app/styleguide/colors/color.sample.ts b/src/app/styleguide/colors/color.sample.ts index a4905648057..dab6c1b0070 100644 --- a/src/app/styleguide/colors/color.sample.ts +++ b/src/app/styleguide/colors/color.sample.ts @@ -1,11 +1,10 @@ import { Component } from '@angular/core'; -import { NgFor, NgIf } from '@angular/common'; @Component({ selector: 'app-colors-sample', styleUrls: ['color.sample.scss'], templateUrl: 'color.sample.html', - imports: [NgFor, NgIf] + imports: [] }) export class ColorsSampleComponent { public colors = [ diff --git a/src/app/tabs-routing/tabs-routing-views.sample.ts b/src/app/tabs-routing/tabs-routing-views.sample.ts index 20c41786eee..207d07fd167 100644 --- a/src/app/tabs-routing/tabs-routing-views.sample.ts +++ b/src/app/tabs-routing/tabs-routing-views.sample.ts @@ -2,7 +2,6 @@ import { Component } from '@angular/core'; import { IgxIconComponent } from '../../../projects/igniteui-angular/src/lib/icon/icon.component'; import { IgxAvatarComponent } from '../../../projects/igniteui-angular/src/lib/avatar/avatar.component'; import { IgxRippleDirective } from '../../../projects/igniteui-angular/src/lib/directives/ripple/ripple.directive'; -import { NgFor } from '@angular/common'; import { IgxListItemComponent } from '../../../projects/igniteui-angular/src/lib/list/list-item.component'; import { IgxListComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxListActionDirective } from '../../../projects/igniteui-angular/src/lib/list/list.component'; @@ -10,15 +9,17 @@ import { IgxListComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, template: ` History - - -

{{contact.text}}

-

{{contact.phone}}

- phone - + @for (contact of contacts; track contact) { + + +

{{contact.text}}

+

{{contact.phone}}

+ phone + + } `, - imports: [IgxListComponent, IgxListItemComponent, NgFor, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxIconComponent, IgxListActionDirective] + imports: [IgxListComponent, IgxListItemComponent, IgxRippleDirective, IgxAvatarComponent, IgxListThumbnailDirective, IgxListLineTitleDirective, IgxListLineSubTitleDirective, IgxIconComponent, IgxListActionDirective] }) export class TabsRoutingView1Component { public contacts = [{ diff --git a/src/app/time-picker/time-picker.sample.html b/src/app/time-picker/time-picker.sample.html index a7f2320550c..7da22ba5546 100644 --- a/src/app/time-picker/time-picker.sample.html +++ b/src/app/time-picker/time-picker.sample.html @@ -25,8 +25,10 @@

Time Picker with ngModel binding

- Value is outside the range. - + @if (model.errors?.minValue || model.errors?.maxValue) { + Value is outside the range. + + }
@@ -65,8 +67,8 @@

Time Picker with custom spin buttons

alarm - - + + delete expand_less diff --git a/src/app/time-picker/time-picker.sample.ts b/src/app/time-picker/time-picker.sample.ts index 7c8871b98ff..8f94c56d4f8 100644 --- a/src/app/time-picker/time-picker.sample.ts +++ b/src/app/time-picker/time-picker.sample.ts @@ -1,5 +1,4 @@ import { Component, ViewChild } from '@angular/core'; -import { NgIf } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { IgxTimePickerComponent, @@ -21,7 +20,7 @@ import { selector: 'app-time-picker-sample', styleUrls: ['time-picker.sample.scss'], templateUrl: 'time-picker.sample.html', - imports: [IgxTimePickerComponent, FormsModule, NgIf, IgxHintDirective, IgxButtonDirective, IgxPickerActionsDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxPickerClearComponent, IgxSuffixDirective] + imports: [IgxTimePickerComponent, FormsModule, IgxHintDirective, IgxButtonDirective, IgxPickerActionsDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxIconComponent, IgxPickerClearComponent, IgxSuffixDirective] }) export class TimePickerSampleComponent { @ViewChild('tp', { read: IgxTimePickerComponent, static: true }) diff --git a/src/app/tree-grid-add-row/tree-grid-add-row.sample.html b/src/app/tree-grid-add-row/tree-grid-add-row.sample.html index 4542c3cf346..437a82fcaaf 100644 --- a/src/app/tree-grid-add-row/tree-grid-add-row.sample.html +++ b/src/app/tree-grid-add-row/tree-grid-add-row.sample.html @@ -1,11 +1,13 @@
- - + @for (c of columns; track c) { + + + } diff --git a/src/app/tree-grid-add-row/tree-grid-add-row.sample.ts b/src/app/tree-grid-add-row/tree-grid-add-row.sample.ts index f5a8e6e2aff..e920daa74fa 100644 --- a/src/app/tree-grid-add-row/tree-grid-add-row.sample.ts +++ b/src/app/tree-grid-add-row/tree-grid-add-row.sample.ts @@ -1,5 +1,4 @@ import { Component, OnInit, ViewChild } from '@angular/core'; -import { NgFor } from '@angular/common'; import { ColumnPinningPosition, IgxActionStripComponent, IgxButtonDirective, IgxColumnComponent, IgxGridEditingActionsComponent, IgxGridPinningActionsComponent, IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, IgxTreeGridComponent, RowPinningPosition } from 'igniteui-angular'; @@ -7,7 +6,7 @@ import { ColumnPinningPosition, IgxActionStripComponent, IgxButtonDirective, Igx selector: 'app-tree-grid-add-row', styleUrls: ['tree-grid-add-row.sample.scss'], templateUrl: `tree-grid-add-row.sample.html`, - imports: [IgxTreeGridComponent, NgFor, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent, IgxButtonDirective, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective] + imports: [IgxTreeGridComponent, IgxColumnComponent, IgxActionStripComponent, IgxGridPinningActionsComponent, IgxGridEditingActionsComponent, IgxButtonDirective, IgxInputGroupComponent, IgxInputDirective, IgxLabelDirective] }) export class TreeGridAddRowSampleComponent implements OnInit { @ViewChild(IgxTreeGridComponent) diff --git a/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.html b/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.html index bb531374a6d..e0355553bfc 100644 --- a/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.html +++ b/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.html @@ -9,11 +9,13 @@ - - + @for (c of columns; track c) { + + + } @@ -26,7 +28,9 @@ - + @if (paging) { + + }
diff --git a/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts b/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts index 7a2cdac729a..8d7fd37a3b5 100644 --- a/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts +++ b/src/app/tree-grid-flat-data/tree-grid-flat-data.sample.ts @@ -1,5 +1,4 @@ import { Component, ViewChild, OnInit, HostBinding } from '@angular/core'; -import { NgFor, NgIf } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { GridSearchBoxComponent } from '../grid-search-box/grid-search-box.component'; @@ -23,7 +22,7 @@ export class MySummaryOperand extends IgxSummaryOperand { selector: 'app-tree-grid-flat-data-sample', styleUrls: ['tree-grid-flat-data.sample.scss'], templateUrl: 'tree-grid-flat-data.sample.html', - imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxTreeGridComponent, NgFor, NgIf, IgxColumnComponent, IgxGridToolbarComponent, GridSearchBoxComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxPaginatorComponent, IgxSwitchComponent, FormsModule] + imports: [IgxButtonGroupComponent, IgxButtonDirective, IgxTreeGridComponent, IgxColumnComponent, IgxGridToolbarComponent, GridSearchBoxComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxPaginatorComponent, IgxSwitchComponent, FormsModule] }) export class TreeGridFlatDataSampleComponent implements OnInit { @HostBinding('style.--ig-size') diff --git a/src/app/tree-grid-groupby/tree-grid-groupby.sample.html b/src/app/tree-grid-groupby/tree-grid-groupby.sample.html index a2bb4a72099..c83a14652da 100644 --- a/src/app/tree-grid-groupby/tree-grid-groupby.sample.html +++ b/src/app/tree-grid-groupby/tree-grid-groupby.sample.html @@ -1,7 +1,9 @@
- Hide Grouped Columns + @if (groupArea) { + Hide Grouped Columns + }
@@ -35,10 +37,12 @@ - - + @for (c of columns; track c) { + + + }
diff --git a/src/app/tree-grid-groupby/tree-grid-groupby.sample.ts b/src/app/tree-grid-groupby/tree-grid-groupby.sample.ts index fa5a4700e92..466eb1ce7d5 100644 --- a/src/app/tree-grid-groupby/tree-grid-groupby.sample.ts +++ b/src/app/tree-grid-groupby/tree-grid-groupby.sample.ts @@ -1,5 +1,4 @@ import { Component, ViewChild, OnInit, HostBinding } from '@angular/core'; -import { NgIf, NgFor } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { SAMPLE_DATA } from '../shared/sample-data'; @@ -11,7 +10,7 @@ import { IgxButtonGroupComponent, IgxSwitchComponent, IgxTreeGridComponent, IgxT selector: 'app-tree-grid-groupby-sample', styleUrls: ['tree-grid-groupby.sample.scss'], templateUrl: 'tree-grid-groupby.sample.html', - imports: [IgxButtonGroupComponent, NgIf, IgxSwitchComponent, FormsModule, IgxTreeGridComponent, IgxTreeGridGroupByAreaComponent, IgxColumnComponent, NgFor, IgxTreeGridGroupingPipe] + imports: [IgxButtonGroupComponent, IgxSwitchComponent, FormsModule, IgxTreeGridComponent, IgxTreeGridGroupByAreaComponent, IgxColumnComponent, IgxTreeGridGroupingPipe] }) export class TreeGridGroupBySampleComponent implements OnInit { diff --git a/src/app/tree-grid-load-on-demand/tree-grid-load-on-demand.sample.html b/src/app/tree-grid-load-on-demand/tree-grid-load-on-demand.sample.html index a55cca09f08..c73be3efb74 100644 --- a/src/app/tree-grid-load-on-demand/tree-grid-load-on-demand.sample.html +++ b/src/app/tree-grid-load-on-demand/tree-grid-load-on-demand.sample.html @@ -23,15 +23,19 @@

Primary/Foreign key

- - + @for (c of columns; track c) { + + + } - + @if (paging) { + + }
@@ -77,10 +81,12 @@

ChildData key

- - + @for (c of columns; track c) { + + + }
diff --git a/src/app/tree-grid-load-on-demand/tree-grid-load-on-demand.sample.ts b/src/app/tree-grid-load-on-demand/tree-grid-load-on-demand.sample.ts index cb51f4f9bb5..0214c9e4209 100644 --- a/src/app/tree-grid-load-on-demand/tree-grid-load-on-demand.sample.ts +++ b/src/app/tree-grid-load-on-demand/tree-grid-load-on-demand.sample.ts @@ -1,5 +1,4 @@ import { Component, ViewChild, OnInit, HostBinding } from '@angular/core'; -import { NgFor, NgIf } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { TreeGridLoadOnDemandService } from './tree-grid-load-on-demand.service'; @@ -25,7 +24,7 @@ export class MySummaryOperand extends IgxSummaryOperand { selector: 'app-tree-grid-load-on-demand-sample', styleUrls: ['tree-grid-load-on-demand.sample.scss'], templateUrl: 'tree-grid-load-on-demand.sample.html', - imports: [IgxButtonGroupComponent, IgxTreeGridComponent, IgxGridToolbarComponent, GridSearchBoxComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, NgFor, IgxColumnComponent, IgxSwitchComponent, FormsModule, NgIf, IgxPaginatorComponent, IgxButtonDirective] + imports: [IgxButtonGroupComponent, IgxTreeGridComponent, IgxGridToolbarComponent, GridSearchBoxComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxColumnComponent, IgxSwitchComponent, FormsModule, IgxPaginatorComponent, IgxButtonDirective] }) export class TreeGridLoadOnDemandSampleComponent implements OnInit { @HostBinding('style.--ig-size') diff --git a/src/app/tree-grid/tree-grid.sample.html b/src/app/tree-grid/tree-grid.sample.html index 105a2317341..364a0a14454 100644 --- a/src/app/tree-grid/tree-grid.sample.html +++ b/src/app/tree-grid/tree-grid.sample.html @@ -19,9 +19,12 @@ - - + + @if (paging) { + + }
@@ -30,9 +33,11 @@
- + @for (item of selectionModes; track item) { + {{ item }} - + + } diff --git a/src/app/tree-grid/tree-grid.sample.ts b/src/app/tree-grid/tree-grid.sample.ts index 06f50495e17..5fe222208f8 100644 --- a/src/app/tree-grid/tree-grid.sample.ts +++ b/src/app/tree-grid/tree-grid.sample.ts @@ -1,5 +1,4 @@ import { Component, ViewChild, OnInit, HostBinding } from '@angular/core'; -import { NgIf, NgFor } from '@angular/common'; import { FormsModule } from '@angular/forms'; import { HIERARCHICAL_SAMPLE_DATA } from '../shared/sample-data'; @@ -12,7 +11,7 @@ import { IgxButtonGroupComponent, IgxTreeGridComponent, IgxGridToolbarComponent, selector: 'app-tree-grid-sample', styleUrls: ['tree-grid.sample.scss'], templateUrl: 'tree-grid.sample.html', - imports: [IgxButtonGroupComponent, IgxTreeGridComponent, IgxGridToolbarComponent, GridSearchBoxComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, NgIf, IgxPaginatorComponent, IgxSwitchComponent, FormsModule, IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, NgFor, IgxDropDownItemComponent] + imports: [IgxButtonGroupComponent, IgxTreeGridComponent, IgxGridToolbarComponent, GridSearchBoxComponent, IgxGridToolbarActionsComponent, IgxGridToolbarPinningComponent, IgxGridToolbarHidingComponent, IgxGridToolbarAdvancedFilteringComponent, IgxGridToolbarExporterComponent, IgxExcelTextDirective, IgxCSVTextDirective, IgxPaginatorComponent, IgxSwitchComponent, FormsModule, IgxButtonDirective, IgxToggleActionDirective, IgxDropDownItemNavigationDirective, IgxDropDownComponent, IgxDropDownItemComponent] }) export class TreeGridSampleComponent implements OnInit { diff --git a/src/app/tree/tree.sample.html b/src/app/tree/tree.sample.html index 30c85956e74..7b08d641a9b 100644 --- a/src/app/tree/tree.sample.html +++ b/src/app/tree/tree.sample.html @@ -71,37 +71,51 @@ Disabled node Load on demand - - {{ item.CompanyName }} - + @for (item of (asyncItems | async) || [{ ID: 'dummy', CompanyName: ''}]; track item) { + + {{ item.CompanyName }} + + } Disabled Link Link children - - - - + @for (node of [].constructor(7); track $index; let i = $index) { + + + @for (node of [].constructor(2); track $index; let i = $index) { + + + + } - + } - -
- face - {{ node.ID }} -
- NA_FRANCO_DETETO - - {{ child.ID }} - - {{ leafchild.ID }} - + @for (node of data; track node) { + +
+ face + {{ node.ID }} +
+ @if (node.ID === 'FRANS') { + NA_FRANCO_DETETO + } + @for (child of node.ChildCompanies; track child) { + + {{ child.ID }} + @for (leafchild of child.ChildCompanies; track leafchild) { + + {{ leafchild.ID }} + + } + + } - + } Link to Google @@ -114,15 +128,21 @@

IgxTree 2: The Branching

- - {{ node.CompanyName }} - - {{ child.CompanyName }} - - {{ leafchild.CompanyName }} - + @for (node of data; track node) { + + {{ node.CompanyName }} + @for (child of node.ChildCompanies; track child) { + + {{ child.CompanyName }} + @for (leafchild of child.ChildCompanies; track leafchild) { + + {{ leafchild.CompanyName }} + + } + + } - + }
diff --git a/src/app/tree/tree.sample.ts b/src/app/tree/tree.sample.ts index d4bd5e3ae9b..28ed9c02a11 100644 --- a/src/app/tree/tree.sample.ts +++ b/src/app/tree/tree.sample.ts @@ -1,5 +1,5 @@ import { useAnimation } from '@angular/animations'; -import { NgFor, NgTemplateOutlet, NgIf, AsyncPipe } from '@angular/common'; +import { NgTemplateOutlet, AsyncPipe } from '@angular/common'; import { AfterViewInit, ChangeDetectorRef, Component, ViewChild } from '@angular/core'; import { FormsModule } from '@angular/forms'; import { @@ -16,7 +16,7 @@ import { IgxInputDirective, IgxInputGroupComponent, IgxLabelDirective, - IgxLayoutDirective, + IgxLayoutDirective, IgxSwitchComponent, IgxTreeNodeLinkDirective, IgxTreeExpandIndicatorDirective @@ -61,12 +61,10 @@ interface CompanyData { IgxButtonGroupComponent, IgxTreeComponent, IgxTreeNodeComponent, - NgFor, IgxTreeNodeLinkDirective, IgxTreeExpandIndicatorDirective, NgTemplateOutlet, IgxIconComponent, - NgIf, AsyncPipe, SizeSelectorComponent ] diff --git a/src/app/virtual-for-directive/virtual-for.sample.html b/src/app/virtual-for-directive/virtual-for.sample.html index 215a8e6ae79..c6b05e44e0d 100644 --- a/src/app/virtual-for-directive/virtual-for.sample.html +++ b/src/app/virtual-for-directive/virtual-for.sample.html @@ -91,7 +91,7 @@

Variable heights

Even Variable

-