Auto close in Angular Sidebar component

7 Jan 20255 minutes to read

The Sidebar often behaves differently on mobile displays compared to desktop displays. It has an effective feature that allows you to set it in an opened or closed state depending on the specified screen resolution.
This functionality can be achieved through mediaQuery property that allows you to set the Sidebar in an expanded state or collapsed state only in user-defined resolution.

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.

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

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

max-width is one of the media features which represents the maximum width of the display area, such as the width of the viewport.

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