Drawer

an optional Drawer config

a DrawerWidget

close: () => void

Trigger the closing of the drawer.

void

open: () => void

Trigger the opening of the drawer.

void

readonly animated: InputSignalWithTransform<boolean | undefined, unknown>

If true opening and closing will be animated.

true

readonly ariaDescribedBy: InputSignal<string | undefined>

aria-describedby attribute to use for the drawer element.

''

readonly ariaLabelledBy: InputSignal<string | undefined>

aria-labelledby attribute to use for the drawer element.

''

readonly backdrop: InputSignalWithTransform<boolean | undefined, unknown>

If true displays the backdrop element and disables the body scrolling, otherwise the body of the document is navigable

true

readonly backdropClass: InputSignal<string | undefined>

Classes to add on the backdrop DOM element.

''

readonly backdropTransition: InputSignal<TransitionFn | undefined>

The transition to use for the backdrop behind the drawer (if present).

fadeTransition

readonly bodyScroll: InputSignalWithTransform<boolean | undefined, unknown>

If true allows body scrolling when the drawer is open.

false

readonly children: InputSignal<SlotContent<DrawerContext>>

Template for the drawer body

readonly className: InputSignal<string | undefined>

CSS classes to be applied on the widget main container

'w-full'

readonly container: InputSignal<HTMLElement | null | undefined>

Which element should contain the drawer and backdrop DOM elements. If it is not null, the drawer and backdrop DOM elements are moved to the specified container. Otherwise, they stay where the widget is located.

typeof window !== 'undefined' ? document.body : null

readonly focusOnInit: InputSignalWithTransform<boolean | undefined, unknown>

If true focuses the drawer when it is opened.

true

readonly header: InputSignal<SlotContent<DrawerContext>>

Template for the drawer header

readonly hidden: OutputEmitterRef<void>

Event to be triggered when the transition is completed and the drawer is not visible.

() => {}

readonly maximizedChange: OutputEmitterRef<boolean>

Event to be triggered when the maximized state changes.

() => {}

readonly minimizedChange: OutputEmitterRef<boolean>

Event to be triggered when the minimized state changes.

() => {}

readonly resizable: InputSignalWithTransform<boolean | undefined, unknown>

If true, the drawer can be resized by the user.

false

readonly resizingChange: OutputEmitterRef<boolean>

Event to be triggered when the user starts or stops resizing the drawer.

() => {}

readonly shown: OutputEmitterRef<void>

Event to be triggered when the transition is completed and the drawer is visible.

() => {}

readonly size: InputSignalWithTransform<number | null | undefined, unknown>

Size of the drawer in pixel once the user start interacting. It corresponds to the height or the width depending on the drawer orientation

null

readonly sizeChange: OutputEmitterRef<number | null>

An event emitted when the drawer size changes (width or height depending on the orientation).

Event payload is equal to the newly selected width or height.

() => {}

readonly structure: InputSignal<SlotContent<DrawerContext>>

Global template for the drawer component

readonly transition: InputSignal<TransitionFn | undefined>

The transition function will be executed when the drawer is displayed or hidden.

collapseHorizontalTransition

readonly verticalTransition: InputSignal<TransitionFn | undefined>

The transition function for vertically positioned drawer (top, bottom) that will be executed when the drawer is displayed or hidden.

collapseVerticalTransition

readonly visible: InputSignalWithTransform<boolean | undefined, unknown>

If true, the drawer is shown; otherwise, it is hidden.

false

readonly visibleChange: OutputEmitterRef<boolean>

Event to be triggered when the visible property changes.

new value of the visible propery

() => {}

get api(): W["api"]

Retrieves the widget api

W["api"]

the widget api

get directives(): W["directives"]

Retrieves the widget directives

W["directives"]

the widget directives

get state(): AngularState<W>

Retrieves the widget state. Each property of the state is exposed through an Angular Signal

AngularState<W>

the widget state

backdropDirective: Directive

Directive to put on the backdrop DOM element.

backdropPortalDirective: Directive

Portal directive to put on the backdrop DOM element.

