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.

The following methods control the Sidebar’s visibility, updating its isOpen property.

  • show(): Opens the Sidebar, setting isOpen to true. Useful for displaying the Sidebar on user actions like button clicks.
  • hide(): Closes the Sidebar, setting isOpen to false. Ideal for hiding the Sidebar when navigating away or completing an action.
  • toggle(): Toggles the Sidebar between open and closed states, switching the isOpen 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));