Drawer

´ 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 DefaultDrawerExampleComponent { } <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 DefaultDrawerExampleComponent { }

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

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 OverDrawerExampleComponent { } <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 OverDrawerExampleComponent { }

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 DynamicDrawerExampleComponent { drawerPresent = false; mode = 'side'; position = 'start'; @ViewChild('drawer', { static: true }) 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 DynamicDrawerExampleComponent { drawerPresent = false; mode = 'side'; position = 'start'; @ViewChild('drawer', { static: true }) 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 NestedDrawerExampleComponent { } <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 NestedDrawerExampleComponent { }