fix: type cell context

siemens · Sep 27, 2024 · 42dcd64 · 42dcd64
1 parent 0446116
commit 42dcd64
Show file tree

Hide file tree

Showing 8 changed files with 22 additions and 17 deletions.
diff --git a/projects/ngx-datatable/src/lib/components/columns/column-cell.directive.ts b/projects/ngx-datatable/src/lib/components/columns/column-cell.directive.ts
@@ -1,6 +1,11 @@
 import { Directive, TemplateRef } from '@angular/core';
+import { CellContext } from '../../types/public.types';
 
 @Directive({ selector: '[ngx-datatable-cell-template]' })
 export class DataTableColumnCellDirective {
   constructor(public template: TemplateRef<any>) {}
+
+  static ngTemplateContextGuard(dir: DataTableColumnCellDirective, ctx: any): ctx is CellContext {
+    return true;
+  }
 }
diff --git a/projects/ngx-datatable/src/lib/components/columns/column.directive.spec.ts b/projects/ngx-datatable/src/lib/components/columns/column.directive.spec.ts
@@ -48,7 +48,7 @@ describe('DataTableColumnDirective', () => {
   }));
 
   describe('fixture', () => {
-    let directive: DataTableColumnDirective;
+    let directive: DataTableColumnDirective<unknown>;
 
     beforeEach(() => {
       directive = fixture.debugElement
@@ -66,7 +66,7 @@ describe('DataTableColumnDirective', () => {
   });
 
   describe('directive #1', () => {
-    let directive: DataTableColumnDirective;
+    let directive: DataTableColumnDirective<unknown>;
 
     beforeEach(() => {
       directive = fixture.debugElement.query(By.css('#t1')).injector.get(DataTableColumnDirective);
@@ -97,7 +97,7 @@ describe('DataTableColumnDirective', () => {
   });
 
   describe('directive #2', () => {
-    let directive: DataTableColumnDirective;
+    let directive: DataTableColumnDirective<unknown>;
 
     beforeEach(() => {
       directive = fixture.debugElement.query(By.css('#t2')).injector.get(DataTableColumnDirective);

diff --git a/projects/ngx-datatable/src/lib/components/columns/column.directive.ts b/projects/ngx-datatable/src/lib/components/columns/column.directive.ts
@@ -12,10 +12,10 @@ import { DataTableColumnCellTreeToggle } from './tree.directive';
 import { ColumnChangesService } from '../../services/column-changes.service';
 import { TableColumnProp } from '../../types/table-column.type';
 import { DataTableColumnGhostCellDirective } from './column-ghost-cell.directive';
-import { HeaderCellContext } from '../../types/public.types';
+import { CellContext, HeaderCellContext } from '../../types/public.types';
 
 @Directive({ selector: 'ngx-datatable-column' })
-export class DataTableColumnDirective implements OnChanges {
+export class DataTableColumnDirective<TRow> implements OnChanges {
   @Input() name: string;
   @Input() prop: TableColumnProp;
   @Input() frozenLeft: any;
@@ -40,12 +40,12 @@ export class DataTableColumnDirective implements OnChanges {
   @Input() summaryTemplate: TemplateRef<any>;
 
   @Input('cellTemplate')
-  _cellTemplateInput: TemplateRef<any>;
+  _cellTemplateInput: TemplateRef<CellContext<TRow>>;
 
   @ContentChild(DataTableColumnCellDirective, { read: TemplateRef, static: true })
-  _cellTemplateQuery: TemplateRef<any>;
+  _cellTemplateQuery: TemplateRef<CellContext<TRow>>;
 
-  get cellTemplate(): TemplateRef<any> {
+  get cellTemplate(): TemplateRef<CellContext<TRow>> {
     return this._cellTemplateInput || this._cellTemplateQuery;
   }
 

diff --git a/projects/ngx-datatable/src/lib/components/datatable.component.ts b/projects/ngx-datatable/src/lib/components/datatable.component.ts
@@ -639,7 +639,7 @@ export class DatatableComponent<TRow = any>
    * if described in your markup.
    */
   @ContentChildren(DataTableColumnDirective)
-  columnTemplates!: QueryList<DataTableColumnDirective>;
+  columnTemplates!: QueryList<DataTableColumnDirective<TRow>>;
 
   /**
    * Row Detail templates gathered from the ContentChild
@@ -816,7 +816,7 @@ export class DatatableComponent<TRow = any>
   /**
    * Translates the templates to the column objects
    */
-  translateColumns(val: QueryList<DataTableColumnDirective>) {
+  translateColumns(val: QueryList<DataTableColumnDirective<TRow>>) {
     if (val) {
       const arr = val.toArray();
       if (arr.length) {

diff --git a/projects/ngx-datatable/src/lib/types/public.types.ts b/projects/ngx-datatable/src/lib/types/public.types.ts
@@ -1,5 +1,5 @@
 import { TableColumn, TableColumnProp } from './table-column.type';
-import { Observable } from 'rxjs';
+import { BehaviorSubject, Observable } from 'rxjs';
 
 export interface SortPropDir {
   dir: SortDirection | 'desc' | 'asc';
@@ -71,7 +71,7 @@ export interface CellContext<TRow = any> {
   isSelected: boolean;
   rowIndex: number;
   treeStatus: TreeStatus;
-  disable$: Observable<boolean>;
+  disable$: BehaviorSubject<boolean>;
   onTreeAction: () => void;
   expanded?: boolean;
 }

diff --git a/projects/ngx-datatable/src/lib/types/table-column.type.ts b/projects/ngx-datatable/src/lib/types/table-column.type.ts
@@ -1,6 +1,6 @@
 import { PipeTransform, TemplateRef } from '@angular/core';
 import { ValueGetter } from '../utils/column-prop-getters';
-import { HeaderCellContext } from './public.types';
+import { CellContext, HeaderCellContext } from './public.types';
 
 /**
  * Column property that indicates how to retrieve this column's
@@ -12,7 +12,7 @@ export type TableColumnProp = string | number;
 /**
  * Column Type
  */
-export interface TableColumn {
+export interface TableColumn<TRow = any> {
   /**
    * Internal unique id
    *
@@ -160,7 +160,7 @@ export interface TableColumn {
    *
    * @memberOf TableColumn
    */
-  cellTemplate?: any;
+  cellTemplate?: TemplateRef<CellContext<TRow>>;
 
   /**
    * Ghost Cell template ref

diff --git a/projects/ngx-datatable/src/lib/utils/column-helper.ts b/projects/ngx-datatable/src/lib/utils/column-helper.ts
@@ -84,7 +84,7 @@ export function isNullOrUndefined<T>(value: T | null | undefined): value is null
 /**
  * Translates templates definitions to objects
  */
-export function translateTemplates(templates: DataTableColumnDirective[]): TableColumn[] {
+export function translateTemplates<TRow>(templates: DataTableColumnDirective<TRow>[]): TableColumn[] {
   const result: TableColumn[] = [];
   for (const temp of templates) {
     const col: TableColumn = {};

diff --git a/src/app/basic/row-detail.component.ts b/src/app/basic/row-detail.component.ts
@@ -69,7 +69,7 @@ import { FullEmployee } from '../data.model';
         </ngx-datatable-column>
         <ngx-datatable-column name="Expanded" [width]="80">
           <ng-template let-row="row" let-expanded="expanded" ngx-datatable-cell-template>
-            <strong>{{ expanded === 1 }}</strong>
+            <strong>{{ expanded }}</strong>
           </ng-template>
         </ngx-datatable-column>
         <ngx-datatable-column name="Name" [width]="200">