CngxDrawer

DirectivePrimaryv0.1.0WCAG AA

projects/common/layout/drawer/drawer.directive.ts

Import#

import { CngxDrawer } from '@cngx/common/layout'

Description#

State owner for a drawer / sidebar system.

Holds the open/close state and handles the Escape key. Supports both controlled ([cngxDrawerOpened]="signal()") and uncontrolled (internal state via open() / close() / toggle()) modes.

Child directives (CngxDrawerPanel, CngxDrawerContent) receive a reference to this directive via an explicit input - no ancestor injection.

Uncontrolled

<div cngxDrawer #drawer="cngxDrawer">
  <button (click)="drawer.toggle()">Menu</button>
  <nav [cngxDrawerPanel]="drawer" position="left">…</nav>
  <main [cngxDrawerContent]="drawer">…</main>
</div>

Controlled

<div cngxDrawer [cngxDrawerOpened]="sidebarOpen()"
     (openedChange)="sidebarOpen.set($event)">
  …
</div>

https://cngxjs.github.io/cngx/examples/#/common/layout/drawer/basic-scroll-lock-backdrop https://cngxjs.github.io/cngx/examples/#/common/layout/drawer/controlled-mode https://cngxjs.github.io/cngx/examples/#/common/layout/drawer/direction-all-four-sides https://cngxjs.github.io/cngx/examples/#/common/layout/drawer/events-openedchange-closed https://cngxjs.github.io/cngx/examples/#/common/layout/drawer/mode-over-push-side https://cngxjs.github.io/cngx/examples/#/common/layout/drawer/pattern-consumer-wiring

Metadata#

Selector: [cngxDrawer]
Export as: cngxDrawer

Host#

Bound classes: cngx-drawer--opened ← opened
Listeners: keydown.escape → close

Index#

Inputs#

openedInput#boolean | undefined

input()

Controlled opened state. When bound, takes precedence over internal state.

default undefined, { alias: 'cngxDrawerOpened' }

Outputs#

closed#void

output()

Emitted when the drawer closes. Convenience shorthand for close-only listeners.

openedChange#boolean

output()

Emitted when the opened state changes. Wire to a signal for two-way binding.

Methods#

close#void

Closes the drawer.

open#void

Opens the drawer.

toggle#void

Toggles the drawer between open and closed.

HostBindings#

Binding	Expression
`[class.cngx-drawer--opened]`	`opened()`

HostListeners#

Event	Handler
`(keydown.escape)`	`keydown.escape()`

CngxDrawer

Import#

Description#

Uncontrolled#

Controlled#

Related#

Metadata#

Host#

Index#

Methods

Inputs

Outputs

Derived State

HostBindings

HostListeners