Multiple Sidebar in Angular Sidebar component

12 Sep 20254 minutes to read

Multiple Sidebars can be initialized on a single web page, sharing the same main content area while positioned on opposite sides (e.g., left and right). This setup is useful for applications requiring dual navigation panels or contextual side content. Use the position property (values: Left or Right) to set the side for each Sidebar.

The HTML element with class name e-main-content is considered the main content and both the Sidebars will behave as side content to this main content area of a web page.
The following sample demonstrates two Sidebars positioned on the left and right of the shared main content, toggled independently via buttons.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SidebarModule } from '@syncfusion/ej2-angular-navigations'
import { Component, ViewChild } from '@angular/core';
import { SidebarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
imports: [SidebarModule, ],
standalone: true,
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    template: `  <ejs-sidebar id="default" #leftSidebar [width]='width' [type]='type'>
                        <div class="title"> Left Sidebar content</div>
                    </ejs-sidebar>

                    <ejs-sidebar id="default1" #rightSidebar [width]='width' [position]='position'
                        [type]='type'>
                        <div class="title">Right Sidebar content</div>
                    </ejs-sidebar>
                    <div class="e-main-content" style="font-size: 16px; padding: 100px 0; transform: translateX(0px); margin-left: 100px; margin-right: 100px; text-align: center;"> 
                        <p>Place your main content here.....</p>
                        <div id="button-align">
                            <button ejs-button id="toggle" class="e-btn e-info" (click)="leftToggle()">Toggle Sidebar 1</button>
                        </div>
                        <div id="button-align">
                            <button ejs-button id="toggle2" class="e-btn e-info" (click)="rightToggle()">Toggle Sidebar 2</button>
                        </div>
                    </div>`
})
export class AppComponent {
    @ViewChild('leftSidebar') leftsidebar?: SidebarComponent;
    @ViewChild('rightSidebar') rightsidebar?: SidebarComponent;

    public width:string='250px';
    public position:string='Right';
    public type:string='Push';

    leftToggle() {
        this.leftsidebar?.toggle();
    }
    rightToggle() {
        this.rightsidebar?.toggle();
    }
}

styles.css

@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';

main.ts

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