feat(grids): add empty and loading declarative template directives (#15895)

Author: damyanpetev

CHANGELOG.md

@@ -11,6 +11,25 @@ All notable changes for each version of this project will be documented in this
 - `IgxChip`
     - **Behavioral Change** The `variant` is now strictly typed with the union of supported options and no longer accepts invalid values for the default state, provide no value (nullish) instead is needed.
 
+### New Features
+- `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`, `IgxPivotGrid`
+  - Added a new `igxGridEmpty` template directive that allows assigning the `emptyGridTemplate` declaratively, without the need to get and assign reference, like other grid templates like:
+    ```html
+    <igx-grid>
+      <ng-template igxGridEmpty>
+        <!-- content to show when the grid is empty -->
+      </ng-template>
+    </igx-grid>
+    ```
+  - Added a new `igxGridLoading` template directive that allows assigning the `loadingGridTemplate` declaratively, without the need to get and assign reference, like other grid templates like:
+    ```html
+    <igx-grid>
+      <ng-template igxGridLoading>
+        <!-- content to show when the grid is loading -->
+      </ng-template>
+    </igx-grid>
+    ```
+
 ## 19.2.0
 
 ### General

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -80,7 +80,8 @@ import { FilteringStrategy, IFilteringStrategy } from '../data-operations/filter
 import {
     IgxRowExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective,
     IgxHeaderCollapsedIndicatorDirective, IgxExcelStyleHeaderIconDirective, IgxSortAscendingHeaderIconDirective,
-    IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective
+    IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective,
+    IgxGridLoadingTemplateDirective, IgxGridEmptyTemplateDirective,
 } from './grid.directives';
 import {
     GridKeydownTargetType,
@@ -260,11 +261,22 @@ export abstract class IgxGridBaseDirective implements GridType,
      *
      * @example
      * ```html
+     * <ng-template igxGridEmpty>
+     *   <!-- content to show when the grid is empty -->
+     * </ng-template>
+     * ```
+     * Or
+     * ```html
      * <igx-grid [id]="'igx-grid-1'" [data]="Data" [emptyGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
      * ```
      */
     @Input()
-    public emptyGridTemplate: TemplateRef<IgxGridTemplateContext>;
+    public get emptyGridTemplate(): TemplateRef<IgxGridTemplateContext> {
+        return this._emptyGridTemplate || this.emptyDirectiveTemplate;
+    }
+    public set emptyGridTemplate(template: TemplateRef<IgxGridTemplateContext>) {
+        this._emptyGridTemplate = template;
+    }
 
     /**
      * Gets/Sets a custom template for adding row UI when grid is empty.
@@ -282,11 +294,22 @@ export abstract class IgxGridBaseDirective implements GridType,
      *
      * @example
      * ```html
+     * <ng-template igxGridLoading>
+     *   <!-- content to show when the grid is loading -->
+     * </ng-template>
+     * ```
+     * Or
+     * ```html
      * <igx-grid [id]="'igx-grid-1'" [data]="Data" [loadingGridTemplate]="myTemplate" [autoGenerate]="true"></igx-grid>
      * ```
      */
     @Input()
-    public loadingGridTemplate: TemplateRef<IgxGridTemplateContext>;
+    public get loadingGridTemplate(): TemplateRef<IgxGridTemplateContext> {
+        return this._loadingGridTemplate || this.loadingDirectiveTemplate;
+    }
+    public set loadingGridTemplate(template: TemplateRef<IgxGridTemplateContext>) {
+        this._loadingGridTemplate = template;
+    }
 
     /**
      * Get/Set IgxSummaryRow height
@@ -1709,6 +1732,13 @@ export abstract class IgxGridBaseDirective implements GridType,
     @ContentChildren(IgxDragIndicatorIconDirective, { read: TemplateRef, descendants: false })
     public dragIndicatorIconTemplates: QueryList<TemplateRef<IgxGridEmptyTemplateContext>>;
 
+
+    @ContentChild(IgxGridLoadingTemplateDirective, { read: TemplateRef })
+    protected loadingDirectiveTemplate: TemplateRef<IgxGridTemplateContext>;
+
+    @ContentChild(IgxGridEmptyTemplateDirective, { read: TemplateRef })
+    protected emptyDirectiveTemplate: TemplateRef<IgxGridTemplateContext>;
+
     /**
      * @hidden @internal
      */
@@ -3186,6 +3216,8 @@ export abstract class IgxGridBaseDirective implements GridType,
     private _rowCollapsedIndicatorTemplate: TemplateRef<IgxGridRowTemplateContext>;
     private _headerExpandIndicatorTemplate: TemplateRef<IgxGridTemplateContext>;
     private _headerCollapseIndicatorTemplate: TemplateRef<IgxGridTemplateContext>;
+    private _emptyGridTemplate: TemplateRef<IgxGridTemplateContext>;
+    private _loadingGridTemplate: TemplateRef<IgxGridTemplateContext>;
 
     private _cdrRequests = false;
     private _resourceStrings = getCurrentResourceStrings(GridResourceStringsEN);

projects/igniteui-angular/src/lib/grids/grid.directives.ts

@@ -155,6 +155,30 @@ export class IgxSortDescendingHeaderIconDirective {
     }
 }
 
+/** @hidden */
+@Directive({
+    selector: '[igxGridLoading]',
+    standalone: true
+})
+export class IgxGridLoadingTemplateDirective {
+    public static ngTemplateContextGuard(_directive: IgxGridLoadingTemplateDirective,
+        context: unknown): context is IgxGridTemplateContext {
+        return true
+    }
+}
+
+/** @hidden */
+@Directive({
+    selector: '[igxGridEmpty]',
+    standalone: true
+})
+export class IgxGridEmptyTemplateDirective {
+    public static ngTemplateContextGuard(_directive: IgxGridEmptyTemplateDirective,
+        context: unknown): context is IgxGridTemplateContext {
+        return true
+    }
+}
+
 /**
  * @hidden
  */

projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts

@@ -24,7 +24,7 @@ import { ISortingExpression, SortingDirection } from '../../data-operations/sort
 import { GRID_SCROLL_CLASS } from '../../test-utils/grid-functions.spec';
 import { AsyncPipe } from '@angular/common';
 import { IgxPaginatorComponent, IgxPaginatorContentDirective } from '../../paginator/paginator.component';
-import { IGridRowEventArgs, IgxColumnGroupComponent, IgxGridFooterComponent, IgxGridRow, IgxGroupByRow, IgxSummaryRow } from '../public_api';
+import { IGridRowEventArgs, IgxColumnGroupComponent, IgxGridEmptyTemplateDirective, IgxGridFooterComponent, IgxGridLoadingTemplateDirective, IgxGridRow, IgxGroupByRow, IgxSummaryRow } from '../public_api';
 import { getComponentSize } from '../../core/utils';
 import { setElementSize, ymd } from '../../test-utils/helper-utils.spec';
 
@@ -580,16 +580,28 @@ describe('IgxGrid Component Tests #grid', () => {
             expect(gridBody.nativeElement.textContent).not.toEqual(grid.emptyFilteredGridMessage);
         }));
 
