Drawer

The drawer is a component that adds collapsible side content to some primary content.

dev utility

The drawer is a component designed to add collapsible side content (often navigation, though it can be any content) alongside some primary content.

´ Loading interactive demo...
<dt-drawer-container class="drawer"> <dt-drawer #drawer opened>Drawer Content</dt-drawer> Main content </dt-drawer-container> <button dt-button (click)="drawer.toggle()">toggle drawer</button> export class DrawerDefaultExample {} <dt-drawer-container class="drawer"> <dt-drawer #drawer opened>Drawer Content</dt-drawer> Main content </dt-drawer-container> <button dt-button (click)="drawer.toggle()">toggle drawer</button> export class DrawerDefaultExample {}

Imports

You have to import the DtDrawerModule when you want to use the <dt-drawer> and <dt-drawer-container>. Note that you need Angular's BrowserAnimationsModule if you want to have animations or the NoopAnimationsModule if you don't.

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { DtDrawerModule } from '@dyntrace/angular-components';

@NgModule({
  imports: [BrowserAnimationsModule, DtDrawerModule],
})
class MyModule {}

To use the drawer in your template there are two tags. First of all you need the <dt-drawer-container> that wraps your drawer and the main content. Inside this container you can put the <dt-drawer> tag. Inside the drawer tag you can put the content that should be pushed to off-canvas.

Inputs

Name Type Default Description
mode 'side' | 'over' 'side' The behavior of the drawer, can overlay over or shrink the primary content.
position 'start' | 'end' 'start' Defines if the drawer is on the left or right side in a container. (A drawer container can only have one drawer per position.)
opened boolean false The actual open state of the drawer.

Outputs

Name Type Description
opened Observable<void> Event emitted when the drawer has been opened.
closed Observable<void> Event emitted when the drawer has been closed.
openChange EventEmitter<boolean> Emits when the drawer open state changes. Emits a boolean value for the open sate (true for open, false for close).

Methods

The following methods are on the DtDrawer class:

Name Description Return value
open Opens the drawer void
close Closes the drawer void
toggle toggles the drawer void

The container class DtDrawerContainer has follwing methods:

Name Description Return value
open Opens all the drawers in the container void
close Closes all the drawers in the container void

Examples

Over laying mode Drawer Example

´ Loading interactive demo...
<dt-drawer-container class="drawer"> <dt-drawer #drawer mode="over" position="start"> Drawer Content </dt-drawer> Main content </dt-drawer-container> <button dt-button (click)="drawer.toggle()">toggle drawer</button> export class DrawerOverExample {} <dt-drawer-container class="drawer"> <dt-drawer #drawer mode="over" position="start"> Drawer Content </dt-drawer> Main content </dt-drawer-container> <button dt-button (click)="drawer.toggle()">toggle drawer</button> export class DrawerOverExample {}

Dynamic Drawer Example

´ Loading interactive demo...
<dt-drawer-container class="drawer"> <dt-drawer *ngIf="drawerPresent" #drawer [mode]="mode" [position]="position" opened > Drawer Content </dt-drawer> Main content </dt-drawer-container> <button dt-button (click)="addOrRemoveDrawer()">add / remove drawer</button> <button dt-button color="secondary" [disabled]="!drawerPresent" (click)="toggle()" > toggle drawer </button> <dt-form-field> <dt-label>Select drawer mode:</dt-label> <dt-select [(value)]="mode"> <dt-option value="side" default>Side Mode</dt-option> <dt-option value="over">Over mode</dt-option> </dt-select> </dt-form-field> <dt-form-field> <dt-label>Select drawer position:</dt-label> <dt-select [(value)]="position"> <dt-option value="start">Start</dt-option> <dt-option value="end">End</dt-option> </dt-select> </dt-form-field> export class DrawerDynamicExample { drawerPresent = false; mode = 'side'; position = 'start'; @ViewChild('drawer', { static: false }) drawer: DtDrawer; addOrRemoveDrawer(): void { this.drawerPresent = !this.drawerPresent; } toggle(): void { this.drawer.toggle(); } } <dt-drawer-container class="drawer"> <dt-drawer *ngIf="drawerPresent" #drawer [mode]="mode" [position]="position" opened > Drawer Content </dt-drawer> Main content </dt-drawer-container> <button dt-button (click)="addOrRemoveDrawer()">add / remove drawer</button> <button dt-button color="secondary" [disabled]="!drawerPresent" (click)="toggle()" > toggle drawer </button> <dt-form-field> <dt-label>Select drawer mode:</dt-label> <dt-select [(value)]="mode"> <dt-option value="side" default>Side Mode</dt-option> <dt-option value="over">Over mode</dt-option> </dt-select> </dt-form-field> <dt-form-field> <dt-label>Select drawer position:</dt-label> <dt-select [(value)]="position"> <dt-option value="start">Start</dt-option> <dt-option value="end">End</dt-option> </dt-select> </dt-form-field> export class DrawerDynamicExample { drawerPresent = false; mode = 'side'; position = 'start'; @ViewChild('drawer', { static: false }) drawer: DtDrawer; addOrRemoveDrawer(): void { this.drawerPresent = !this.drawerPresent; } toggle(): void { this.drawer.toggle(); } }

Nested Drawer Example

´ Loading interactive demo...
<dt-drawer-container class="drawer"> <dt-drawer #outerDrawer mode="side"> Outer drawer content </dt-drawer> <h2>Hosting units</h2> <p>There can be some text before the second drawer will appear</p> <dt-drawer-container class="inner-drawer"> <dt-drawer #innerDrawer mode="over" position="end"> Inner drawer content </dt-drawer> I'm the content of the <b>inner</b> drawer <button dt-button (click)="innerDrawer.toggle()"> Toggle inner drawer </button> </dt-drawer-container> I'm the content of the <b>outer</b> drawer </dt-drawer-container> <button dt-button (click)="outerDrawer.toggle()"> Toggle outer drawer </button> export class DrawerNestedExample {} <dt-drawer-container class="drawer"> <dt-drawer #outerDrawer mode="side"> Outer drawer content </dt-drawer> <h2>Hosting units</h2> <p>There can be some text before the second drawer will appear</p> <dt-drawer-container class="inner-drawer"> <dt-drawer #innerDrawer mode="over" position="end"> Inner drawer content </dt-drawer> I'm the content of the <b>inner</b> drawer <button dt-button (click)="innerDrawer.toggle()"> Toggle inner drawer </button> </dt-drawer-container> I'm the content of the <b>outer</b> drawer </dt-drawer-container> <button dt-button (click)="outerDrawer.toggle()"> Toggle outer drawer </button> export class DrawerNestedExample {}