Custom context in Angular Sidebar component

12 Sep 20255 minutes to read

The Sidebar component allows flexible initialization to target any HTML container element alongside the main content of a web page, enabling customized layouts.

By default, the Sidebar targets the body element. The target property enables users to specify a custom HTML container, such as a div with a CSS selector (e.g., .main-content) or an HTMLElement, to initialize the Sidebar within a specific section of the page. For overlay-type Sidebars, the zIndex property (default: 1000) can be adjusted to control the stacking order relative to other elements.

import { ButtonModule } from '@syncfusion/ej2-angular-buttons'
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';
import { ButtonComponent } from "@syncfusion/ej2-angular-buttons";
@Component({
imports: [SidebarModule, ButtonModule, ],


standalone: true,
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    template: ` <ejs-sidebar id="default-sidebar" #sidebar [type]='type' [target]='target' (created)="onCreated($event)" style="visibility: hidden">
                    <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 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="center-align">
                            content goes here.
                        </div>
                    </div>
                </div>`
})
export class AppComponent {
    @ViewChild('sidebar') sidebar?: SidebarComponent;
    public type: string = 'Push';
    public target: string = '.content';
    @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'
    }
}
@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));

See Also