Multiple sidebar in Angular Sidebar component

17 Nov 20224 minutes to read

Two Sidebars can be initialized in a web page with same main content. Sidebars can be initialized on right side or left side of the main content using position property.

The HTML element with class name e-main-content will be considered as the main content and both the Sidebars will behave as side content to this main content area of a web page.

app.component.ts

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

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

                    <ejs-sidebar id="default1" #rightSidebar [width]='width' [position]='position'
                        [type]='type' [closeOnDocumentClick]='closeOnDocumentClick'>
                        <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;"> 
                        <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();
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';

import { SidebarModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent } from './app.component'

@NgModule({
    imports: [SidebarModule, BrowserModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule { }

main.ts

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);