Open and close the Angular Sidebar component
12 Sep 20256 minutes to read
The Sidebar component can be programmatically opened or closed using its public methods, enabling dynamic control in response to user interactions or application logic. These methods are accessible via a ViewChild
reference to the Sidebar instance in an Angular component.
Sidebar Control Methods
The following methods control the Sidebar’s visibility, updating its isOpen
property.
-
show()
: Opens the Sidebar, settingisOpen
totrue
. Useful for displaying the Sidebar on user actions like button clicks. -
hide()
: Closes the Sidebar, settingisOpen
tofalse
. Ideal for hiding the Sidebar when navigating away or completing an action. -
toggle()
: Toggles the Sidebar between open and closed states, switching theisOpen
value. Suitable for interactive elements like toggle buttons.
The following sample demonstrates a Sidebar toggled via a button using the toggle()
method.
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 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-lists/styles/material.css';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));