TreeView Integration in Angular Accordion Component

17 Sep 20254 minutes to read

The Syncfusion Angular Accordion component supports integrating other Essential^® JS 2 components, such as TreeView, within its items using the content property. This enables hierarchical navigation structures, ideal for file explorers, nested menus, or organizational charts within expandable panels.

You can give content as an element string like below, for initializing the component.

    content: '<div id="element"> </div>'

The other component can be rendered with the use of provided events, such as clicked and expanding.
The following procedure is to render a TreeView within the Accordion,

• Import the TreeView module from ej2-navigations, for adding TreeView. Please refer the TreeView initialization steps

• You can initialize the TreeView component in expanding event,
  by getting the element and defining the required TreeView properties.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { AccordionModule, TreeViewAllModule } from '@syncfusion/ej2-angular-navigations'




import { Component, ViewChild, ElementRef } from '@angular/core';
import { AccordionComponent, AccordionItemModel, TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
import { Accordion, ExpandEventArgs, TreeView } from '@syncfusion/ej2-navigations';
import { DocDB, DownloadDB, PicDB } from './datasource';

@Component({
imports: [
         AccordionModule, TreeViewAllModule
    ],


standalone: true,
  selector: 'app-container',
  template: `
    <ejs-accordion #element>
        <e-accordionitems>
          <e-accordionitem expanded='true'>
            <ng-template #header>
              <div>Documents</div>
            </ng-template>
            <ng-template #content>
              <ejs-treeview id="treeDoc" [fields]='docField' [sortOrder]='sortOrder'></ejs-treeview>
            </ng-template>
          </e-accordionitem>
          <e-accordionitem>
            <ng-template #header>
              <div>Downloads</div>
            </ng-template>
            <ng-template #content>
            <ejs-treeview id="treeDownload" [fields]='downField' [sortOrder]='sortOrder'></ejs-treeview>
            </ng-template>
          </e-accordionitem>
          <e-accordionitem>
            <ng-template #header>
              <div>Pictures</div>
            </ng-template>
            <ng-template #content>
            <ejs-treeview id="treePic" [fields]='picField' [sortOrder]='sortOrder'></ejs-treeview>
            </ng-template>
          </e-accordionitem>
        </e-accordionitems>
    </ejs-accordion>
        `
})

export class AppComponent {
  @ViewChild('element') acrdnInstance?: AccordionComponent;
  @ViewChild('treeDocRef') treeDocRef!: ElementRef<HTMLDivElement>;

  public docField: Object = { dataSource: DocDB, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', imageUrl: 'image' };
  public downField: Object = { dataSource: DownloadDB, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', imageUrl: 'image' };
  public picField: Object = { dataSource: PicDB, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', imageUrl: 'image' };

  public sortOrder: string = 'Ascending';
}

main.ts

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