fix(angular): fix conditional flexRenderComponent rendering

[riccardoperra]

This resolve a rendering issue with flexRenderDirective that doesn't re-render component while using conditional flexRenderComponent return in the same cell column configuration (same cell reference in template, so it's a case where you are not updating table state but relies on external data outside of table scope)

cell: () => {
  if (condition) { 
    return flexRenderComponent(ComponentA)
  }
  return flexRenderComponent(ComponentB)
}

Example:

• 1st call -> flexRenderComponent(ComponentA)
• 2nd call -> flexRenderComponent(ComponentB)

Results

before: no-rerender since we were checking only A and B content type (which is always flexRenderComponent)

after: A will be destroyed and B will be created (since component type class is different)

[coderabbitai]

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: b03d3982-ccd3-4fa4-af5e-de91bc3fdde8

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/angular-conditional-component-rendering

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[nx-cloud]

View your CI Pipeline Execution ↗ for commit 3f6ede2

Command	Status	Duration	Result
nx affected --targets=test:sherif,test:knip,tes...	✅ Succeeded	1h 1m 17s	View ↗
nx run-many --targets=build --exclude=examples/**	✅ Succeeded	1s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-04-02 20:33:32 UTC

[pkg-pr-new]

More templates

• tanstack-table-example-angular-basic
• tanstack-table-example-angular-column-ordering
• tanstack-table-example-angular-column-pinning
• tanstack-table-example-angular-column-pinning-sticky
• tanstack-table-example-angular-column-resizing-performant
• tanstack-table-example-angular-column-visibility
• tanstack-table-example-angular-editable
• tanstack-table-example-angular-expanding
• tanstack-table-example-angular-filters
• tanstack-table-example-angular-grouping
• tanstack-table-example-angular-row-dnd
• tanstack-table-example-angular-row-selection
• tanstack-table-example-angular-row-selection-signal
• tanstack-table-example-angular-signal-input
• tanstack-table-example-angular-sub-components
• tanstack-lit-table-example-basic
• tanstack-lit-table-example-column-sizing
• tanstack-lit-table-example-filters
• tanstack-lit-table-example-row-selection
• tanstack-lit-table-example-sorting
• tanstack-lit-table-example-sorting-dynamic-data
• tanstack-lit-table-virtualized-rows
• tanstack-table-example-qwik-basic
• tanstack-table-example-qwik-filters
• tanstack-table-example-qwik-row-selection
• tanstack-table-example-qwik-sorting
• tanstack-table-example-basic
• tanstack-table-example-bootstrap
• tanstack-table-example-column-dnd
• tanstack-table-example-column-groups
• tanstack-table-example-column-ordering
• tanstack-table-example-column-pinning
• tanstack-table-example-column-pinning-sticky
• tanstack-table-example-column-resizing-performant
• tanstack-table-example-column-sizing
• tanstack-table-example-column-visibility
• tanstack-table-example-custom-features
• tanstack-table-example-editable-data
• tanstack-table-example-expanding
• tanstack-table-example-filters
• tanstack-table-example-filters-faceted
• tanstack-table-example-filters-fuzzy
• tanstack-table-example-full-width-resizable-table
• tanstack-table-example-full-width
• tanstack-table-example-fully-controlled
• tanstack-table-example-grouping
• tanstack-table-example-kitchen-sink
• tanstack-table-example-material-ui-pagination
• tanstack-table-example-pagination
• tanstack-table-example-pagination-controlled
• tanstack-table-example-query-router-search-params
• tanstack-table-example-row-dnd
• tanstack-table-example-row-pinning
• tanstack-table-example-row-selection
• tanstack-table-example-sorting
• tanstack-table-example-sub-components
• tanstack-table-example-virtualized-columns
• tanstack-table-example-virtualized-columns-experimental
• tanstack-table-example-virtualized-infinite-scrolling
• tanstack-table-example-virtualized-rows
• tanstack-table-example-virtualized-rows-experimental
• tanstack-table-example-solid-basic
• tanstack-table-example-solid-bootstrap
• tanstack-table-example-solid-column-groups
• tanstack-table-example-solid-column-ordering
• tanstack-table-example-solid-column-visibility
• tanstack-table-example-solid-filters
• tanstack-table-example-solid-sorting
• tanstack-table-example-svelte-basic
• tanstack-table-example-svelte-column-groups
• tanstack-table-example-svelte-column-ordering
• tanstack-table-example-svelte-column-pinning
• tanstack-table-example-svelte-column-visibility
• tanstack-table-example-svelte-filtering
• tanstack-table-example-svelte-sorting
• tanstack-table-example-vanilla-basic
• tanstack-table-example-vanilla-pagination
• tanstack-table-example-vanilla-sorting
• tanstack-table-example-vue-basic
• tanstack-table-example-vue-column-ordering
• tanstack-table-example-vue-column-pinning
• tanstack-table-example-vue-filters
• tanstack-table-example-vue-grouping-rows
• tanstack-table-example-vue-pagination
• tanstack-table-example-vue-pagination-controlled
• tanstack-table-example-vue-row-selection
• tanstack-table-example-vue-sorting
• tanstack-table-example-vue-subcomponents
• tanstack-table-example-vue-virtualized-rows

@tanstack/angular-table

npm i https://pkg.pr.new/@tanstack/angular-table@6218

@tanstack/lit-table

npm i https://pkg.pr.new/@tanstack/lit-table@6218

@tanstack/match-sorter-utils

npm i https://pkg.pr.new/@tanstack/match-sorter-utils@6218

@tanstack/qwik-table

npm i https://pkg.pr.new/@tanstack/qwik-table@6218

@tanstack/react-table

npm i https://pkg.pr.new/@tanstack/react-table@6218

@tanstack/react-table-devtools

npm i https://pkg.pr.new/@tanstack/react-table-devtools@6218

@tanstack/solid-table

npm i https://pkg.pr.new/@tanstack/solid-table@6218

@tanstack/svelte-table

npm i https://pkg.pr.new/@tanstack/svelte-table@6218

@tanstack/table-core

npm i https://pkg.pr.new/@tanstack/table-core@6218

@tanstack/vue-table

npm i https://pkg.pr.new/@tanstack/vue-table@6218

commit: 3f6ede2