Angular Drawer - Getting Started

NOTE
Before you start the tutorial, ensure DevExtreme is installed in your Angular, Vue, React, or jQuery application.

The Drawer is a dismissible or permanently visible panel used for navigation in responsive web application layouts.

DevExtreme supplies application templates for Angular, Vue, and React. They implement a responsive layout that uses the Drawer. You can use these templates instead of following the tutorial. Refer to the following articles for more information:

If the templates are unsuitable or you use jQuery, follow the instructions in this tutorial. We create a Drawer that allows a user to switch between pages. The Drawer is opened and closed via a button on a toolbar.

Refer to the sections below for details on each configuration step. You can also find the full code in the following GitHub repository: getting-started-with-drawer.

Create the Drawer

Wrap the view in the Drawer and specify a template for the Drawer's content. Inside the template, set the Drawer's width. You can use the nested UI component's width property for this (see Implement Navigation), but in this tutorial, we use the width CSS property. The Drawer's height adjusts to the view's height (specified via the height property).

In addition, you can specify the minSize property to make the Drawer partially visible in the closed state.

app.component.html
app.component.ts
app.module.ts
app.component.css
  • <dx-drawer
  • template="template"
  • [height]="250"
  • [minSize]="37">
  • <div *dxTemplate="let data of 'template'">
  • <div style="width: 150px">Drawer content</div>
  • </div>
  • <div>View content</div>
  • </dx-drawer>
  • import { Component } from "@angular/core";
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  •  
  • export class AppComponent {
  •  
  • }
  • import { BrowserModule } from "@angular/platform-browser";
  • import { NgModule } from "@angular/core";
  • import { AppComponent } from "./app.component";
  •  
  • import { DxDrawerModule } from "devextreme-angular";
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • BrowserModule,
  • DxDrawerModule
  • ],
  • providers: [],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }
  • ::ng-deep .dx-overlay-content {
  • background-color: lightgray;
  • }
  • ::ng-deep #view {
  • margin-left: 10px;
  • margin-top: 10px;
  • }

If you run the code, you should see a partially visible Drawer and a view that displays View content.

NOTE
The Drawer UI component is not designed to contain another Drawer. Do not use nested Drawers to avoid possible issues in your application.

Open and Close the Drawer

Depending on the library or framework you use, call the toggle() method or bind the opened property to a component property.

In the following code, a toolbar button outside the Drawer opens and closes it:

app.component.html
app.component.ts
app.module.ts
app.component.css
  • <dx-toolbar id="toolbar">
  • <dxi-item
  • widget="dxButton"
  • [options]="buttonOptions"
  • location="before">
  • </dxi-item>
  • </dx-toolbar>
  • <dx-drawer ...
  • [(opened)]="isDrawerOpen">
  • <div>View content</div>
  • </dx-drawer>
  • import { Component } from "@angular/core";
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  •  
  • export class AppComponent {
  • isDrawerOpen: Boolean = false;
  • buttonOptions: any = {
  • icon: "menu",
  • onClick: () => {
  • this.isDrawerOpen = !this.isDrawerOpen;
  • }
  • }
  • }
  • // ...
  • import { DxDrawerModule, DxToolbarModule } from "devextreme-angular";
  •  
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • // ...
  • DxDrawerModule,
  • DxToolbarModule,
  • ],
  • providers: [],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }
  • /* ... */
  • ::ng-deep #toolbar {
  • background-color: rgba(191, 191, 191, .15);
  • padding: 5px 10px;
  • }
  • ::ng-deep .dx-toolbar-button .dx-button {
  • background-color: rgba(191, 191, 191, -0.15);
  • border: none;
  • }
  • ::ng-deep .dx-toolbar-button > .dx-toolbar-item-content {
  • margin-left: -7px;
  • }

Implement Navigation

The Drawer is designed to contain navigation items. If they should nest other items, use the TreeView UI component to implement navigation. Otherwise, use the List, as done in this tutorial.

Each list item should navigate to a different view. To implement this, follow the steps below:

  1. Configure routing

    Specify routes and set up the router in the AppRountingModule.

  2. Define an itemTemplate

    Specify the elements that the template should render and wrap them in an element with the RouterLink directive. In the code below, the "links" itemTemplate renders an icon and text.

  3. Enable item selection

    Set the selectionMode to "single". If you use the TreeView, you should also set the selectByClick property to true. In the onSelectionChanged event handler, close the Drawer.

