Getting started with Angular Sidebar component

15 Mar 202324 minutes to read

This section briefly explains how to create a simple Sidebar component, and configure its available functionalities.

Prerequisites

To get started with Sidebar component, ensure the compatible versions of Angular and Typescript.

  • Angular : 4+
  • Typescript : 2.6+

Setting up angular project

Angular provides the easiest way to set angular CLI projects using Angular CLI tool.

Install the CLI application globally to your machine by using following command.

npm install -g @angular/cli
Create a new application
ng new syncfusion-angular-app

Navigate to the created project folder by using following command.

cd syncfusion-angular-app

Refer Syncfusion Angular Getting Started section to know more about setting up angular-cli project.

Adding Dependencies

Below dependency packages are required in order 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 get all the Angular Syncfusion package from npm link.

Currently, 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 mention the ngcc package in the package.json file, add the suffix -ngcc with the package version as below.

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

Note: If the ngcc tag is not specified while installing the package, the Ivy Library Package will be installed and this package will throw a warning.

Adding Styles

To render the Sidebar component, need to import Sidebar and its dependent component’s styles as given below in app.component.css.

@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 module

After installing the package, the sidebar component module is available to configure into your application from installed syncfusion package.

Refer to the following snippet to import the sidebar module in app.module.ts from the @syncfusion/ej2-angular-navigations.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

// Imported syncfusion sidebar module from navigations package
import { SidebarModule } from '@syncfusion/ej2-angular-navigations';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    // Registering EJ2 Sidebar Module
    SidebarModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Adding Syncfusion component

Add the sidebar component by using <ejs-sidebar> selector in template section of the app.component.ts file.

Refer the sidebar component snippet in app.component.ts as follows.

import { Component } from '@angular/core';

@Component({
  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>`,
  styleUrls: ['app/app.component.css']
 })
export class AppComponent {
}

Run the application

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

npm start

The following samples shows the sidebar component in browser.

import { Component, ViewChild } from '@angular/core';

@Component({
    selector: 'app-root',
    styleUrls: ['app/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.element.style.visibility = '';
    }
}
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { SidebarModule } from '@syncfusion/ej2-angular-navigations';

@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);

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 close the main content by covering with black backdrop overlay and focus only the Sidebar in screen. Sidebar can be rendered with specific width by setting width property

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

@Component({
    selector: 'app-root',
    styleUrls: ['app/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.element.style.visibility = '';
    }
    closeClick(): void {
        this.sidebar.hide();
    };

    toggleClick():void{
      this.sidebar.show();
    }
}
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { SidebarModule } from '@syncfusion/ej2-angular-navigations';

@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);

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. 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: Add the required Button and Radio Button component style dependency to app.component.css.

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

@Component({
    selector: 'app-root',
    styleUrls: ['app/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.element.style.visibility = '';
    }
    btnClick() {
        if (this.togglebtn.element.classList.contains('e-active')) {
            this.togglebtn.content = 'Open';
            this.sidebar.hide();
        } else {
            this.togglebtn.content = 'Close';
            this.sidebar.show();
        }
    }
    closeClick() {
        this.sidebar.hide();
        this.togglebtn.element.classList.remove('e-active');
        this.togglebtn.content = 'Open'
    }
    @ViewChild('radio')
    public radiobutton: RadioButtonComponent;
    public changeHandler(args: any): void {
        this.sidebar.position = (args.event.target.ej2_instances[0].label == "Left") ? "Left" : "Right";
    }
}
import { AppComponent } from './app.component';
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';

@NgModule({
    imports: [SidebarModule, ButtonModule, RadioButtonModule, 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);

Animate

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

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

@Component({
    selector: 'app-root',
    styleUrls: ['app/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.element.style.visibility = '';
    }
    closeClick(): void {
        this.sidebar.hide();
    };

    toggleClick():void{
      this.sidebar.toggle();
    }
}
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { SidebarModule } from '@syncfusion/ej2-angular-navigations';

@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);

Close on document click

Sidebar can be closed on document click by setting closeOnDocumentClick to true. If this property is not set, the Sidebar will not close on document click since its default value is false. Sidebar can be kept opened during rendering using isOpen property.

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

@Component({
    selector: 'app-root',
    styleUrls: ['app/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.element.style.visibility = '';
    }

    toggleClick():void{
      this.sidebar.show();
    }
}
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { SidebarModule } from '@syncfusion/ej2-angular-navigations';

@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);

Enable gestures

Expand or collapse the Sidebar while swiping in touch devices using enableGestures property. By default, enableGestures is set to true.

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

@Component({
    selector: 'app-root',
    styleUrls: ['app/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.element.style.visibility = '';
    }
    closeClick(): void {
        this.sidebar.hide();
    };

    toggleClick():void{
      this.sidebar.toggle();
    }
}
import { AppComponent } from './app.component';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { SidebarModule } from '@syncfusion/ej2-angular-navigations';

@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);

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