You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/framework/angular/guide/rendering.md
+14-7Lines changed: 14 additions & 7 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -128,7 +128,7 @@ Inside rendered components, the full props object is available via [`injectFlexR
128
128
129
129
You can render Angular components from column definitions in two ways:
130
130
131
-
### Using `flexRenderComponent(...)`
131
+
### Using `flexRenderComponent`
132
132
133
133
[`flexRenderComponent(component, options?)`](../reference/functions/flexRenderComponent) wraps a component type with explicit options for `inputs`, `outputs`, `injector`, `bindings`, and `directives`.
134
134
@@ -138,6 +138,7 @@ Use this when you need to:
138
138
- subscribe to component outputs
139
139
- provide a custom `Injector`
140
140
- use creation-time `bindings` (Angular v20+)
141
+
- apply host directives and binding values at runtime
**Inputs** are applied through [`ComponentRef.setInput(key, value)`](https://angular.dev/api/core/ComponentRef#setInput). This works with both `input()` signals and `@Input()` decorators. Inputs are diffed on every change detection cycle using `KeyValueDiffers` — only changed values trigger `setInput`.
166
167
167
-
**Outputs** work through `OutputEmitterRef` subscriptions. The factory reads the component instance property by name, checks that it is an `OutputEmitterRef`, and subscribes to it. When the output emits, the corresponding callback from `outputs` is invoked. Subscriptions are cleaned up automatically when the component is destroyed.
168
+
For object-like inputs, updates are reference-based: if the object reference is stable, Angular's default input equality semantics prevent unnecessary updates.
168
169
169
-
The `FlexRenderComponentRef` tracks input/output changes via Angular's `KeyValueDiffers`. When the same component type is re-rendered with updated options, it diffs and patches only the changed inputs/outputs instead of recreating the component.
170
+
**Outputs** work through `OutputEmitterRef` subscriptions. The factory reads the component instance property by name, checks that it is an `OutputEmitterRef`, and subscribes to it. When the output emits, the corresponding callback from `outputs` is invoked. Subscriptions are cleaned up automatically when the component is destroyed.
170
171
171
172
#### `bindings` API (Angular v20+)
172
173
173
174
`flexRenderComponent` also accepts `bindings` and `directives`, forwarded directly to [`ViewContainerRef.createComponent`](https://angular.dev/api/core/ViewContainerRef#createComponent) at creation time.
174
175
176
+
This supports Angular programmatic rendering APIs for passing host directives and binding values at runtime.
177
+
175
178
Unlike `inputs`/`outputs` (which are applied imperatively after creation), `bindings` are applied **at creation time** — they participate in the component's initial change detection cycle.
176
179
177
180
```ts
@@ -204,15 +207,17 @@ See the Angular docs for details:
Return a component class from `header`, `cell`, or `footer`.
208
213
209
-
Return a component `Type<T>` from `header`, `cell`, or `footer`. The render context properties (`table`, `column`, `header`, `cell`, `row`, `getValue`, etc.) are automatically set as component inputs via `ComponentRef.setInput(...)`.
214
+
The render context properties (`table`, `column`, `header`, `cell`, `row`, `getValue`, etc.) are automatically set as component inputs via `ComponentRef.setInput(...)`.
210
215
211
216
Define input signals matching the context property names you need:
0 commit comments