开发者

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;
}
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