How to access tree data in custom TUI_TREE_CONTENT components?

[erzenhaxhi]

I'm trying to create a custom tree node component using the TUI_TREE_CONTENT token, but I cannot access the actual tree data (the value passed to tui-tree) within my custom component. The component only receives TuiTreeItemContext which contains the tree item component instance and template, but not the tree data itself.

// Provider
{
  provide: TUI_TREE_CONTENT,
  useValue: new PolymorpheusComponent(TreeNodeComponent)
}

// Custom component
@Component({
  selector: 'tree-node',
  template: `
    <ng-container [ngTemplateOutlet]="context.template"></ng-container>
    <!-- I want to display custom content based on tree data -->
    <div>{{ treeData.customProperty }}</div> <!-- This doesn't work -->
  `
})
export class TreeNodeComponent extends TuiTreeItemContent {
  // context only provides: { $implicit: TuiTreeItem, template: TemplateRef }
  // But I need access to the tree data (the 'value' passed to tui-tree)
}


// tui-tree component
<tui-scrollbar [style.height.px]="height()">
	@for (item of data(); track item) {
		<tui-tree [childrenHandler]="handler" [content]="content" [tuiTreeController]="true" [value]="item"></tui-tree>
	}
</tui-scrollbar>
<ng-template #content let-item>
	<tui-checkbox-labeled
		class="tui-space_vertical-2 tui-space_left-1"
		[ngModel]="item | tuiMapper: getValue : map"
		(ngModelChange)="onChecked(item, $event)">
		<span>{{ item.text }}</span>
	</tui-checkbox-labeled>
</ng-template>

[splincode]

Try node from <ng-template #content let-item let-node="node">

[waterplea]

TUI_TREE_CONTENT is used to customize tree item component itself, not how it displays the value. To change how it displays the value pass [content] to tui-tree, it has current value as $implicit in context.

Example of that:
https://taiga-ui.dev/components/tree#template

Example of what TUI_TREE_CONTENT is used for:
https://taiga-ui.dev/components/tree#custom