HelpBot Assistant

How can I help you?

Custom context in Angular Sidebar component

10 Sep 20256 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/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material3.css';
@import 'node_modules/@syncfusion/ej2-angular-buttons/styles/material3.css';
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

See Also