app.component.html
app.component.ts
app.component.css
app-routing.module.ts
app.module.ts
inbox.component.ts
sent-mail.component.ts
spam.component.ts
trash.component.ts
  • <dx-drawer ... >
  • <div *dxTemplate="let data of 'template'">
  • <dx-list
  • [items]="navigation"
  • [width]="200"
  • selectionMode="single"
  • (onSelectionChanged)="this.isDrawerOpen = false"
  • itemTemplate="links">
  • <div *dxTemplate="let link of 'links'">
  • <a [routerLink]="['/' + link.path]">
  • <div>
  • <div class="dx-list-item-icon-container">
  • <i class="dx-icon dx-list-item-icon dx-icon-{{link.icon}}"></i>
  • </div>
  • <span>{{ link.text }}</span>
  • </div>
  • </a>
  • </div>
  • </dx-list>
  • </div>
  • <div id="view">
  • <router-outlet></router-outlet>
  • </div>
  • </dx-drawer>
  • import { Component } from "@angular/core";
  •  
  • @Component({
  • selector: 'app-root',
  • templateUrl: './app.component.html',
  • styleUrls: ['./app.component.css']
  • })
  • export class AppComponent {
  • navigation: any[] = [
  • { id: 1, text: "Inbox", icon: "message", path: "inbox" },
  • { id: 2, text: "Sent Mail", icon: "check", path: "sent-mail" },
  • { id: 3, text: "Trash", icon: "trash", path: "trash" },
  • { id: 4, text: "Spam", icon: "mention", path: "spam" }
  • ];
  • isDrawerOpen: Boolean = false;
  • }
  • /* ... */
  • ::ng-deep .dx-list-item-icon {
  • margin-right: 10px;
  • }
  • import { NgModule } from "@angular/core";
  • import { Routes, RouterModule } from "@angular/router";
  • import { InboxComponent } from "./views/inbox.component";
  • import { SentMailComponent } from "./views/sent-mail.component";
  • import { TrashComponent } from "./views/trash.component";
  • import { SpamComponent } from "./views/spam.component";
  •  
  • const routes: Routes = [
  • { path: '', redirectTo: '/inbox', pathMatch: 'full' },
  • { path: 'inbox', component: InboxComponent },
  • { path: 'sent-mail', component: SentMailComponent },
  • { path: 'trash', component: TrashComponent },
  • { path: 'spam', component: SpamComponent },
  • ];
  •  
  • @NgModule({
  • imports: [RouterModule.forRoot(routes)],
  • exports: [RouterModule],
  • declarations: [
  • InboxComponent,
  • SentMailComponent,
  • TrashComponent,
  • SpamComponent
  • ]
  • })
  • export class AppRoutingModule { }
  • import { AppRoutingModule } from "./app-routing.module";
  • import { DxDrawerModule, DxToolbarModule, DxListModule } from "devextreme-angular";
  • // ...
  • @NgModule({
  • declarations: [
  • AppComponent
  • ],
  • imports: [
  • // ...
  • AppRoutingModule,
  • DxDrawerModule,
  • DxToolbarModule,
  • DxListModule
  • ],
  • providers: [],
  • bootstrap: [AppComponent]
  • })
  • export class AppModule { }
  • import { Component } from "@angular/core";
  •  
  • @Component({
  • selector: 'app-inbox',
  • template: '<div>Inbox</div>'
  • })
  • export class InboxComponent { constructor() { } }
  • import { Component } from "@angular/core";
  •  
  • @Component({
  • selector: 'app-sent-mail',
  • template: '<div>Sent Mail</div>'
  • })
  • export class SentMailComponent { constructor() { } }
  • import { Component } from "@angular/core";
  •  
  • @Component({
  • selector: 'app-spam',
  • template: '<div>Spam</div>'
  • })
  • export class SpamComponent { constructor() { } }
  • import { Component } from "@angular/core";
  •  
  • @Component({
  • selector: 'app-trash',
  • template: '<div>Trash</div>'
  • })
  • export class TrashComponent { constructor() { } }

Run the code, open the Drawer, and click its items to change the views.

Configure the Reveal Behavior

When you open the Drawer, it can slide in or expand from the closed position. Use the revealMode property to specify this behavior.

app.component.html
  • <dx-drawer ...
  • revealMode="expand">
  • </dx-drawer>

Run the code and open the Drawer. You should see that the UI component gets wider, but its content stays in place, creating an impression that the Drawer expands.

Configure Interaction with the View

When the Drawer opens, it can overlap, shrink, or partially displace the view, depending on the openedStateMode property:

app.component.html
  • <dx-drawer ...
  • openedStateMode="overlap">
  • </dx-drawer>

Run the code, open the Drawer and you should see that it overlaps the view's text.

Change the Position

You can use the position property to anchor the Drawer to any side of the view. In this tutorial, the Drawer is in its default position (left).

You have configured basic Drawer features. For more information about this UI component, explore the following resources: