angular / angular/components

CdkTree does not populate some CdkTreeNodeOutletContext properties

Open
#12,034 3 comments 6 reactions 0 assignees View on GitHub
area: cdk/tree P4
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

#### Bug, feature request, or proposal:
Bug

#### What is the expected behavior?
`CdkTreeNodeOutletContext` has the following properties:
```ts
/** Depth of the node. */
level: number;

/** Index location of the node. */
index?: number;

/** Length of the number of total dataNodes. */
count?: number;
```
All of them should be populated when creating the context and before embedding the node ([see code reference](https://github.com/angular/material2/blob/c40fef4b1ab77593d21edee07fe1e68fa2459c94/src/cdk/tree/tree.ts#L253)).

#### What is the current behavior?
Only `level` is populated. `index` and `count` are not populated and cannot be used in the TreeNode's template to track the current position or total count. I assume that `index` should be the index of the node, relative to its siblings in its branch at the same level, and `count` should be the total number of siblings in the same branch at that level.

#### What are the steps to reproduce?
When using all three properties of the context, only `level` is populated - [see Stackblitz example](https://stackblitz.com/edit/angular-qa9gcr-w2c4w5?file=app/cdk-tree-nested-example.html)

#### What is the use-case or motivation for changing an existing behavior?
Developers should have access to the node's current position in their template, similarly to how they can track index in `ngFor`.

#### Which versions of Angular, Material, OS, TypeScript, browsers are affected?
All

Contributor guide

Open the contributing guide

Research direction

Start in src/cdk/tree/tree.ts at the referenced CdkTreeNodeOutletContext creation, then compare its behavior with the StackBlitz reproduction. Ensure the context exposes level, index, and count before the node is embedded, with index and count representing the node’s position and total at its branch level; verify the three values in the reproduction.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.