ListView integration in Angular Sidebar component

12 Sep 20256 minutes to read

The Sidebar component allows integration of any HTML elements or Syncfusion components within its content area, enabling dynamic and interactive layouts. This is particularly useful for incorporating components like ListView, TreeView in the Sidebar for navigation menus or collapsible lists.

Integrating ListView with Sidebar

The ListView component can be embedded in the Sidebar to create a navigable list, such as a menu or content selector. To integrate:

  1. Import the ListViewModule from @syncfusion/ej2-angular-lists and SidebarModule from @syncfusion/ej2-angular-navigations in your module or component.

  2. Place the <ejs-listview> tag inside the <ejs-sidebar> content area.
    The following sample demonstrates a Sidebar with an integrated ListView.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SidebarModule } from '@syncfusion/ej2-angular-navigations'
import { ListViewModule } from '@syncfusion/ej2-angular-lists'




import { Component, ViewChild } from '@angular/core';
import { SidebarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [SidebarModule, ListViewModule, ],


standalone: true,
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    template: `  <ejs-sidebar id="default-sidebar" #sidebar [width]="width">
                        <div class="title1">Menu</div>
                            <div class="closebtn">
                                <button  ejs-button id="close" class="e-btn close-btn" (click)="closeClick()">
                                    <span id="innerclose" class="e-icons close-icon"></span>
                                </button>
                            </div>
                            <div id="listcontainer">
                            <ejs-listview id='list' [dataSource]='data'></ejs-listview>
                            </div>
                                <div class="sub-title">
                                        ListView component is rendered in the sidebar container.
                                    </div>
                    </ejs-sidebar>
                    <div>
                        <div>
                            <div class="title2">Main content</div>
                            <div class="sub-title"> Click the button to open/close the Sidebar.
                                <div style="padding:20px" class="center-align">
                                    <button ejs-button id="toggle" class="e-btn e-info" (click)="toggleClick()">Toggle Sidebar</button>
                                </div>

                            </div>
                        </div>
                    </div>`
})
export class AppComponent {
    @ViewChild('sidebar') sidebar?: SidebarComponent;
    public width: string = '100%';
    public type: string = 'Over';
    public data: Object[] = [
        { text: 'Home', id: 'list-02' },
        { text: 'Offers', id: 'list-03' },
        { text: 'Support', id: 'list-04' },
        { text: 'Logout', id: 'list-06' }
    ];

    toggleClick() {
        this.sidebar?.toggle();
    }
    closeClick() {
        this.sidebar?.hide();
    }
}
@import 'node_modules/@syncfusion/ej2-base/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-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-lists/styles/material.css';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));