Interface representing the API for a collapsible component.
close():
void
Triggers collapse closing programmatically.
void
open():
void
Triggers the collapse content to be displayed for the user.
void
toggle():
void
Toggles the collapse content visibility.
void
Directive to control the collapse behavior of an element.
readonlyanimated:InputSignalWithTransform<undefined|boolean,unknown>
If true, collapse closing and opening will be animated.
true
readonlyanimatedOnInit:InputSignalWithTransform<undefined|boolean,unknown>
If true, collapse opening will be animated at init time.
false
readonlyclassName:InputSignal<undefined|string>
CSS classes to be applied on the widget main container
''
readonlyhidden:OutputEmitterRef<void>
Callback called when the collapse is hidden.
() => {}
readonlyhorizontal:InputSignalWithTransform<undefined|boolean,unknown>
If true, collapse will be done horizontally.
false
readonlyid:InputSignal<undefined|string>
id of the collapse
''
readonlyshown:OutputEmitterRef<void>
Callback called when the collapse is shown.
() => {}
readonlyvisible:InputSignalWithTransform<undefined|boolean,unknown>
If true the collapse is visible to the user
true
readonlyvisibleChange:OutputEmitterRef<boolean>
Callback called when the collapse visibility changed.
() => {}The new visibility state of the collapse.
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
Interface representing the directives used in a collapse component.
collapseDirective:
Directive
Directive to apply the collapse.
triggerDirective:
Directive
Directive to apply to a trigger;
Properties for the Collapse component.
animated:
boolean
If true, collapse closing and opening will be animated.
true
animatedOnInit:
boolean
If true, collapse opening will be animated at init time.
false
className:
string
CSS classes to be applied on the widget main container
''
horizontal:
boolean
If true, collapse will be done horizontally.
false
id:
string
id of the collapse
''
onHidden: () =>
void
Callback called when the collapse is hidden.
void
() => {}onShown: () =>
void
Callback called when the collapse is shown.
void
() => {}onVisibleChange: (
visible) =>void
Callback called when the collapse visibility changed.
boolean
The new visibility state of the collapse.
void
() => {}visible:
boolean
If true the collapse is visible to the user
true
Represents the state of a Collapse component.
hidden:
boolean
Is true when the collapse is hidden. Compared to visible, this is updated after the transition is executed.
visible:
boolean
If true the collapse is visible to the user
true
ngOnInit():
Promise<void>
A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.
Promise<void>
OnInit.ngOnInit
CollapseWidget =
Widget<CollapseProps,CollapseState,CollapseApi,CollapseDirectives>
Represents a widget for handling collapse functionality.
This type defines the structure of a CollapseWidget, which includes properties, state, API, and directives necessary for managing the collapse behavior in the UI.
constcreateCollapse:WidgetFactory<CollapseWidget>
Create an CollapseWidget with given config props
an optional collapse config
an CollapseWidget
constgetCollapseDefaultConfig: () =>CollapseProps
Retrieve a shallow copy of the default collapse config
the default collapse config