Docs
Cloudflare
Railway
CodeRabbit
WorkOS
Clerk
SerpAPI
OpenRouter
Netlify
AG Grid
Electric
Unkey
Sentry
Prisma
Cloudflare
Railway
CodeRabbit
WorkOS
Clerk
SerpAPI
OpenRouter
Netlify
AG Grid
Electric
Unkey
Sentry
Prisma
Table API Reference
Column API Reference
Row API Reference
Cell API Reference
Header API Reference
Features API Reference
Static Functions API Reference
Table API Reference

flexRenderComponent

Function: flexRenderComponent()

ts
function flexRenderComponent<TComponent>(component, options?): FlexRenderComponent<TComponent>;
function flexRenderComponent<TComponent>(component, options?): FlexRenderComponent<TComponent>;

Defined in: packages/angular-table/src/flex-render/flexRenderComponent.ts:150

Helper function to create a FlexRenderComponent instance, with better type-safety.

Type Parameters

TComponent

TComponent = any

Parameters

component

Type<TComponent>

options?

FlexRenderOptions<Inputs<TComponent>, Outputs<TComponent>>

Returns

FlexRenderComponent<TComponent>

Example

ts
import {flexRenderComponent} from '@tanstack/angular-table'
import {inputBinding, outputBinding} from '@angular/core';

const columns = [
  {
    cell: ({ row }) => {
       return flexRenderComponent(MyComponent, {
         inputs: { value: mySignalValue() },
         outputs: { valueChange: (val) => {} }
         // or using angular native createComponent#binding api
         bindings: [
           inputBinding('value', mySignalValue),
           outputBinding('valueChange', value => {
             console.log("my value changed to", value)
           })
         ]
       })
    },
  },
]
import {flexRenderComponent} from '@tanstack/angular-table'
import {inputBinding, outputBinding} from '@angular/core';

const columns = [
  {
    cell: ({ row }) => {
       return flexRenderComponent(MyComponent, {
         inputs: { value: mySignalValue() },
         outputs: { valueChange: (val) => {} }
         // or using angular native createComponent#binding api
         bindings: [
           inputBinding('value', mySignalValue),
           outputBinding('valueChange', value => {
             console.log("my value changed to", value)
           })
         ]
       })
    },
  },
]