Getting Started with Angular Sidebar component

12 Sep 202524 minutes to read

This section explains the steps to create a simple Sidebar component and demonstrates the basic usage of the Angular Sidebar component in an Angular CLI application.

To get started quickly with the Angular Sidebar using CLI and Schematics, you can watch this video:

Setting up Angular project

Angular provides an efficient way to set up projects using the Angular CLI tool.

Install the CLI application globally on your machine with the following command:

npm install -g @angular/cli

Create an Angular Application

Create a new Angular application using the following Angular CLI command:

ng new syncfusion-angular-app

Navigate to the created project folder using the following command:

cd syncfusion-angular-app

Refer to the Syncfusion® Angular Getting Started section for more details on setting up an Angular CLI project.

Adding Dependencies

The following dependency packages are required to use the Sidebar component in your application:

|-- @syncfusion/ej2-angular-navigations
    |-- @syncfusion/ej2-base
    |-- @syncfusion/ej2-data
    |-- @syncfusion/ej2-angular-base
    |-- @syncfusion/ej2-navigations
        |-- @syncfusion/ej2-inputs
        |-- @syncfusion/ej2-lists
            |-- @syncfusion/ej2-splitbuttons
        |-- @syncfusion/ej2-popups
            |-- @syncfusion/ej2-buttons

Installing Syncfusion® Sidebar Package

Syncfusion® packages are distributed in npm as @syncfusion scoped packages. You can find all Angular Syncfusion® packages on npm here.

Syncfusion® provides two types of package structures for Angular components:

  1. Ivy library distribution package format
  2. Angular compatibility compiler (Angular’s legacy compilation and rendering pipeline) package.

Ivy library distribution package

Syncfusion® Angular packages(>=20.2.36) has been moved to the Ivy distribution to support the Angular Ivy rendering engine and the package are compatible with Angular version 12 and above. To download the package use the below command.

Add @syncfusion/ej2-angular-navigations package to the application.

npm install @syncfusion/ej2-angular-navigations --save

Angular compatibility compiled package(ngcc)

For Angular version below 12, you can use the legacy (ngcc) package of the Syncfusion® Angular components. To download the ngcc package use the below.

Add @syncfusion/ej2-angular-navigations@ngcc package to the application.

npm install @syncfusion/ej2-angular-navigations@ngcc --save

To specify the ngcc package in the package.json file, add the suffix -ngcc to the package version as follows:

@syncfusion/ej2-angular-navigations:"20.2.38-ngcc"

Note: If the ngcc tag is not specified during installation, the Ivy Library Package will be installed and may throw a warning.

Adding Styles

To render the Sidebar component, import the Sidebar and its dependent components’ styles in src/styles.css as follows:

@import '../node_modules/@syncfusion/ej2-base/styles/material.css';
@import '../node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';

Alternatively, based on the location of your CSS file, you can import the styles as shown below:

@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';

Note: If you want to refer the combined component styles, please make use of our CRG (Custom Resource Generator) in your application.

Adding Sidebar component

Add the Sidebar component using the <ejs-sidebar> selector in the template section of the src/app/app.component.ts file. The SidebarModule must be imported to enable the component’s functionality.

Refer to the Sidebar component snippet in app.component.ts as follows:

import { SidebarModule } from '@syncfusion/ej2-angular-navigations'
import { Component, ViewChild } from '@angular/core';

@Component({
  imports: [SidebarModule],
  standalone: true,
  selector: 'app-root',
  template: ` <ejs-sidebar id="default-sidebar" >
                <div class="title"> Sidebar content</div>
              </ejs-sidebar>
              <div>
                <div class="title">Main content</div>
                <div class="sub-title">
                    Content goes here.
                </div>
              </div>`,
})
export class AppComponent { }

Run the application

Use the npm run start command to run the application in the browser.

ng serve --open

