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.
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();
}
}
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-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>
#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 */