Integrate treeview inside the accordion in Angular Accordion component

27 Apr 20244 minutes to read

Accordion supports to render other Essential JS 2 Components by using content property.
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));