Search results

Multiple Sidebar in Angular Sidebar component

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.

Source
Preview
app.component.ts
app.module.ts
main.ts
app.component.html
app.component.css
import { Component, ViewChild } from '@angular/core';
import { SidebarComponent } from '@syncfusion/ej2-angular-navigations';

@Component({
    selector: 'app-root',
    styleUrls: ['app/app.component.css'],
    templateUrl: 'app/app.component.html'
})
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();
    }
}
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 { }
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
<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>
#container {
    visibility: hidden;
  }
  
  #loader {
    color: #008cff;
    height: 40px;
    width: 30%;
    position: absolute;
    top: 45%;
    left: 45%;
  }
  
  .header {
       width:100%;
      height: 40px;
      font-size:20px;
      line-height: 40px;
      font-weight: 500;
      background: #eee;
      display: inline-block;
  }
  
  .e-main-content{
    text-align:center;
    height:100vh;
    background: #f5f5f5; 
    font-size:16px;
    padding:100px;
  }
  
  #button-align{
    padding:15px;
  }
  
  .title {
      text-align: center;
      font-size: 20px;
      padding: 15px; 
  }
  
  
  #default,#default1 {
      background-color: rgb(25, 118, 210);
      color: #ffffff;
      overflow:hidden;
  }