Search results

Auto Close in Angular Sidebar component

21 Oct 2021 / 2 minutes to read

The Sidebar often behaves differently on mobile display and differently on desktop display. It has an effective feature that offers to set it in 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 CSS @media rule. For example, min-width and max-width.

Source
Preview
app.component.ts
app.module.ts
main.ts
app.component.html
app.component.css
Copied to clipboard
import { Component } from '@angular/core';

@Component({
    selector: 'app-root',
    styleUrls: ['app/app.component.css'],
    templateUrl: 'app/app.component.html'
})
export class AppComponent {
    public width: string = '280px';
    public mediaQuery: object = window.matchMedia('(min-width: 600px)');
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SidebarModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        SidebarModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<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>
<!--end of main content declaration -->
Copied to clipboard
.center-align {
    text-align: center;
    padding: 14px;
}

.title {
    text-align: center;
    font-size: 20px;
    padding: 15px;
}

.sub-title {
    text-align: center;
    font-size: 14px;
    padding: 10px;
}

.center {
    text-align: center;
    display: none;
    font-size: 13px;
    font-weight: 400;
    margin-top: 20px;
}

body {
    margin: 0px;
}

#default-sidebar {
    background-color: rgb(25, 118, 210);
    color: #ffffff;
}

.close-btn:hover {
    color: #fafafa;
}
  • In the following sample,the Sidebar will be in expanded state only in resolution below 400px.

max-width is one of media feature which represents maximum with of display area such as width of the view port.

Source
Preview
app.component.ts
app.module.ts
main.ts
app.component.html
Copied to clipboard
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
styleUrls: ['app/app.component.css'],
templateUrl: 'app/app.component.html'
})
export class AppComponent {
public width: string = '280px';
public mediaQuery: object = window.matchMedia('(max-width: 400px)');
}
Copied to clipboard
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { SidebarModule } from '@syncfusion/ej2-angular-navigations';
import { AppComponent } from './app.component';

/**
 * Module
 */
@NgModule({
    imports: [
        BrowserModule,
        SidebarModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
export class AppModule { }
Copied to clipboard
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { enableProdMode } from '@angular/core';
import { AppModule } from './app.module';

enableProdMode();
platformBrowserDynamic().bootstrapModule(AppModule);
Copied to clipboard
<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>
<!--end of main content declaration -->