Auto hide show expand collapse icon in Angular TreeView component

27 Aug 20257 minutes to read

The TreeView component allows you to create a cleaner interface by automatically hiding expand/collapse icons and displaying them only when needed. You can show the expand/collapse icons when hovering over the TreeView and hide them when the mouse leaves the component area. This behavior is implemented using the created event to set up the necessary mouse event handlers and CSS styling.

Refer to the following code sample to hide/show the expand/collapse icon automatically using the mouse.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { TreeViewModule } from '@syncfusion/ej2-angular-navigations'
import { Component, Inject, ViewChild } from '@angular/core';
import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
/**
 * TreeView Auto hide/show expand/collapse icons
 */
@Component({
  imports: [
    FormsModule, TreeViewModule
  ],
  standalone: true,
  selector: 'app-container',
  template: `<div id='treeparent'><ejs-treeview id='treeElement' #treevalidate [fields]='field' (created)='onCreate($event)'></ejs-treeview></div>`
})

export class AppComponent {
  // Data source for TreeView component
  public countries: Object[] = [
    { id: 1, name: 'India', hasChild: true },
    { id: 2, pid: 1, name: 'Assam' },
    { id: 3, pid: 1, name: 'Bihar' },
    { id: 4, pid: 1, name: 'Tamil Nadu' },
    { id: 6, pid: 1, name: 'Punjab' },
    { id: 7, name: 'Brazil', hasChild: true },
    { id: 8, pid: 7, name: 'Paraná' },
    { id: 9, pid: 7, name: 'Ceará' },
    { id: 10, pid: 7, name: 'Acre' },
    { id: 11, name: 'France', hasChild: true },
    { id: 12, pid: 11, name: 'Pays de la Loire' },
    { id: 13, pid: 11, name: 'Aquitaine' },
    { id: 14, pid: 11, name: 'Brittany' },
    { id: 15, pid: 11, name: 'Lorraine' },
    { id: 16, name: 'Australia', hasChild: true },
    { id: 17, pid: 16, name: 'New South Wales' },
    { id: 18, pid: 16, name: 'Victoria' },
    { id: 19, pid: 16, name: 'South Australia' },
    { id: 20, pid: 16, name: 'Western Australia' },
    { id: 21, name: 'China', hasChild: true },
    { id: 22, pid: 21, name: 'Guangzhou' },
    { id: 23, pid: 21, name: 'Shanghai' },
    { id: 24, pid: 21, name: 'Beijing' },
    { id: 25, pid: 21, name: 'Shantou' }
  ];
  public field: Object = { dataSource: this.countries, id: 'id', text: 'name', parentID: 'pid', hasChildren: 'hasChild' };

  @ViewChild('treevalidate') tree?: TreeViewComponent;

  public onCreate(args: any): void {
    let collapse: NodeListOf<Element> = (this.tree as any)?.element.querySelectorAll('.e-icons.e-icon-collapsible') as NodeListOf<Element>;
    let expand: NodeListOf<Element> = (this.tree as any)?.element.querySelectorAll('.e-icons.e-icon-expandable') as NodeListOf<Element>;
    this.hideIcon(expand, collapse);
    (this.tree as any)?.element.addEventListener('mouseenter', (event: any) => {
      this.showIcon(expand, collapse);
    });
    (this.tree as any)?.element.addEventListener('mouseleave', (event: any) => {
      this.hideIcon(expand, collapse);
    });
  }
  // hides expand/collapse icon on hovering the mouse
  public hideIcon(expand: NodeListOf<Element>, collapse: NodeListOf<Element>) {
    for (let i: number = 0; i < collapse.length; i++) {
      collapse[i].setAttribute('style', 'visibility: hidden');
    }
    for (let j: number = 0; j < expand.length; j++) {
      expand[j].setAttribute('style', 'visibility: hidden');
    }
  }

  // shows expand/collapse icon while leaving the mouse
  public showIcon(expand: NodeListOf<Element>, collapse: NodeListOf<Element>) {
    for (let i: number = 0; i < collapse.length; i++) {
      collapse[i].setAttribute('style', "visibility");
    }
    for (let j: number = 0; j < expand.length; j++) {
      expand[j].setAttribute('style', "visibility");
    }
  }
}

styles.css

@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';

#treeparent {
    display: block;
    max-width: 350px;
    max-height: 350px;
    margin: auto;
    overflow: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));