containerDirective: Directive

Directive to put on the container DOM element in order for the drawer to size correctly.

drawerDirective: Directive

Directive to put on the drawer DOM element.

drawerPortalDirective: Directive

Portal directive to put on the drawer DOM element.

splitterDirective: Directive

Directive to put on the splitter DOM element.

animated: boolean

If true opening and closing will be animated.

true

ariaDescribedBy: string

aria-describedby attribute to use for the drawer element.

''

ariaLabelledBy: string

aria-labelledby attribute to use for the drawer element.

''

backdrop: boolean

If true displays the backdrop element and disables the body scrolling, otherwise the body of the document is navigable

true

backdropClass: string

Classes to add on the backdrop DOM element.

''

backdropTransition: TransitionFn

The transition to use for the backdrop behind the drawer (if present).

fadeTransition

bodyScroll: boolean

If true allows body scrolling when the drawer is open.

false

children: SlotContent<DrawerContext>

Template for the drawer body

className: string

CSS classes to be applied on the widget main container

'w-full'

container: HTMLElement | null

Which element should contain the drawer and backdrop DOM elements. If it is not null, the drawer and backdrop DOM elements are moved to the specified container. Otherwise, they stay where the widget is located.

typeof window !== 'undefined' ? document.body : null

focusOnInit: boolean

If true focuses the drawer when it is opened.

true

header: SlotContent<DrawerContext>

Template for the drawer header

onHidden: () => void

Event to be triggered when the transition is completed and the drawer is not visible.

void

() => {}

onMaximizedChange: (isMaximized) => void

Event to be triggered when the maximized state changes.

boolean

void

() => {}

onMinimizedChange: (isMinimized) => void

Event to be triggered when the minimized state changes.

boolean

void

() => {}

onResizingChange: (isResizing) => void

Event to be triggered when the user starts or stops resizing the drawer.

boolean

void

() => {}

onShown: () => void

Event to be triggered when the transition is completed and the drawer is visible.

void

() => {}

onSizeChange: (size) => void

An event emitted when the drawer size changes (width or height depending on the orientation).

Event payload is equal to the newly selected width or height.

number | null

void

() => {}

onVisibleChange: (visible) => void

Event to be triggered when the visible property changes.

boolean

new value of the visible propery

void

() => {}

resizable: boolean

If true, the drawer can be resized by the user.

false

size: number | null

Size of the drawer in pixel once the user start interacting. It corresponds to the height or the width depending on the drawer orientation

null

structure: SlotContent<DrawerContext>

Global template for the drawer component

transition: TransitionFn

The transition function will be executed when the drawer is displayed or hidden.

collapseHorizontalTransition

verticalTransition: TransitionFn

The transition function for vertically positioned drawer (top, bottom) that will be executed when the drawer is displayed or hidden.

collapseVerticalTransition

visible: boolean

If true, the drawer is shown; otherwise, it is hidden.

false

backdropClass: string

Classes to add on the backdrop DOM element.

''

backdropHidden: boolean

Whether the backdrop is fully hidden. This can be true either because backdrop is false or because visible is false and there is no current transition.

children: SlotContent<DrawerContext>

Template for the drawer body

className: string

CSS classes to be applied on the widget main container

'w-full'

container: HTMLElement | null

Which element should contain the drawer and backdrop DOM elements. If it is not null, the drawer and backdrop DOM elements are moved to the specified container. Otherwise, they stay where the widget is located.

typeof window !== 'undefined' ? document.body : null

header: SlotContent<DrawerContext>

Template for the drawer header

hidden: boolean

Flag to show whether the drawer is fully hidden.

isVertical: boolean

Flag to show whether the drawer is vertically positioned.

resizable: boolean

If true, the drawer can be resized by the user.

false

size: number | null

Size of the drawer in pixel once the user start interacting. It corresponds to the height or the width depending on the drawer orientation

null

structure: SlotContent<DrawerContext>

Global template for the drawer component

visible: boolean

If true, the drawer is shown; otherwise, it is hidden.

false

DrawerProps

the default Drawer config