Integrate treeview inside the accordion in Angular Accordion component

28 Sep 20234 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
app.module.ts
main.ts
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({
  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';
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AccordionModule, TreeViewAllModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule, AccordionModule, TreeViewAllModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

import 'zone.js';
enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);