GET STARTED

Import

Import only the standalone sections used by the template.

import {
  NeuralDrawer,
  NeuralDrawerHeader,
  NeuralDrawerBody,
  NeuralDrawerFooter,
  NeuralDrawerInitialFocus,
} from '@neural-ng/core/drawer';

@Component({ imports: [
  NeuralDrawer, NeuralDrawerHeader, NeuralDrawerBody,
  NeuralDrawerFooter, NeuralDrawerInitialFocus,
] })

Basic composition

Header and footer remain optional. The body owns independent scrolling while the panel stays in the browser top layer.

Logical positions

Start and end follow document direction. Top and bottom span the viewport width using the same native lifecycle.

Controlled Signal state

open is a model input, so one state source can drive template and imperative interactions.

Non-modal panel

Set modal false when the page must remain interactive. The Popover top layer keeps the panel above the topbar without making background content inert.

Dismiss policy

Escape and backdrop dismissal can be disabled independently. A visible close path must always remain.

Lifecycle and close reasons

opened confirms top-layer entry. closed reports API, Escape, backdrop, close-button or native intent.

Unstyled and typed slots

Headless mode retains native dialog behavior, placement, focus and structural hooks while consumer classes own every visual decision.

Beta boundary

Native semantics

Modal mode uses showModal(); non-modal mode uses show(). Modal background content becomes inert through the browser.

Accessible name

Prefer a visible heading connected through ariaLabelledby. Use ariaLabel when no visible title exists and ariaDescribedby for supporting context.

Focus lifecycle

neuralDrawerInitialFocus receives focus after opening. The original trigger regains focus after every completed close.

Keyboard

Escape follows closeOnEscape. Modal Tab containment is native. Every blocked dismissal flow must expose an obvious focusable close or completion action.

RTL positions

Start opens from the right and end from the left under RTL. Top and bottom remain unchanged.

SSR and hydration

Server output remains a closed native dialog. Top-layer, active-element and focus operations run only after browser hydration.

Inputs

Outputs

Methods

Sections

Class slots

Types

Deprecated aliases

DrawerComponent, the old section component names and DrawerInitialFocusDirective remain only for compatibility. New code and generated output must use NeuralDrawer*.

Surface

Layout

Sections

Motion