Display onHover icon on every treenode in Angular Material 8

Question

I am having requirement to display icon on Hover on every treenode in Angular Material 8.

What is the best way to achieve this?

Considering we will be having 500-1000 treenodes and performance aspects, I do not want to achieve this using ngAfterViewChecked and bind onHover event on each treeNode.

Answer 1

Best way is to write an directive

export class DisplayIconDirective {

  @HostBinding('width') width = 0
  @HostListener('mouseenter',['$event'])
  onHover(e){
    this.width = 200
  }

}