API

Learn Better Drawer's API.

Anatomy

Better Drawer is made up of several attribute directives. Import all parts and piece them together.

import { Component, model } from '@angular/core';
import { 
  BetterDrawerContent,
  BetterDrawerCloseButton,
  BetterDrawerOverlay,
  BetterDrawerPortal,
  BetterDrawerRoot,
  BetterDrawerTitle,
  BetterDrawerTrigger,
} from 'better-drawer';

@Component({
  selector: 'app-my-drawer',
  imports: [
    BetterDrawerContent, 
    BetterDrawerCloseButton,
    BetterDrawerOverlay, 
    BetterDrawerPortal,
    BetterDrawerRoot, 
    BetterDrawerTitle,
    BetterDrawerTrigger, 
  ],
  template: '
    <div bdDrawerRoot [(open)]="openDrawer">
      <button type="button" bdDrawerTrigger>
        Open Drawer
      </button>
      <ng-template bdDrawerPortal>
        @if (openDrawer()) {
          <div bdDrawerOverlay></div>
          <div bdDrawerContent>
              <button bdDrawerCloseButton aria-label="Close drawer"></button>
              <h2 bdDrawerTitle></h2>
          </div>
        }
      </ng-template>
    </div>
  ',
})
export class MyDrawer {
  protected openDrawer = model(false);
}

bdDrawerRoot

Directive that controls the root of the drawer. You need to set the [(open)] two-way binding to control the open state of the drawer.

<!-- my-drawer.ts -->
protected openDrawer = model(false);

<!-- my-drawer.html -->
<div bdDrawerRoot [(open)]="openDrawer">
  <!-- place your drawer trigger and content parts here -->
</div>

bdDrawerTrigger

Attribute directive that controls the element that opens the drawer, usually a button.

<!-- my-drawer.html -->
<!-- inside your drawer root -->
<button bdDrawerTrigger type="button">...</button>

bdDrawerPortal

Optional attribute directive that portals your overlay and content parts into the body.

<!-- my-drawer.ts -->
protected openDrawer = model(false);

<!-- my-drawer.html -->
<!-- inside your drawer root -->
<ng-template bdDrawerPortal>
  <!-- overlay and content parts -->
</ng-template>

bdDrawerOverlay

Attribute directive that controls a layer that covers the inert portion of the view when the drawer is open.

<!-- my-drawer.ts -->
protected openDrawer = model(false);

<!-- my-drawer.html -->
<!-- inside your drawer root -->
@if (openDrawer()) {
    <div bdDrawerOverlay></div>
    <!-- content part -->
}

bdDrawerContent

Attribute directive that controls the content to be rendered in the opened drawer.
You need to set the styles accordingly in order to reflect the drawer's direction.

<!-- my-drawer.ts -->
protected openDrawer = model(false);

<!-- my-drawer.html -->
<!-- inside your drawer root -->
@if (openDrawer()) {
    <!-- overlay part -->
    <div bdDrawerContent></div>
}

bdDrawerTitle

Attribute directive that controls the accessible title to be announced when the drawer is opened. Not setting it will trigger a console warning.

<!-- my-drawer.ts -->
protected openDrawer = model(false);

<!-- my-drawer.html -->
<!-- inside your drawer root -->
@if (openDrawer()) {
    <!-- overlay part -->
    <div bdDrawerContent>
        <h2 bdDrawerTitle></h2>
    </div>
}

bdDrawerCloseButton

Attribute directive that controls the optional close button to be displayed in the drawer.

<!-- my-drawer.ts -->
protected openDrawer = model(false);

<!-- my-drawer.html -->
<!-- inside your drawer root -->
@if (openDrawer()) {
    <!-- overlay part -->
    <div bdDrawerContent>
        <button bdDrawerCloseButton aria-label="Close drawer"></button>
    </div>
}

API Reference

Input	Type	Default
`direction`	`'left''right''top''bottom'`	`'bottom'`
`dismissible`	`boolean`	`true`
`hideHandleBar`	`boolean`	`false`
`modal`	`boolean`	`true`
`open`	`model`	`false`

Considerations

Drawer

On this page