Highlight found node in angular material tree
I have this method to expand and highlight a specific node in my material tree:
expand(folderId: number): any {
for (let i = 0; i < this.treeControl.dataNodes.length; i++)
{
if (this.treeControl.dataNodes[i].id == folderId)
{
this.treeControl.expan开发者_运维技巧d(this.treeControl.dataNodes[i]);
hightlight(this.treeControl.dataNodes[i]);
}
}
}
here is my material tree structure:
private _transformer = (node: Folder, level: number) => {
return {
expandable: !!node.children && node.children.length > 0,
id: node.id,
name: node.name,
level: level,
};
};
treeControl = new FlatTreeControl<ExampleFlatNode>(
node => node.level,
node => node.expandable,
);
treeFlattener = new MatTreeFlattener(
this._transformer,
node => node.level,
node => node.expandable,
node => node.children,
);
dataSource = new MatTreeFlatDataSource(this.treeControl, this.treeFlattener);
how should be highlight method in typescript to highlight the node?
Add a highlight property to FlatNode interface, and update the same property when highlight method is called
interface ExampleFlatNode {
expandable: boolean;
name: string;
level: number;
highlight: boolean;
}
highlight(node: ExampleFlatNode){
node.highlight = true
}
now use this highlight property to apply a class on the mat-tree-node element in the HTML
<mat-tree-node *matTreeNodeDef="let node;when: hasChild" [ngClass]="{'highlight': node.highlight}">
...
</mat-tree-node>
.highlight{
background-color: yellow;
}
精彩评论