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,
- Ivy library distribution package format
- 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.