feat(angular-table): Refactor Flex render implementation - Zoneless, …

…Better type safety, allows reactive values into cell content, re-render when cell context changes, allow to pass signal inputs into custom components (#5856) * feat: flex render granular updates * updates * cleanup * cleanup * cleanup * fix test * angular add explicit version of typescript * Fix typescript versions * add some testing for flex render in table * fix test infra * refactor flex render * update lock * fix tests, cleanup code * fix tests, cleanup code * flex render signal content support * flex render signal content support * improve view flags, handle state update in zoneless * improve view flags, handle state update in zoneless * fix * ci: apply automated fixes * clean docs test fix doc add flexRenderComponent util * test cases * fix: enable computed rowModels * fix test for rowModel * assures that `updateProps` update inputs only for Component reference type * Merge pull request #1 from riccardoperra/feat/angular-flex-render-support-output-binding add support for angular outputs in flex-render-component --------- Co-authored-by: Lachlan Collins <[email protected]> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com>
TanStack · Jan 20, 2025 · 05ecd5e · 05ecd5e
1 parent 5de0729
commit 05ecd5e
Show file tree

Hide file tree

Showing 20 changed files with 1,618 additions and 468 deletions.
diff --git a/docs/framework/angular/angular-table.md b/docs/framework/angular/angular-table.md
@@ -40,41 +40,181 @@ FlexRender supports any type of content supported by Angular:
 - A [TemplateRef](https://angular.dev/api/core/TemplateRef)
 - A [Component](https://angular.dev/api/core/Component) wrapped into `FlexRenderComponent`
 
-Example:
+You can just use the `cell.renderValue` or `cell.getValue` APIs to render the cells of your table. However,
+these APIs will only spit out the raw cell values (from accessor functions).
+If you are using the `cell: () => any` column definition options, you will want to use the `FlexRenderDirective` from the adapter.
+
+Cell column definition is **reactive** and runs into an **injection context**, then you can inject services or make use of signals to automatically modify the rendered content.
+
+#### Example
 
 ```ts
 @Component({
   imports: [FlexRenderDirective],
   //...
 })
+class YourComponent {}
 ```
 
 ```angular-html
 
 <tbody>
 @for (row of table.getRowModel().rows; track row.id) {
-<tr>
-  @for (cell of row.getVisibleCells(); track cell.id) {
-<td>
-  <ng-container
-    *flexRender="
+  <tr>
+    @for (cell of row.getVisibleCells(); track cell.id) {
+      <td>
+        <ng-container
+          *flexRender="
               cell.column.columnDef.cell;
               props: cell.getContext();
               let cell
             "
-  >
-    <!-- if you want to render a simple string -->
-    {{ cell }}
-    <!-- if you want to render an html string -->
-    <div [innerHTML]="cell"></div>
-  </ng-container>
-</td>
-}
-</tr>
+        >
+          <!-- if you want to render a simple string -->
+          {{ cell }}
+          <!-- if you want to render an html string -->
+          <div [innerHTML]="cell"></div>
+        </ng-container>
+      </td>
+    }
+  </tr>
 }
 </tbody>
 ```
 
+#### Rendering a Component
+
+To render a Component into a specific column header/cell/footer, you can pass a `FlexRenderComponent` instantiated with
+your `ComponentType, with the ability to include parameters such as inputs, outputs and a custom injector.
+
+```ts
+import {flexRenderComponent} from "./flex-render-component";
+import {ChangeDetectionStrategy, input, output} from "@angular/core";
+
+@Component({
+  template: `
+    ...
+  `,
+  standalone: true,
+  changeDetectionStrategy: ChangeDetectionStrategy.OnPush,
+  host: {
+    '(click)': 'clickEvent.emit($event)'
+  }
+})
+class CustomCell {
+  readonly content = input.required<string>();
+  readonly cellType = input<MyType>();
+
+  // An output that will emit for every cell click
+  readonly clickEvent = output<Event>();
+}
+
+class AppComponent {
+  columns: ColumnDef<unknown>[] = [
+    {
+      id: 'custom-cell',
+      header: () => {
+        const translateService = inject(TranslateService);
+        return translateService.translate('...');
+      },
+      cell: (context) => {
+        return flexRenderComponent(
+          MyCustomComponent,
+          {
+            injector, // Optional injector
+            inputs: {
+              // Mandatory input since we are using `input.required()
+              content: context.row.original.rowProperty,
+              // cellType? - Optional input
+            },
+            outputs: {
+              clickEvent: () => {
+                // Do something
+              }
+            }
+          }
+        )
+      },
+    },
+  ]
+}
+```
+
+Underneath, this utilizes
+the [ViewContainerRef#createComponent](https://angular.dev/api/core/ViewContainerRef#createComponent) api.
+Therefore, you should declare your custom inputs using the @Input decorator or input/model signals.
+
+You can still access the table cell context through the `injectFlexRenderContext` function, which returns the context
+value based on the props you pass to the `FlexRenderDirective`.
+
+```ts
+
+@Component({
+  // ...
+})
+class CustomCellComponent {
+  // context of a cell component
+  readonly context = injectFlexRenderContext<CellContext<TData, TValue>>();
+  // context of a header/footer component
+  readonly context = injectFlexRenderContext<HeaderContext<TData, TValue>>();
+}
+```
+
+Alternatively, you can render a component into a specific column header, cell, or footer by passing the component type
+to the corresponding column definitions. These column definitions will be provided to the `flexRender` directive along
+with the `context`.
+
+```ts
+class AppComponent {
+  columns: ColumnDef<Person>[] = [
+    {
+      id: 'select',
+      header: () => TableHeadSelectionComponent<Person>,
+      cell: () => TableRowSelectionComponent<Person>,
+    },
+  ]
+}
+```
+
+```angular-html
+<ng-container
+  *flexRender="
+    header.column.columnDef.header;
+    props: header.getContext();
+    let headerCell
+  "
+>
+  {{ headerCell }}
+</ng-container>
+```
+
+Properties of `context` provided in the `flexRender` directive will be accessible to your component.
+You can explicitly define the context properties required by your component.
+In this example, the context provided to flexRender is of type HeaderContext.
+Input signal `table`, which is a property of HeaderContext together with `column` and `header` properties,
+is then defined to be used in the component. If any of the context properties are
+needed in your component, feel free to use them. Please take note that only input signal is supported,
+when defining access to context properties, using this approach.
+
+```angular-ts
+@Component({
+  template: `
+    <input
+      type="checkbox"
+      [checked]="table().getIsAllRowsSelected()"
+      [indeterminate]="table().getIsSomeRowsSelected()"
+      (change)="table().toggleAllRowsSelected()"
+    />
+  `,
+  // ...
+})
+export class TableHeadSelectionComponent<T> {
+  //column = input.required<Column<T, unknown>>()
+  //header = input.required<Header<T, unknown>>()
+  table = input.required<Table<T>>()
+}
+```
+
 #### Rendering a TemplateRef
 
 In order to render a TemplateRef into a specific column header/cell/footer, you can pass the TemplateRef into the column
@@ -171,101 +311,3 @@ class AppComponent {
   ]
 }
 ```
-
-#### Rendering a Component
-
-To render a Component into a specific column header/cell/footer, you can pass a `FlexRenderComponent instantiated with
-your `ComponentType, with the ability to include optional parameters such as inputs and an injector.
-
-```ts
-import {FlexRenderComponent} from "@tanstack/angular-table";
-
-class AppComponent {
-  columns: ColumnDef<unknown>[] = [
-    {
-      id: 'customCell',
-      header: () => new FlexRenderComponent(
-        CustomCellComponent,
-        {}, // optional inputs
-        injector // optional injector
-      ),
-      cell: () => this.customCell(),
-    },
-  ]
-}
-```
-
-Underneath, this utilizes
-the [ViewContainerRef#createComponent](https://angular.dev/api/core/ViewContainerRef#createComponent) api.
-Therefore, you should declare your custom inputs using the @Input decorator or input/model signals.
-
-You can still access the table cell context through the `injectFlexRenderContext` function, which returns the context
-value based on the props you pass to the `FlexRenderDirective`.
-
-```ts
-@Component({
-  // ...
-})
-class CustomCellComponent {
-  // context of a cell component
-  readonly context = injectFlexRenderContext<CellContext<TData, TValue>>();
-  // context of a header/footer component
-  readonly context = injectFlexRenderContext<HeaderContext<TData, TValue>>();
-}
-```
-
-Alternatively, you can render a component into a specific column header, cell, or footer by passing the component type 
-to the corresponding column definitions. These column definitions will be provided to the `flexRender` directive along with the `context`.
-
-```ts
-import {FlexRenderComponent} from "@tanstack/angular-table";
-
-class AppComponent {
-  columns: ColumnDef<Person>[] = [
-    {
-      id: 'select',
-      header: () => TableHeadSelectionComponent<Person>,
-      cell: () => TableRowSelectionComponent<Person>,
-    },
-  ]
-}
-```
-
-```angular2html
-<ng-container
-  *flexRender="
-    header.column.columnDef.header;
-    props: header.getContext();
-    let headerCell
-  "
->
-  {{ headerCell }}
-</ng-container>
-```
-
-Properties of `context` provided in the `flexRender` directive will be accessible to your component. 
-You can explicitly define the context properties required by your component. 
-In this example, the context provided to flexRender is of type HeaderContext. 
-Input signal `table`, which is a property of HeaderContext together with `column` and `header` properties,
-is then defined to be used in the component. If any of the context properties are 
-needed in your component, feel free to use them. Please take note that only input signal is supported, 
-when defining access to context properties, using this approach.
-
-```angular-ts
-@Component({
-  template: `
-    <input
-      type="checkbox"
-      [checked]="table().getIsAllRowsSelected()"
-      [indeterminate]="table().getIsSomeRowsSelected()"
-      (change)="table().toggleAllRowsSelected()"
-    />
-  `,
-  // ...
-})
-export class TableHeadSelectionComponent<T> {
-  //column = input.required<Column<T, unknown>>()
-  //header = input.required<Header<T, unknown>>()
-  table = input.required<Table<T>>()
-}
-```
diff --git a/examples/angular/row-selection/src/app/app.component.ts b/examples/angular/row-selection/src/app/app.component.ts
@@ -9,7 +9,7 @@ import {
 import {
   ColumnDef,
   createAngularTable,
-  FlexRenderComponent,
+  flexRenderComponent,
   FlexRenderDirective,
   getCoreRowModel,
   getFilteredRowModel,
@@ -43,10 +43,10 @@ export class AppComponent {
     {
       id: 'select',
       header: () => {
-        return new FlexRenderComponent(TableHeadSelectionComponent)
+        return flexRenderComponent(TableHeadSelectionComponent)
       },
       cell: () => {
-        return new FlexRenderComponent(TableRowSelectionComponent)
+        return flexRenderComponent(TableRowSelectionComponent)
       },
     },
     {

diff --git a/packages/angular-table/package.json b/packages/angular-table/package.json
@@ -43,7 +43,7 @@
   ],
   "scripts": {
     "clean": "rimraf ./build",
-    "test:types": "tsc --noEmit",
+    "test:types": "tsc --noEmit && vitest --typecheck",
     "test:lib": "vitest",
     "test:lib:dev": "vitest --watch",
     "build": "ng-packagr -p ng-package.json -c tsconfig.build.json && rimraf ./build/lib/package.json"
@@ -53,11 +53,14 @@
     "tslib": "^2.6.2"
   },
   "devDependencies": {
-    "@analogjs/vite-plugin-angular": "^1.3.1",
+    "@analogjs/vite-plugin-angular": "^1.11.0",
+    "@analogjs/vitest-angular": "^1.11.0",
     "@angular/core": "^17.3.9",
     "@angular/platform-browser": "^17.3.9",
     "@angular/platform-browser-dynamic": "^17.3.9",
-    "ng-packagr": "^17.3.0"
+    "ng-packagr": "^17.3.0",
+    "typescript": "5.4.5",
+    "vitest": "^1.6.0"
   },
   "peerDependencies": {
     "@angular/core": ">=17"