feat(angular): add support to bindings and directives in FlexRender #6152
Conversation
…der via createComponent
|
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the 📝 WalkthroughWalkthroughAdds creation-time Angular bindings and directives support to flex-render: new type aliases and interfaces, a FlexRenderComponentInstance wrapper exposing Changes
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Suggested reviewers
Poem
🚥 Pre-merge checks | ✅ 2 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. 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. Comment |
|
| Command | Status | Duration | Result |
|---|---|---|---|
nx affected --targets=test:format,test:eslint,t... |
❌ Failed | 1m 33s | View ↗ |
nx run-many --targets=build -p @tanstack/table-... |
✅ Succeeded | 5s | View ↗ |
☁️ Nx Cloud last updated this comment at 2026-01-18 18:41:29 UTC
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@packages/angular-table/src/flex-render/flexRenderComponent.ts`:
- Around line 33-51: Typo in the JSDoc example import — change the package name
in the example import from '@tantack/angular-table' to the correct
'@tanstack/angular-table' in the comment block near the flexRenderComponent
example so the documented import (flexRenderComponent) matches the actual
package name.
- Around line 65-83: The example import path contains a typo: update the import
in the JSDoc example for flexRenderComponent from "@tantack/angular-table" to
the correct "@tanstack/angular-table" so the documentation matches the actual
package name; locate the JSDoc block near the flexRenderComponent declaration
and change the string in the import statement.
🧹 Nitpick comments (1)
packages/angular-table/src/flex-render/flexRenderComponent.ts (1)
86-107: Consider adding a warning about mutually exclusive options.The JSDoc mentions that
bindingsshouldn't be used together withinputs/outputs, but there's no runtime validation. Consider whether a development-mode warning would be helpful if users accidentally combine both approaches.💡 Optional: Add dev-mode warning
export function flexRenderComponent<TComponent = any>( component: Type<TComponent>, options?: FlexRenderOptions<Inputs<TComponent>, Outputs<TComponent>>, ): FlexRenderComponent<TComponent> { const { inputs, injector, outputs, directives, bindings } = options ?? {} if (typeof ngDevMode === 'undefined' || ngDevMode) { if (bindings?.length && (inputs || outputs)) { console.warn( '[`@tanstack/angular-table`] Using `bindings` together with `inputs`/`outputs` is not recommended. ' + 'Choose one approach for consistency.' ) } } return new FlexRenderComponentInstance(/* ... */) }
|
@coderabbitai review |
✅ Actions performedReview triggered.
|
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Fix all issues with AI agents
In `@packages/angular-table/src/flex-render/flexRenderComponent.ts`:
- Around line 245-251: The interface declares mutable properties "bindings?:
CreateComponentBindings" and "directives?: CreateComponentDirectives" but the
implementation type FlexRenderComponentInstance marks them as readonly; update
the interface to declare both properties as readonly (e.g., "readonly bindings?:
CreateComponentBindings" and "readonly directives?: CreateComponentDirectives")
so the interface matches the implementation and the TypeScript "implements"
check passes.
- Around line 88-101: The JSDoc links reference the non-existent option
"FlexRenderOptions#binding" — update both occurrences that appear near the
inputs?: TInputs and the outputs documentation (the paragraph referencing
OutputEmitterRef#subscribe) to point to the correct option name
"FlexRenderOptions#bindings" so the {`@link` ...} tags read {`@link`
FlexRenderOptions#bindings}.
| * | ||
| * These values are assigned after the component has been created using | ||
| * [componentRef.setInput API](https://angular.dev/api/core/ComponentRef#setInput). | ||
| * | ||
| * Shouldn't be used together with {@link FlexRenderOptions#binding} option | ||
| */ | ||
| inputs?: TInputs | ||
| /** | ||
| * Component instance outputs. | ||
| * | ||
| * Outputs are wired imperatively after component creation using {@link OutputEmitterRef#subscribe}. | ||
| * | ||
| * Shouldn't be used together with {@link FlexRenderOptions#binding} option | ||
| */ |
There was a problem hiding this comment.
Fix JSDoc link typo for the bindings option.
The link target says FlexRenderOptions#binding, but the option is bindings.
📝 Proposed fix
- * Shouldn't be used together with {`@link` FlexRenderOptions#binding} option
+ * Shouldn't be used together with {`@link` FlexRenderOptions#bindings} option
...
- * Shouldn't be used together with {`@link` FlexRenderOptions#binding} option
+ * Shouldn't be used together with {`@link` FlexRenderOptions#bindings} option📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| * | |
| * These values are assigned after the component has been created using | |
| * [componentRef.setInput API](https://angular.dev/api/core/ComponentRef#setInput). | |
| * | |
| * Shouldn't be used together with {@link FlexRenderOptions#binding} option | |
| */ | |
| inputs?: TInputs | |
| /** | |
| * Component instance outputs. | |
| * | |
| * Outputs are wired imperatively after component creation using {@link OutputEmitterRef#subscribe}. | |
| * | |
| * Shouldn't be used together with {@link FlexRenderOptions#binding} option | |
| */ | |
| * | |
| * These values are assigned after the component has been created using | |
| * [componentRef.setInput API](https://angular.dev/api/core/ComponentRef#setInput). | |
| * | |
| * Shouldn't be used together with {`@link` FlexRenderOptions#bindings} option | |
| */ | |
| inputs?: TInputs | |
| /** | |
| * Component instance outputs. | |
| * | |
| * Outputs are wired imperatively after component creation using {`@link` OutputEmitterRef#subscribe}. | |
| * | |
| * Shouldn't be used together with {`@link` FlexRenderOptions#bindings} option | |
| */ |
🤖 Prompt for AI Agents
In `@packages/angular-table/src/flex-render/flexRenderComponent.ts` around lines
88 - 101, The JSDoc links reference the non-existent option
"FlexRenderOptions#binding" — update both occurrences that appear near the
inputs?: TInputs and the outputs documentation (the paragraph referencing
OutputEmitterRef#subscribe) to point to the correct option name
"FlexRenderOptions#bindings" so the {`@link` ...} tags read {`@link`
FlexRenderOptions#bindings}.
| bindings?: CreateComponentBindings | ||
| /** | ||
| * Directives that should be applied to the component. | ||
| * | ||
| * @see {FlexRenderOptions#directives} | ||
| */ | ||
| directives?: CreateComponentDirectives |
There was a problem hiding this comment.
Make bindings/directives readonly to match the implementation.
FlexRenderComponentInstance defines these properties as readonly, but the interface declares them as mutable, which should fail the implements check in TS. Align the interface with the implementation.
🛠️ Proposed fix
- bindings?: CreateComponentBindings
+ readonly bindings?: CreateComponentBindings
...
- directives?: CreateComponentDirectives
+ readonly directives?: CreateComponentDirectives📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| bindings?: CreateComponentBindings | |
| /** | |
| * Directives that should be applied to the component. | |
| * | |
| * @see {FlexRenderOptions#directives} | |
| */ | |
| directives?: CreateComponentDirectives | |
| readonly bindings?: CreateComponentBindings | |
| /** | |
| * Directives that should be applied to the component. | |
| * | |
| * `@see` {FlexRenderOptions#directives} | |
| */ | |
| readonly directives?: CreateComponentDirectives |
🤖 Prompt for AI Agents
In `@packages/angular-table/src/flex-render/flexRenderComponent.ts` around lines
245 - 251, The interface declares mutable properties "bindings?:
CreateComponentBindings" and "directives?: CreateComponentDirectives" but the
implementation type FlexRenderComponentInstance marks them as readonly; update
the interface to declare both properties as readonly (e.g., "readonly bindings?:
CreateComponentBindings" and "readonly directives?: CreateComponentDirectives")
so the interface matches the implementation and the TypeScript "implements"
check passes.
The following PR will update
flexRenderComponenthelper in order to passbindingsanddirectivesoptions into theviewContainerRef.createComponentcall.Angular 20 has introduced those new options to set inputs in a more convenient way. It also allows to set directives at component creation time.
https://angular.dev/guide/components/programmatic-rendering#binding-inputs-outputs-and-setting-host-directives-at-creation
Summary by CodeRabbit
New Features
Breaking Changes
Tests
✏️ Tip: You can customize this high-level summary in your review settings.