Search results

Open and Close the Sidebar in Angular Sidebar component

04 Aug 2021 / 1 minute to read

Opening and closing the Sidebar can be achieved with built-in public methods.

  • show(): Method to open the Sidebar.
  • hide(): Method to close the Sidebar.
  • toggle(): Method to toggle between open and close states of the Sidebar.

In the following sample, toggle method has been used to show or hide the Sidebar on button click.

Source
Preview
app.component.ts
app.module.ts
main.ts
app.component.html
app.component.css
Copied to clipboard
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('sidebar') sidebar: SidebarComponent;
public open() {
   console.log("Sidebar Opened");
}
public close() {
    console.log("Sidebar Closed");
}
toggleClick() {
    this.sidebar.toggle();
}
closeClick() {
    this.sidebar.hide();
}
}
Copied to clipboard
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 { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<ejs-sidebar id="default-sidebar" #sidebar (open)="open($event)" (close)="close($event)">
    <div class="title"> Sidebar content</div>
    <div class="sub-title">
        Click the button to close the Sidebar.
    </div>
    <div class="center-align">
        <button ejs-button id="close" (click)="closeClick()" class="e-btn close-btn">Close Sidebar</button>
    </div>
</ejs-sidebar>
<div>
    <div>
        <div class="title">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>
Copied to clipboard
#container {
    visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}
/* sample-level styles */

 .center-align {
    text-align: center;
    padding: 20px;
}

.title {
    text-align: center;
    font-size: 20px;
    padding: 15px;
}

.sub-title {
    text-align: center;
    font-size: 16px;
    padding: 10px;
}

.center {
    text-align: center;
    display: none;
    font-size: 13px;
    font-weight: 400;
    margin-top: 20px;
}

#default-sidebar {
    background-color: rgb(25, 118, 210);
    color: #ffffff;
}

.close-btn:hover {
    /* csslint ignore:start */ 
    color: rgba(0, 0, 0, 0.87);
    background-color: #fafafa;
    /* csslint ignore:end */
}

#default-sidebar {
    visibility: hidden;
}
#default-sidebar.e-sidebar {
    visibility: visible;
}
/* sample-level styles */