Skip to content

Commit ffde8d8

Browse files
committed
docs(angular): fix broken links
1 parent 3f317ee commit ffde8d8

File tree

2 files changed

+16
-9
lines changed

2 files changed

+16
-9
lines changed

docs/config.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -321,11 +321,11 @@
321321
"children": [
322322
{
323323
"label": "Angular API Reference",
324-
"to": "framework/angular/reference"
324+
"to": "framework/angular/reference/index"
325325
},
326326
{
327327
"label": "injectTable",
328-
"to": "framework/angular/reference/functions/inject-table"
328+
"to": "framework/angular/reference/functions/injectTable"
329329
},
330330
{
331331
"label": "createTableHook",

docs/framework/angular/guide/rendering.md

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -128,7 +128,7 @@ Inside rendered components, the full props object is available via [`injectFlexR
128128

129129
You can render Angular components from column definitions in two ways:
130130

131-
### Using `flexRenderComponent(...)`
131+
### Using `flexRenderComponent`
132132

133133
[`flexRenderComponent(component, options?)`](../reference/functions/flexRenderComponent) wraps a component type with explicit options for `inputs`, `outputs`, `injector`, `bindings`, and `directives`.
134134

@@ -138,6 +138,7 @@ Use this when you need to:
138138
- subscribe to component outputs
139139
- provide a custom `Injector`
140140
- use creation-time `bindings` (Angular v20+)
141+
- apply host directives and binding values at runtime
141142

142143
```ts
143144
import { flexRenderComponent, type ColumnDef } from '@tanstack/angular-table'
@@ -164,14 +165,16 @@ const columns: ColumnDef<Person>[] = [
164165

165166
**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`.
166167

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.
168169

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.
170171

171172
#### `bindings` API (Angular v20+)
172173

173174
`flexRenderComponent` also accepts `bindings` and `directives`, forwarded directly to [`ViewContainerRef.createComponent`](https://angular.dev/api/core/ViewContainerRef#createComponent) at creation time.
174175

176+
This supports Angular programmatic rendering APIs for passing host directives and binding values at runtime.
177+
175178
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.
176179

177180
```ts
@@ -204,15 +207,17 @@ See the Angular docs for details:
204207
- [Programmatic rendering — Binding inputs/outputs/directives](https://angular.dev/guide/components/programmatic-rendering#binding-inputs-outputs-and-setting-host-directives-at-creation)
205208
- [`inputBinding`](https://angular.dev/api/core/inputBinding), [`outputBinding`](https://angular.dev/api/core/outputBinding), [`twoWayBinding`](https://angular.dev/api/core/twoWayBinding)
206209

207-
### Returning a component type
210+
### Returning a component class
211+
212+
Return a component class from `header`, `cell`, or `footer`.
208213

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(...)`.
210215

211216
Define input signals matching the context property names you need:
212217

213218
```ts
214219
import { Component, input } from '@angular/core'
215-
import type { ColumnDef, Table } from '@tanstack/angular-table'
220+
import type { ColumnDef, Table, CellContext } from '@tanstack/angular-table'
216221

217222
const columns: ColumnDef<Person>[] = [
218223
{
@@ -233,7 +238,9 @@ const columns: ColumnDef<Person>[] = [
233238
`,
234239
})
235240
export class TableHeadSelectionComponent<T> {
236-
readonly table = input.required<Table<T>>()
241+
readonly table = input.required<Table<T>>();
242+
// column = input.required<Column<typeof _features, T, unknown>>()
243+
// header = input.required<Header<typeof _features, T, unknown>>()
237244
}
238245
```
239246

0 commit comments

Comments
 (0)