feat(angular-table) refactor flex-renderer to use signal

examples/angular/row-selection/src/app/app.component.ts

@@ -9,7 +9,6 @@ import {
 import {
   ColumnDef,
   createAngularTable,
-  FlexRenderComponent,
   FlexRenderDirective,
   getCoreRowModel,
   getFilteredRowModel,
@@ -18,7 +17,6 @@ import {
 } from '@tanstack/angular-table'
 import { FilterComponent } from './filter'
 import { makeData, type Person } from './makeData'
-import { FormsModule } from '@angular/forms'
 import {
   TableHeadSelectionComponent,
   TableRowSelectionComponent,
@@ -27,7 +25,7 @@ import {
 @Component({
   selector: 'app-root',
   standalone: true,
-  imports: [FilterComponent, FlexRenderDirective, FormsModule],
+  imports: [FilterComponent, FlexRenderDirective],
   templateUrl: './app.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -42,12 +40,8 @@ export class AppComponent {
   readonly columns: ColumnDef<Person>[] = [
     {
       id: 'select',
-      header: () => {
-        return new FlexRenderComponent(TableHeadSelectionComponent)
-      },
-      cell: () => {
-        return new FlexRenderComponent(TableRowSelectionComponent)
-      },
+      header: () => TableHeadSelectionComponent<Person>,
+      cell: () => TableRowSelectionComponent<Person>,
     },
     {
       header: 'Name',

examples/angular/row-selection/src/app/selection-column.component.ts

@@ -1,17 +1,13 @@
-import {
-  type CellContext,
-  type HeaderContext,
-  injectFlexRenderContext,
-} from '@tanstack/angular-table'
-import { ChangeDetectionStrategy, Component } from '@angular/core'
+import { ChangeDetectionStrategy, Component, input } from '@angular/core'
+import { Row, Table } from '@tanstack/angular-table'
 
 @Component({
   template: `
     <input
       type="checkbox"
-      [checked]="context.table.getIsAllRowsSelected()"
-      [indeterminate]="context.table.getIsSomeRowsSelected()"
-      (change)="context.table.toggleAllRowsSelected()"
+      [checked]="table().getIsAllRowsSelected()"
+      [indeterminate]="table().getIsSomeRowsSelected()"
+      (change)="table().toggleAllRowsSelected()"
     />
   `,
   host: {
@@ -21,15 +17,23 @@ import { ChangeDetectionStrategy, Component } from '@angular/core'
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TableHeadSelectionComponent<T> {
-  context = injectFlexRenderContext<HeaderContext<T, unknown>>()
+  // Your component should also reflect the fields you use as props in flexRenderer directive.
+  // Define the fields as input you want to use in your component
+  // ie. In this case, you are passing HeaderContext object as props in flexRenderer directive.
+  // You can define and use the table field, which is defined in HeaderContext.
+  // Please take note that only signal based input is supported.
+
+  //column = input.required<Column<T, unknown>>();
+  //header = input.required<Header<T, unknown>>();
+  table = input.required<Table<T>>()
 }
 
 @Component({
   template: `
     <input
       type="checkbox"
-      [checked]="context.row.getIsSelected()"
-      (change)="context.row.getToggleSelectedHandler()($event)"
+      [checked]="row().getIsSelected()"
+      (change)="row().getToggleSelectedHandler()($event)"
     />
   `,
   host: {
@@ -39,5 +43,5 @@ export class TableHeadSelectionComponent<T> {
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TableRowSelectionComponent<T> {
-  context = injectFlexRenderContext<CellContext<T, unknown>>()
+  row = input.required<Row<T>>()
 }

packages/angular-table/src/flex-render.ts

@@ -1,160 +1,100 @@
 import {
-  ChangeDetectorRef,
   ComponentRef,
   Directive,
-  type DoCheck,
   EmbeddedViewRef,
-  inject,
-  InjectionToken,
   Injector,
-  Input,
-  type OnInit,
   TemplateRef,
-  type Type,
+  Type,
   ViewContainerRef,
+  inject,
+  input,
 } from '@angular/core'
 
 type FlexRenderContent<TProps extends NonNullable<unknown>> =
   | string
   | number
-  | FlexRenderComponent<TProps>
+  | Type<TProps>
   | TemplateRef<{ $implicit: TProps }>
   | null
 
 @Directive({
   selector: '[flexRender]',
   standalone: true,
 })
-export class FlexRenderDirective<TProps extends NonNullable<unknown>>
-  implements OnInit, DoCheck
-{
-  @Input({ required: true, alias: 'flexRender' })
-  content:
-    | number
-    | string
-    | ((props: TProps) => FlexRenderContent<TProps>)
-    | undefined = undefined
-
-  @Input({ required: true, alias: 'flexRenderProps' })
-  props: TProps = {} as TProps
+export class FlexRenderDirective<TProps extends NonNullable<unknown>> {
+  // set the type to unknown as input signal is not able to recognize the types correctly
+  // which causes build error
+  content = input.required<unknown>({ alias: 'flexRender' })
 
-  @Input({ required: false, alias: 'flexRenderInjector' })
-  injector: Injector = inject(Injector)
+  props = input<TProps>({} as TProps, { alias: 'flexRenderProps' })
 
-  constructor(
-    private viewContainerRef: ViewContainerRef,
-    private templateRef: TemplateRef<any>
-  ) {}
-
-  ref?: ComponentRef<unknown> | EmbeddedViewRef<unknown> | null = null
+  private readonly injector = inject(Injector)
+  private readonly viewContainerRef = inject(ViewContainerRef)
+  private readonly templateRef = inject(TemplateRef<any>)
 
   ngOnInit(): void {
-    this.ref = this.render()
-  }
-
-  ngDoCheck() {
-    if (this.ref instanceof ComponentRef) {
-      this.ref.injector.get(ChangeDetectorRef).markForCheck()
-    } else if (this.ref instanceof EmbeddedViewRef) {
-      this.ref.markForCheck()
-    }
+    this.render()
   }
 
   render() {
     this.viewContainerRef.clear()
-    const { content, props } = this
-    if (!this.content) {
+    const content = this.content()
+    if (!content) {
       return null
     }
 
-    if (typeof content === 'string' || typeof content === 'number') {
-      return this.renderStringContent()
-    }
     if (typeof content === 'function') {
-      return this.renderContent(content(props))
+      return this.renderContent(content(this.props()))
     }
-    return null
+    return this.renderStringContent(content as FlexRenderContent<TProps>)
   }
 
   private renderContent(content: FlexRenderContent<TProps>) {
-    if (typeof content === 'string' || typeof content === 'number') {
-      return this.renderStringContent()
-    }
     if (content instanceof TemplateRef) {
       return this.viewContainerRef.createEmbeddedView(
         content,
         this.getTemplateRefContext()
       )
-    } else if (content instanceof FlexRenderComponent) {
+    } else if (content instanceof Type) {
       return this.renderComponent(content)
+    } else if (content) {
+      return this.renderStringContent(content)
     } else {
       return null
     }
   }
 
-  private renderStringContent(): EmbeddedViewRef<unknown> {
-    const context = () => {
-      return typeof this.content === 'string' ||
-        typeof this.content === 'number'
-        ? this.content
-        : this.content?.(this.props)
-    }
+  private renderStringContent(
+    content: FlexRenderContent<TProps>
+  ): EmbeddedViewRef<unknown> {
+    const context = () => content
     return this.viewContainerRef.createEmbeddedView(this.templateRef, {
       get $implicit() {
         return context()
       },
     })
   }
 
-  private renderComponent(
-    flexRenderComponent: FlexRenderComponent<TProps>
-  ): ComponentRef<unknown> {
-    const { component, inputs, injector } = flexRenderComponent
-
-    const getContext = () => this.props
-
-    const proxy = new Proxy(this.props, {
-      get: (_, key) => getContext()?.[key as keyof typeof _],
-    })
-
-    const componentInjector = Injector.create({
-      parent: injector ?? this.injector,
-      providers: [{ provide: FlexRenderComponentProps, useValue: proxy }],
-    })
-
+  private renderComponent(component: Type<unknown>): ComponentRef<unknown> {
     const componentRef = this.viewContainerRef.createComponent(component, {
-      injector: componentInjector,
+      injector: this.injector,
     })
-    for (const prop in inputs) {
+    const props = this.props()
+    for (const prop in props) {
+      // Only signal based input can be added here
       if (componentRef.instance?.hasOwnProperty(prop)) {
-        componentRef.setInput(prop, inputs[prop])
+        componentRef.setInput(prop, props[prop])
       }
     }
     return componentRef
   }
 
   private getTemplateRefContext() {
-    const getContext = () => this.props
+    const getContext = () => this.props()
     return {
       get $implicit() {
         return getContext()
       },
     }
   }
 }
-
-export class FlexRenderComponent<T extends NonNullable<unknown>> {
-  constructor(
-    readonly component: Type<unknown>,
-    readonly inputs: T = {} as T,
-    readonly injector?: Injector
-  ) {}
-}
-
-const FlexRenderComponentProps = new InjectionToken<NonNullable<unknown>>(
-  '[@tanstack/angular-table] Flex render component context props'
-)
-
-export function injectFlexRenderContext<T extends NonNullable<unknown>>(): T {
-  return inject<T>(FlexRenderComponentProps)
-}

packages/angular-table/src/index.ts

@@ -12,11 +12,7 @@ import { proxifyTable } from './proxy'
 
 export * from '@tanstack/table-core'
 
-export {
-  FlexRenderComponent,
-  FlexRenderDirective,
-  injectFlexRenderContext,
-} from './flex-render'
+export { FlexRenderDirective } from './flex-render'
 
 export function createAngularTable<TData extends RowData>(
   options: () => TableOptions<TData>