Open and close the sidebar in Angular Sidebar component
27 Apr 20245 minutes 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.
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-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 the Sidebar.
<div style="padding:20px" class="center-align">
<button ejs-button id="open" class="e-btn e-info" (click)="openClick()">Open Sidebar</button>
</div>
</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>`
})
export class AppComponent {
@ViewChild('sidebar') sidebar?: SidebarComponent;
public open(args: any) {
console.log("Sidebar Opened");
}
public close(args: any) {
console.log("Sidebar Closed");
}
openClick() {
this.sidebar?.show();
}
toggleClick() {
this.sidebar?.toggle();
}
closeClick() {
this.sidebar?.hide();
}
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));