The following sample demonstrates the Sidebar component in the browser:

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
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 (created)="onCreated($event)" style="visibility: hidden">
                    <div class="title"> Sidebar content</div>
                </ejs-sidebar>
                <div>
                    <div class="title">Main content</div>
                    <div class="sub-title">
                        Content goes here.
                    </div>
                </div>`
})
export class AppComponent {
    @ViewChild('sidebar') sidebar?: SidebarComponent;
    public onCreated(args: any) {
        (this.sidebar as SidebarComponent).element.style.visibility = '';
    }
}
@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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Note: The ViewChild property need two parameters in Angular 7+, use this @ViewChild(ChildDirective,{static: false}) syntax in Angular 7+.

Enable backdrop

Enabling the showBackdrop in the Sidebar component will prevent the main content from user interactions, when it is in expanded state.
Here, DOM elements will not get changed. It only closes the main content by covering it with a black backdrop overlay and focuses only on the Sidebar on the screen. Sidebar can be rendered with specific width by setting width property.

NOTE

To achieve a proper backdrop, we suggest that you create a wrapper parent container for the div block in which you intend to enable the backdrop. Set the class name of this parent container as the target for the Sidebar. Alternatively, you can place an empty div container after the target container.

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
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 (created)="onCreated($event)" style="visibility: hidden" [width]="width" [showBackdrop]="showBackdrop" [closeOnDocumentClick]="closeOnDocumentClick">
                    <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 class="title">Main content</div>
                    <div class="sub-title"> Click the button to open/close the Sidebar.</div>
                    <div style="padding:20px" class="center-align">
                        <button ejs-button id="toggle" class="e-btn e-info" (click)="toggleClick()">Toggle Sidebar</button>
                    </div>
                </div>`
})
export class AppComponent {
    @ViewChild('sidebar') sidebar?: SidebarComponent;
    public showBackdrop: boolean = true;
    public type: string = 'Push';
    public width: string ='280px';
    public closeOnDocumentClick: boolean = true;
    public onCreated(args: any) {
        (this.sidebar as SidebarComponent).element.style.visibility = '';
    }
    closeClick(): void {
        this.sidebar?.hide();
    };

    toggleClick():void{
      this.sidebar?.show();
    }
}
@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));

Configure sidebar position

Positioning the Sidebar to the right or left of the main content can be achieved by using the position property. If the position is not set, the Sidebar will expand from the left to the body element. The enablePersistence will persist the component’s state between page reloads. change event will be triggered when the state(expand/collapse) of the component is changed.

Note: Include the required Button and Radio Button component style dependencies in styles.css.

import { ButtonModule, RadioButtonModule } from '@syncfusion/ej2-angular-buttons'
import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
import { SidebarModule } from '@syncfusion/ej2-angular-navigations'



import { SidebarComponent } from '@syncfusion/ej2-angular-navigations';
import { ButtonComponent, RadioButtonComponent } from "@syncfusion/ej2-angular-buttons";
import { Component, ViewChild } from '@angular/core';

@Component({
imports: [SidebarModule, ButtonModule, RadioButtonModule, ],


standalone: true,
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    template: `  <ejs-sidebar id="default-sidebar" #sidebar [type]='type' [enablePersistence]='enablePersistence' (created)="onCreated($event)" style="visibility: hidden" [target]='target'>
                        <div class="title"> Sidebar content</div>
                        <div class="sub-title">
                            Click the button to close the Sidebar.
                        </div>
                        <div class="center-align">
                            <button ej-button id="close" (click)="closeClick()" class="e-btn close-btn">Close Sidebar</button>
                        </div>
                    </ejs-sidebar>
                    <div id="head">
                        <button ejs-button id="toggle" #togglebtn cssClass="e-flat" iconCss="e-icons burg-icon" isToggle="true"
                            (click)="btnClick()" content="Open"></button>
                    </div>
                    <div id="maincontent" class="content">

                        <div>
                            <div class="title">Main content</div>
                            <div class="rows">
                                <div class="row">
                                    <ejs-radiobutton id='left' #radio label="Left" name="position" checked="true"
                                        (change)="changeHandler($event)"></ejs-radiobutton>
                                </div>
                                <div class="row">
                                    <ejs-radiobutton id='right' #radio label="Right" name="position" (change)="changeHandler($event)">
                                    </ejs-radiobutton>
                                </div>
                            </div>
                        </div>
                    </div>`
})
export class AppComponent {
    @ViewChild('sidebar') sidebar?: SidebarComponent;
    public type: string = 'Push';
    public target: string = 'content';
    public enablePersistence: boolean = true;
    @ViewChild('togglebtn')
    public togglebtn?: ButtonComponent;
    public onCreated(args: any) {
        (this.sidebar as SidebarComponent).element.style.visibility = '';
    }
    btnClick() {
        if ((this.togglebtn as ButtonComponent).element.classList.contains('e-active')) {
            (this.togglebtn as ButtonComponent).content = 'Open';
            this.sidebar?.hide();
        } else {
            (this.togglebtn as ButtonComponent).content = 'Close';
            this.sidebar?.show();
        }
    }
    closeClick() {
        this.sidebar?.hide();
        (this.togglebtn as ButtonComponent).element.classList.remove('e-active');
        (this.togglebtn as ButtonComponent).content = 'Open'
    }
    @ViewChild('radio')
    public radiobutton?: RadioButtonComponent;
    public changeHandler(args: any): void {
        (this.sidebar as SidebarComponent).position = (args.event.target.ej2_instances[0].label == "Left") ? "Left" : "Right";
    }
}
@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));

