Auto close in Angular Sidebar component

12 Sep 20255 minutes to read

The Sidebar component supports responsive auto-close behavior, allowing it to automatically open or close based on screen resolution. This is configured using the mediaQuery property (default: null), which accepts a string (e.g., "max-width: 400px") or MediaQueryList to control the Sidebar’s state.

Configuring Auto-Close with Media Queries

The mediaQuery property uses CSS media query syntax to determine when the Sidebar should be open or closed, based on the viewport size. For example, setting mediaQuery to "max-width: 400px" with isOpen set to true keeps the Sidebar open on screens narrower than 400px.

Note: The window.matchMedia() method returns the object of parsed media query string. The value of matchMedia() can be any of the media features of a CSS @media rule. For example, min-width and max-width.

Example: General Auto-Close Configuration

The following sample demonstrates the Sidebar with a custom mediaQuery to control its open or closed state based on screen resolution.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SidebarModule } from '@syncfusion/ej2-angular-navigations'




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

@Component({
imports: [
        
        SidebarModule
    ],


standalone: true,
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    template: ` <ejs-sidebar id="default-sidebar" #sidebar [width]="width" [mediaQuery]= "mediaQuery" [closeOnDocumentClick]='colseOnDocumentClick'>
                    <div class="title"> Sidebar content</div>
                </ejs-sidebar>
                <div>
                    <div class="title">Main content</div>
                    <div class="sub-title">
                        Sidebar will collapse and expand in based on screen resolution automatically
                    </div>
                </div>`
})
export class AppComponent {
    public width: string = '280px';
    public mediaQuery: object = window.matchMedia('(min-width: 600px)');
colseOnDocumentClick: any;
}

styles.css

@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';

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));

Example: Auto-Close Below 400px

• In the following sample,the Sidebar will be in expanded state only in resolution below 400px.

Note: The max-width media feature specifies the maximum width of the viewport, ensuring the Sidebar adapts to smaller displays.

app.component.ts

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { SidebarModule } from '@syncfusion/ej2-angular-navigations'




import { Component } from '@angular/core';
@Component({
imports: [
        
        SidebarModule
    ],


standalone: true,
    selector: 'app-root',
    styleUrls: ['./app.component.css'],
    template: ` <ejs-sidebar id="default-sidebar" #sidebar [width]="width" [mediaQuery]= "mediaQuery" [closeOnDocumentClick]='colseOnDocumentClick'>
                    <div class="title"> Sidebar content</div>
                </ejs-sidebar>
                <div>
                    <div class="title">Main content</div>
                    <div class="sub-title">
                        Sidebar will collapse and expand in based on screen resolution automatically
                    </div>
                </div>`
})
export class AppComponent {
    public width: string = '280px';
    public mediaQuery: object = window.matchMedia('(max-width: 400px)');
colseOnDocumentClick: any;
}

styles.css

@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';

main.ts

import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));