Issue
Angular Material has vast amount of properties in its components (API).
For example: https://material.angular.io/components/tree/api#MatNestedTreeNode
How would I access level
property from within HTML (what's the syntax)?
<mat-tree [dataSource]="dataSource"
[treeControl]="treeControl">
<mat-nested-tree-node *matTreeNodeDef="let data; when: hasChild">
<div>
How to access this node's properties?
</div>
<ul [class.example-tree-invisible]="!treeControl.isExpanded(data)">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</mat-nested-tree-node>
<mat-tree-node *matTreeNodeDef="let data">
<div>
How to access this node's properties?
</div>
</mat-tree-node>
</mat-tree>
TS:
@Component({
selector: 'app-tree',
templateUrl: './tree.component.html',
styleUrls: ['./tree.component.scss']
})
export class MyTreeComponent {
treeControl = new NestedTreeControl<Data>(d => d.children);
dataSource = new MatTreeNestedDataSource<Data>();
constructor() { }
hasChild = (_: number, d: Data) => !!d.children && d.children.length > 0;
}
I know how to do it programmatically (with @ViewChild
), but that won't do since component has many nodes, not one.
EDIT: Expanded source code.
EDIT 2: To align better with Z.Bolbol answer - modified title and adding comment - this question was created because I didn't know how to retrieve level property of node in mat-tree. It appears that You have to compute it yourself and since provided answer actually solves the original problem - it's accepted.
Said that - comments about @ViewChildren
and QueryList
are 100% correct and I did make them work following the link provided - it's just they were no use because level property is never used in nested trees (level is always equal to 0).
Solution
Level flag is only available for Flat tree and I think that it's computed at expansion time from parent level, root node gets Level 0 and then for each espanded node :
node.level = parentNode.level + 1 ;
So if you want to keep things simple just use a Falt tree instead of Nested tree. If you like to keep using Nested tree for any reason you need to compute the level with custom method.
ts
@Component({
selector: 'app-tree',
templateUrl: './tree.component.html',
styleUrls: ['./tree.component.scss']
})
export class MyTreeComponent {
treeControl = new NestedTreeControl<Data>(d => d.children);
dataSource = new MatTreeNestedDataSource<Data>();
constructor() { }
hasChild = (_: number, d: Data) => !!d.children && d.children.length > 0;
getLevel(data, node: Data) {
let path = data.find(branch => {
return this.treeControl
.getDescendants(branch)
.some(n => n.name === node.name);
});
return path ? this.getLevel(path.children, node) + 1 : 0 ;
}
}
html
<mat-tree [dataSource]="dataSource"
[treeControl]="treeControl">
<mat-nested-tree-node *matTreeNodeDef="let data; when: hasChild">
<div>
{{ getLevel(this.dataSource.data, node)}}
</div>
<ul [class.example-tree-invisible]="!treeControl.isExpanded(data)">
<ng-container matTreeNodeOutlet></ng-container>
</ul>
</mat-nested-tree-node>
<mat-tree-node *matTreeNodeDef="let data">
<div>
{{ getLevel(this.dataSource.data, node)}}
</div>
</mat-tree-node>
</mat-tree>
Answered By - Bilel-Zheni
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.