Get dynamic icon in Angular TreeView component

7 Jan 20255 minutes to read

In the TreeView component, you can get the original bound data using the getTreeData method. If you pass the id of a tree node to this method, it returns the corresponding node information; otherwise, it returns information for all tree nodes. You can use this method to get the bound iconCss class in the nodeChecking event. Please refer to the following sample for an implementation example.

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';
import { NodeCheckEventArgs } from '@syncfusion/ej2-navigations';
/**
 * Icon css sample
 */
@Component({
imports: [
        FormsModule,TreeViewModule
    ],


standalone: true,
    selector: 'app-container',
    template: `<div id='treeparent'><ejs-treeview id='treeElement' #treevalidate [fields]='field'  (nodeChecking)='onNodeCheck($event)' [showCheckBox]=true [autoCheck]=false></ejs-treeview></div>`
})
export class AppComponent {

   // Data source for TreeView component
   public treeData: Object[] = [
        {
        "nodeId": "01", "nodeText": "Music", "icon": "folder", "expanded": true, "nodeChild": [
            { "nodeId": "01-01", "nodeText": "Gouttes.mp3", "icon": "audio" }
          ]
        },
        {
          "nodeId": "02", "nodeText": "Videos", "icon": "folder", "expanded": true, "nodeChild": [
            { "nodeId": "02-01", "nodeText": "Naturals.mp4", "icon": "video" },
            { "nodeId": "02-02", "nodeText": "Wild.mpeg", "icon": "video" }
          ]
        }
    ];

    public field:Object ={  dataSource: this.treeData, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', expanded: 'expanded' };

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

    public onNodeCheck(args: NodeCheckEventArgs): void {
      let nodeId: any = args.data[0]['id'];
      // To get the iconCss
      let iconClass = this.tree?.getTreeData(nodeId)[0]['icon'];
      alert('Icon class is ' + iconClass);
    }
}

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';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';

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

.e-treeview .e-list-img {
    width: 25px;
    height: 25px;
  }

  .e-treeview .e-list-icon {
    background-repeat: no-repeat;
    background-image: url(https://ej2.syncfusion.com/javascript/demos/src/treeview/images/icons/file_icons.png);
    height: 20px;
  }

  .e-treeview .e-list-icon.folder {
    background-position: -10px -552px 
  }

  .e-treeview .e-list-icon.audio {
    background-position: -10px -244px
  }

  .e-treeview .e-list-icon.video {
    background-position: -10px -272px
  }

main.ts

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