How to get started easily with Syncfusion Angular 7 Sidebar?

How to get started easily with Syncfusion Angular 7 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 7 application with its commonly used features.

Prerequisites

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

• Node.js (latest version)
• Angular
• Angular CLI
• Visual studio code for editor

Installation and application creation

1. ​Install Angular cli 7 using the following command.
   

   npm install -g @angular/cli@7.0.5

2. Create an Angular 7 application using Angular cli.
   

   ng new angular7-app

   cd angular7-app

3. Serve the Angular 7 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 7 version.

Integration of Angular Sidebar

1. After running the Angular 7 application successfully, configure the Angular Sidebar in this application. Install Angular Sidebar and EJ2 package using the following command. The —save command instructs the NPM to include the navigations package that contains the Sidebar control inside the dependencies section of the package.json.
   

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

   npm install @syncfusion/ej2 --save 

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.

     If you are using lower version than Angular 8, then follow the below code snippet to take the

     ViewChild reference of Sidebar Component.

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.

Also, refer to the documentation and online samples for more details on Sidebar control.

If you have any queries or require clarifications, 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!