Enable Sidebar animation

Animation transitions for expanding or collapsing the Sidebar can be enabled using the animate property. By default, animate property is set to true. enableRTL will display the Sidebar in a right-to-left direction.

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
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 (created)="onCreated($event)" style="visibility: hidden" [animate]="animate" [enableRtl]="enableRtl">
                    <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 class="title">Main content</div>
                    <div class="sub-title"> Click the button to open/close the Sidebar.</div>
                    <div style="padding:20px" class="center-align">
                        <button ejs-button id="toggle" class="e-btn e-info" (click)="toggleClick()">Toggle Sidebar</button>
                    </div>
                </div>`
})
export class AppComponent {
    @ViewChild('sidebar') sidebar?: SidebarComponent;
    public animate: boolean = false;
    public enableRtl: boolean = true;
    public type: string = 'Push';
    public onCreated(args: any) {
        (this.sidebar as SidebarComponent).element.style.visibility = '';
    }
    closeClick(): void {
        this.sidebar?.hide();
    };

    toggleClick():void{
      this.sidebar?.toggle();
    }
}
@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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Close on document click

The Sidebar can be configured to close when clicking outside it by setting the closeOnDocumentClick property to true (default: false). To keep the Sidebar open on initial render, use the isOpen property (default: false).

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
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 (created)="onCreated($event)" style="visibility: hidden" [closeOnDocumentClick]="closeOnDocumentClick" [isOpen]="isOpen">
                    <div class="title"> Sidebar content</div>
                </ejs-sidebar>
                <div>
                    <div class="title">Main content</div>
                    <div class="sub-title"> Click the button to open the Sidebar.</div>
                    <div style="padding:20px" class="center-align">
                        <button ejs-button id="toggle" class="e-btn e-info" (click)="toggleClick()">Open Sidebar</button>
                    </div>
                </div>`
})
export class AppComponent {
    @ViewChild('sidebar') sidebar?: SidebarComponent;
    public isOpen: boolean = true;
    public closeOnDocumentClick: boolean = true;
    public type: string = 'Push';
    public onCreated(args: any) {
        (this.sidebar as SidebarComponent).element.style.visibility = '';
    }

    toggleClick():void{
      this.sidebar?.show();
    }
}
@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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Enable gestures

The Sidebar can be Expanded or collapsed by swiping on touch devices using enableGestures property. By default, enableGestures is set to true.

import { BrowserModule } from '@angular/platform-browser'
import { NgModule } from '@angular/core'
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 (created)="onCreated($event)" style="visibility: hidden" [enableGestures]="enableGestures" >
                    <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 class="title">Main content</div>
                    <div class="sub-title"> Click the button to open/close the Sidebar.</div>
                    <div style="padding:20px" class="center-align">
                        <button ejs-button id="toggle" class="e-btn e-info" (click)="toggleClick()">Toggle Sidebar</button>
                    </div>
                </div>`
})
export class AppComponent {
    @ViewChild('sidebar') sidebar?: SidebarComponent;
    public enableGestures: boolean = false;
    public type: string = 'Push';
    public onCreated(args: any) {
        (this.sidebar as SidebarComponent).element.style.visibility = '';
    }
    closeClick(): void {
        this.sidebar?.hide();
    };

    toggleClick():void{
      this.sidebar?.toggle();
    }
}
@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 { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

You can refer to our Angular Sidebar feature tour page for its groundbreaking feature representations. You can also explore our Angular Sidebar example that shows how to render the Sidebar in Angular.

See Also