-        it('should allow applying custom loading indicator', fakeAsync(() => {
+        it('should allow applying custom empty and loading indicator', fakeAsync(() => {
             const fixture = TestBed.createComponent(IgxGridRemoteOnDemandComponent);
-            fixture.componentInstance.instance.loadingGridTemplate = fixture.componentInstance.customTemplate;
+            fixture.componentInstance.customLoading = true;
             fixture.detectChanges();
             tick(16);
 
             const grid = fixture.componentInstance.instance;
             const gridBody = fixture.debugElement.query(By.css(TBODY_CLASS));
             const gridHead = fixture.debugElement.query(By.css(THEAD_CLASS));
 
+            grid.isLoading = false;
+            tick();
+            fixture.detectChanges();
+            expect(gridBody.nativeElement.textContent).toEqual('No Data 😢');
+            grid.isLoading = true;
+            tick();
+            fixture.detectChanges();
+            expect(gridBody.nativeElement.textContent).toEqual('Loading 🔃');
+
+            grid.loadingGridTemplate = fixture.componentInstance.customTemplate;
+            grid.markForCheck();
+            fixture.detectChanges();
             expect(gridBody.nativeElement.textContent).toEqual('Loading...');
             expect(gridBody.nativeElement.textContent).not.toEqual(grid.emptyFilteredGridMessage);
 
@@ -3612,21 +3624,26 @@ export class IgxGridRemoteVirtualizationComponent implements OnInit, AfterViewIn
 @Component({
     template: `
         <igx-grid [data]="data | async" (dataPreLoad)="dataLoading($event)" [isLoading]="true" [autoGenerate]="true" [height]="'600px'">
+            <span *igxGridEmpty>No Data 😢</span>
+            @if (customLoading) {
+                <ng-template igxGridLoading>Loading 🔃</ng-template>
+            }
         </igx-grid>
 
         <ng-template #customTemplate>
             <span>Loading...</span>
         </ng-template>
     `,
     providers: [LocalService],
-    imports: [IgxGridComponent, AsyncPipe]
+    imports: [IgxGridComponent, IgxGridEmptyTemplateDirective, IgxGridLoadingTemplateDirective, AsyncPipe]
 })
 export class IgxGridRemoteOnDemandComponent {
     @ViewChild(IgxGridComponent, { read: IgxGridComponent, static: true })
     public instance: IgxGridComponent;
     @ViewChild('customTemplate', { read: TemplateRef, static: true })
     public customTemplate: TemplateRef<any>;
     public data;
+    public customLoading = false;
     constructor(private localService: LocalService, public cdr: ChangeDetectorRef) { }
 
     public bind() {

projects/igniteui-angular/src/lib/grids/grid/public_api.ts

@@ -5,7 +5,7 @@ import { IgxGridDetailTemplateDirective, IgxGroupByRowTemplateDirective } from '
 /* Imports that cannot be resolved from IGX_GRID_COMMON_DIRECTIVES spread
     NOTE: Do not remove! Issue: https://github.com/IgniteUI/igniteui-angular/issues/13310
 */
- 
+
 import {
     IgxRowDirective,
     IgxGridFooterComponent,
@@ -17,6 +17,8 @@ import {
     IgxSortAscendingHeaderIconDirective,
     IgxSortDescendingHeaderIconDirective,
     IgxSortHeaderIconDirective,
+    IgxGridEmptyTemplateDirective,
+    IgxGridLoadingTemplateDirective,
     IgxExcelStyleHeaderIconDirective,
     IgxDragIndicatorIconDirective,
     IgxRowDragGhostDirective,
@@ -103,6 +105,8 @@ export const IGX_GRID_DIRECTIVES = [
     IgxSortAscendingHeaderIconDirective,
     IgxSortDescendingHeaderIconDirective,
     IgxSortHeaderIconDirective,
+    IgxGridEmptyTemplateDirective,
+    IgxGridLoadingTemplateDirective,
     IgxDragIndicatorIconDirective,
     IgxRowDragGhostDirective,
     IgxGridStateDirective,

projects/igniteui-angular/src/lib/grids/public_api.ts

@@ -33,7 +33,7 @@ import {
     IgxExcelStyleLoadingValuesTemplateDirective
 } from './filtering/excel-style/public_api';
 import { IgxGridFooterComponent } from './grid-footer/grid-footer.component';
-import { IgxExcelStyleHeaderIconDirective, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxRowExpandedIndicatorDirective, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective } from './grid.directives';
+import { IgxExcelStyleHeaderIconDirective, IgxHeaderCollapsedIndicatorDirective, IgxHeaderExpandedIndicatorDirective, IgxRowCollapsedIndicatorDirective, IgxRowExpandedIndicatorDirective, IgxSortAscendingHeaderIconDirective, IgxSortDescendingHeaderIconDirective, IgxSortHeaderIconDirective, IgxGridEmptyTemplateDirective, IgxGridLoadingTemplateDirective } from './grid.directives';
 import {
     IgxGridHeaderComponent,
     IgxGridHeaderGroupComponent,
@@ -126,6 +126,8 @@ export const IGX_GRID_COMMON_DIRECTIVES = [
     IgxSortAscendingHeaderIconDirective,
     IgxSortDescendingHeaderIconDirective,
     IgxSortHeaderIconDirective,
+    IgxGridEmptyTemplateDirective,
+    IgxGridLoadingTemplateDirective,
     IgxDragIndicatorIconDirective,
     IgxRowDragGhostDirective,
     IgxGridStateDirective,

src/app/grid-remote-paging/grid-remote-paging.sample.html

@@ -12,6 +12,7 @@
                 [(perPage)]="perPage" (pageChange)="paginate($event)" (perPageChange)="perPageChange($event)">
             </igx-paginator>
         }
+        <span *igxGridLoading> Loading 🔃 </span>
     </igx-grid>
 
     <igx-card style="width: 360px; margin-top: 12px">

src/app/grid-remote-paging/grid-remote-paging.sample.ts

@@ -4,13 +4,13 @@ import { FormsModule } from '@angular/forms';
 
 import { Observable } from 'rxjs';
 import { RemoteService } from '../shared/remote.service';
-import { GridPagingMode, IgxButtonDirective, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxColumnComponent, IgxGridComponent, IgxPaginatorComponent, IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular';
+import { GridPagingMode, IgxButtonDirective, IgxCardComponent, IgxCardContentDirective, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IGX_GRID_DIRECTIVES, IgxGridComponent, IgxPaginatorComponent, IgxSelectComponent, IgxSelectItemComponent } from 'igniteui-angular';
 
 @Component({
     selector: 'app-grid-remote-paging-sample',
     templateUrl: 'grid-remote-paging.sample.html',
     providers: [RemoteService],
-    imports: [IgxGridComponent, IgxColumnComponent, IgxPaginatorComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxButtonDirective, IgxSelectComponent, FormsModule, IgxSelectItemComponent, AsyncPipe]
+    imports: [IGX_GRID_DIRECTIVES, IgxPaginatorComponent, IgxCardComponent, IgxCardHeaderComponent, IgxCardHeaderTitleDirective, IgxCardContentDirective, IgxButtonDirective, IgxSelectComponent, FormsModule, IgxSelectItemComponent, AsyncPipe]
 })
 export class GridRemotePagingSampleComponent implements OnInit, AfterViewInit, OnDestroy {
     @ViewChild('grid1', { static: true }) public grid1: IgxGridComponent;

src/app/grid-row-draggable/grid-row-draggable.sample.html

@@ -21,18 +21,17 @@
         </ng-template>
     </igx-grid>
     <igx-grid #grid2 igxDrop [data]="newData" [primaryKey]="'ProductID'"
-         [width]="'500px'" [height]="'600px'" [emptyGridTemplate]="dragHereTemplate"
-        (enter)="onEnterAllowed($event)" (leave)="onLeaveAllowed($event)" (dropped)="onDropAllowed($event)">
+         [width]="'500px'" [height]="'600px'"
+         (enter)="onEnterAllowed($event)" (leave)="onLeaveAllowed($event)" (dropped)="onDropAllowed($event)">
         <igx-column [field]="'ProductName'" [width]="'200px'"></igx-column>
         <igx-column [field]="'UnitsInStock'"></igx-column>
         <igx-column [field]="'ProductID'" [editable]="true"></igx-column>
         <ng-template igxDragIndicatorIcon>
             <igx-icon>info</igx-icon>
         </ng-template>
+        <ng-template igxGridEmpty>Drag Here</ng-template>
     </igx-grid>
 </div>
 <div class="dropable-area">
     <div igxDrop (enter)="onEnterBlocked($event)" (leave)="onLeaveBlocked($event)" (dropped)="onDropBlocked($event)">Drag here</div>
 </div>
-<ng-template #dragHereTemplate>Drag Here</ng-template>
-

src/app/grid-row-draggable/grid-row-draggable.sample.ts

@@ -5,7 +5,7 @@ import { FormsModule } from '@angular/forms';
 import { Observable } from 'rxjs';
 
 import { RemoteService } from '../shared/remote.service';
-import { IgxButtonGroupComponent, IgxCellTemplateDirective, IgxColumnComponent, IgxGridComponent, IgxIconComponent, IgxSwitchComponent, IgxRowDragGhostDirective, IgxDragIndicatorIconDirective, IgxDropDirective } from 'igniteui-angular';
+import { IgxButtonGroupComponent, IgxCellTemplateDirective, IgxColumnComponent, IgxGridComponent, IgxIconComponent, IgxSwitchComponent, IgxRowDragGhostDirective, IgxDragIndicatorIconDirective, IgxDropDirective, IgxGridEmptyTemplateDirective } from 'igniteui-angular';
 import { IgxRowDragDirective } from 'projects/igniteui-angular/src/lib/grids/row-drag.directive';
 
 
@@ -20,7 +20,7 @@ enum DragIcon {
     templateUrl: 'grid-row-draggable.sample.html',
     styleUrls: ['grid-row-draggable.sample.scss'],
     providers: [RemoteService],
-    imports: [IgxButtonGroupComponent, IgxSwitchComponent, FormsModule, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent, IgxRowDragDirective, IgxRowDragGhostDirective, IgxDropDirective, IgxDragIndicatorIconDirective, AsyncPipe]
+    imports: [IgxButtonGroupComponent, IgxSwitchComponent, FormsModule, IgxGridComponent, IgxColumnComponent, IgxCellTemplateDirective, IgxIconComponent, IgxRowDragDirective, IgxRowDragGhostDirective, IgxDropDirective, IgxDragIndicatorIconDirective, IgxGridEmptyTemplateDirective, AsyncPipe]
 })
 export class GridRowDraggableComponent implements AfterViewInit {
     @HostBinding('style.--ig-size')