How to add multiple Sidebar in Angular Sidebar

26 Sep 20264 minutes to read

Multiple Angular Sidebar 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 Angular Sidebar.

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

app.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/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-lists/styles/material3.css';

main.ts

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