How to get started easily with Syncfusion Angular 11 Sidebar?

The Essential JS 2 Sidebar is an expandable and collapsible component that typically acts as a side container to place primary or secondary content along the main content. It provides flexible options to be shown and hidden based on user interactions. Any type of HTML content or component such as quick references, menus, lists, and tree views can be placed in the sidebar for quick access and for easy navigation.

This KB article explains how to easily integrate Syncfusion Angular Sidebar in an Angular 11 application with its commonly used features.

Prerequisites

Before starting, you need the following items to create Angular Sidebar in an Angular 11 application:

• Node.js (latest version)
• Angular 11
• Angular CLI
• Typescript 4+
• Visual Studio Code for Editor

Installation and application creation

1. Install Angular cli 11 using the following command.

npm install -g @angular/cli@11.2.3

2. Create an Angular 11 application using Angular cli.

ng new angular11-app

cd angular11-app

3. Serve the Angular 11 application using the following command.

ng serve 

Listen to the application in localhost:4200. Your application will serve in browser. Refer to the following screenshot for Angular 11 version.

Integration of Angular Sidebar

1. After running the Angular 11 application successfully, configure the Angular Sidebar in this application. Install Angular Sidebar and EJ2 package using the following command. 

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

npm install @syncfusion/ej2 --save

The --save command instructs the NPM to include the navigations package that contains the Sidebar control inside the dependencies section of the package.json.

2. Import SidebarModule from installed package in app/app.module.ts.

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

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

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

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

 

     @NgModule({

       declarations: [

         AppComponent

       ],

       imports: [

         BrowserModule,

         SidebarModule

       ], 

       bootstrap: [AppComponent]

     })

     export class AppModule { }

3. Refer the CSS file for Angular Sidebar Layout in style.CSS.

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

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

4. Add the Angular Sidebar component in app.component.html.

    <!--sidebar content declaration -->

    <ejs-sidebar id="default-sidebar" #sidebar [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> 

    <!--end of sidebar content declaration -->

    <!--main content declaration -->

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

    <!--end of main content declaration -->

Here, the content to be displayed in the sidebar is defined inside the control and the main content to be placed outside the sidebar is defined below the sidebar declaration. The above code snippet renders a simple sidebar. The required controls and elements can be rendered and customized.

The functionalities such as closeOnDocumentClick and showBackdrop are used here. You can also use other functionalities like enableDock, position, type, etc.

5. Now, creating a Sidebar component instance in app.component.ts file.

If you are using the Angular 8 version, then follow the below code snippet to take the ViewChild reference of Sidebar Component.

@ViewChild('sidebar', {static: false}) sidebar: SidebarComponent;

If you are using lower version than Angular 9, then follow the below code snippet to take the ViewChild reference of Sidebar Component.

@ViewChild('sidebar') sidebar: SidebarComponent;

6. Now, define the closeOnDocumentClick and showBackdrop for sidebar, and the click events for buttons are rendered inside the sidebar in app.component.ts.

     export class AppComponent implements OnInit {

              public showBackdrop: boolean = true;

              public closeOnDocumentClick: boolean = true;

 

              closeClick(): void {

                  this.sidebar.hide();

              };

 

              toggleClick():void{

                this.sidebar.show();

              } 

     }

7. Now, add the required styles for the elements rendered in the sidebar.

     .center-align {

        text-align: center;

        padding: 20px;

    }

 

    .title {

        text-align: center;

        font-size: 20px;

        padding: 15px;

    }

 

    .sub-title {

        text-align: center;

        font-size: 16px;

        padding: 10px;

    }

 

    .center {

        text-align: center;

        display: none;

        font-size: 13px;

        font-weight: 400;

        margin-top: 20px;

    }

 

    .right {

        float: right;

    }

 

    body {

        margin: 0;

    }

 

    #default-sidebar {

        background-color: rgb(25, 118, 210);

        color: #ffffff;

    }

 

    .close-btn:hover {

        color: #fafafa;

    }

8. Now, serve the application using the following command.

ng serve 

After all the files have been compiled successfully, it will serve the site at localhost:4200.

The following screenshot illustrates this.

Summary

The runnable sample application prepared from the above steps has been committed in this location. You can check the features of Angular Sidebar.

Refer to our documentation and online samples for more features. If you have any queries, please let us know in comments below. You can also contact us through our Support forum or Direct-Trac. We are happy to assist you!