Add template context guards for ES Loading, MDV and GroupBy row (#12093)

* Add template context guards for ES Loading, MDV and GroupBy row

* chore(*): Fix unsued dir parameter warning

Author: mddragnev

projects/igniteui-angular/src/lib/grids/common/grid.interface.ts

@@ -698,3 +698,12 @@ export interface ISizeInfo {
     width: number,
     padding: number
 }
+
+export interface IgxGridMasterDetailContext {
+    $implicit: any;
+    index: number;
+}
+
+export interface IgxGroupByRowTemplateContext {
+    $implicit: IGroupByRecord;
+}

projects/igniteui-angular/src/lib/grids/filtering/excel-style/excel-style-search.component.ts

@@ -31,7 +31,11 @@ import { IgxTreeComponent, ITreeNodeSelectionEvent } from '../../../tree/public_
     selector: '[igxExcelStyleLoading]'
 })
 export class IgxExcelStyleLoadingValuesTemplateDirective {
-    constructor(public template: TemplateRef<any>) { }
+    public static ngTemplateContextGuard(_dir: IgxExcelStyleLoadingValuesTemplateDirective,
+        ctx: unknown): ctx is undefined {
+        return true
+    };
+    constructor(public template: TemplateRef<undefined>) { }
 }
 
 /**
@@ -71,14 +75,14 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
     /**
      * @hidden @internal
      */
-     @ViewChild('addToCurrentFilterCheckbox', { read: IgxCheckboxComponent, static: false })
-     public addToCurrentFilterCheckbox: IgxCheckboxComponent;
+    @ViewChild('addToCurrentFilterCheckbox', { read: IgxCheckboxComponent, static: false })
+    public addToCurrentFilterCheckbox: IgxCheckboxComponent;
 
     /**
      * @hidden @internal
      */
-     @ViewChild('tree', { read: IgxTreeComponent, static: false })
-     public tree: IgxTreeComponent;
+    @ViewChild('tree', { read: IgxTreeComponent, static: false })
+    public tree: IgxTreeComponent;
 
     /**
      * @hidden @internal
@@ -295,7 +299,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
     /**
      * @hidden @internal
      */
-     public onNodeSelectionChange(eventArgs: ITreeNodeSelectionEvent) {
+    public onNodeSelectionChange(eventArgs: ITreeNodeSelectionEvent) {
         eventArgs.added.forEach(node => {
             (node.data as FilterListItem).isSelected = true;
         });
@@ -349,7 +353,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
      */
     public get applyButtonDisabled(): boolean {
         return (this._selectAllItem && !this._selectAllItem.isSelected && !this._selectAllItem.indeterminate) ||
-                (this.displayedListData && this.displayedListData.length === 0);
+            (this.displayedListData && this.displayedListData.length === 0);
     }
 
     /**
@@ -555,7 +559,7 @@ export class IgxExcelStyleSearchComponent implements AfterViewInit, OnDestroy {
     /**
      * @hidden @internal
      */
-     public isTreeEmpty() {
+    public isTreeEmpty() {
         return this.esf.isHierarchical && this.displayedListData.length === 0;
     }
 

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

@@ -22,7 +22,7 @@ import { IgxGridSelectionService } from '../selection/selection.service';
 import { IgxForOfSyncService, IgxForOfScrollSyncService } from '../../directives/for-of/for_of.sync.service';
 import { IgxGridMRLNavigationService } from '../grid-mrl-navigation.service';
 import { FilterMode, GridInstanceType } from '../common/enums';
-import { CellType, GridType, IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, RowType } from '../common/grid.interface';
+import { CellType, GridType, IgxGridMasterDetailContext, IgxGroupByRowTemplateContext, IGX_GRID_BASE, IGX_GRID_SERVICE_BASE, RowType } from '../common/grid.interface';
 import { IgxGroupByRowSelectorDirective } from '../selection/row-selectors';
 import { IgxGridCRUDService } from '../common/crud.service';
 import { IgxGridRow, IgxGroupByRow, IgxSummaryRow } from '../grid-public-row';
@@ -155,7 +155,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
      * @hidden @internal
      */
     @ContentChildren(IgxGridDetailTemplateDirective, { read: TemplateRef })
-    public detailTemplate: QueryList<TemplateRef<any>> = new QueryList();
+    public detailTemplate: QueryList<TemplateRef<IgxGridMasterDetailContext>> = new QueryList();
 
     /**
      * @hidden @internal
@@ -251,7 +251,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
     /**
      * @hidden
      */
-    protected _groupRowTemplate: TemplateRef<any>;
+    protected _groupRowTemplate: TemplateRef<IgxGroupByRowTemplateContext>;
     /**
      * @hidden
      */
@@ -544,7 +544,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
     /**
      * @hidden @internal
      */
-    public getDetailsContext(rowData, index) {
+    public getDetailsContext(rowData, index): IgxGridDetailTemplateDirective {
         return {
             $implicit: rowData,
             index
@@ -603,11 +603,11 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
      * this.grid.groupRowTemplate = myRowTemplate;
      * ```
      */
-    public get groupRowTemplate(): TemplateRef<any> {
+    public get groupRowTemplate(): TemplateRef<IgxGroupByRowTemplateContext> {
         return this._groupRowTemplate;
     }
 
-    public set groupRowTemplate(template: TemplateRef<any>) {
+    public set groupRowTemplate(template: TemplateRef<IgxGroupByRowTemplateContext>) {
         this._groupRowTemplate = template;
         this.notifyChanges();
     }

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

@@ -2,7 +2,7 @@ import { Directive, ElementRef, Renderer2, NgZone, HostBinding, TemplateRef } fr
 import { IgxDropDirective } from '../../directives/drag-drop/drag-drop.directive';
 import { IgxColumnMovingDragDirective } from '../moving/moving.drag.directive';
 import { IgxGroupByAreaDirective } from '../grouping/group-by-area.directive';
-import { ColumnType } from '../common/grid.interface';
+import { ColumnType, IgxGridMasterDetailContext, IgxGroupByRowTemplateContext } from '../common/grid.interface';
 
 /**
  * @hidden
@@ -11,8 +11,12 @@ import { ColumnType } from '../common/grid.interface';
     selector: '[igxGroupByRow]'
 })
 export class IgxGroupByRowTemplateDirective {
+    public static ngTemplateContextGuard(_dir: IgxGroupByRowTemplateDirective,
+        ctx: unknown): ctx is IgxGroupByRowTemplateContext {
+        return true
+    };
 
-    constructor(public template: TemplateRef<any>) { }
+    constructor(public template: TemplateRef<IgxGroupByRowTemplateContext>) { }
 
 }
 
@@ -23,6 +27,10 @@ export class IgxGroupByRowTemplateDirective {
     selector: '[igxGridDetail]'
 })
 export class IgxGridDetailTemplateDirective {
+    public static ngTemplateContextGuard(_dir: IgxGridDetailTemplateDirective,
+        ctx: unknown): ctx is IgxGridMasterDetailContext {
+        return true
+    };
 }
 
 /**
@@ -74,7 +82,7 @@ export class IgxExcelStyleHeaderIconDirective {
 /**
  * @hidden
  */
- @Directive({
+@Directive({
     selector: '[igxSortHeaderIcon]'
 })
 export class IgxSortHeaderIconDirective {