Interface representing the API for an accordion component.
collapse(
itemId):void
Given the itemId, will collapse the corresponding accordion-item.
If the itemId is not valid, nothing will happen.
• itemId: string
void
collapseAll():
void
It will collapse all the accordion-items in the accordion.
void
expand(
itemId):void
Given the itemId, will expand the corresponding accordion-item.
If the itemId is not valid, nothing will happen.
• itemId: string
void
expandAll():
void
It will expand all the items in the accordion.
If closeOthers is true it will expand only the last accordion-item.
void
registerItem(
itemConfig?):AccordionItemWidget
Creates a new accordionItem.
• itemConfig?: PropsConfig<AccordionItemProps>
toggle(
itemId):void
Given the itemId, will toggle the corresponding accordion-item.
If the itemId is not valid, nothing will happen.
• itemId: string
void
Directive to represent the body of an accordion item.
This directive provides a template reference for the AccordionItemContext.
Directive for creating an accordion component.
This directive extends the BaseWidgetDirective and provides various inputs and outputs
to customize the behavior and appearance of the accordion and its items.
className:
undefined|string
CSS classes to be applied on the widget main container
''
closeOthers:
undefined|boolean
If true, only one accordion-item at the time can stay open.
false
itemAnimated:
undefined|boolean
If true, accordion-item will be animated.
true
itemBodyClassName:
undefined|string
CSS classes to add on the accordion-item body DOM element.
''
itemBodyContainerClassName:
undefined|string
CSS classes to add on the accordion-item body container DOM element. The accordion-item body container is the DOM element on what the itemTransition is applied.
''
itemButtonClassName:
undefined|string
CSS classes to add on the accordion-item toggle button DOM element.
''
itemClassName:
undefined|string
CSS classes to add on the accordion-item DOM element.
''
itemDestroyOnHide:
undefined|boolean
If true, the accordion-item body container will be removed from the DOM when the accordion-item is collapsed. It will be just hidden otherwise.
true
itemHeaderClassName:
undefined|string
CSS classes to add on the accordion-item header DOM element.
''
itemHeadingTag:
undefined|string
The html tag to use for the accordion-item-header.
''
itemHidden:
EventEmitter<string>
An event fired when an item is hidden.
Event payload is the id of the item.
() => {}itemShown:
EventEmitter<string>
An event fired when an item is shown.
Event payload is the id of the item.
() => {}itemStructure:
SlotContent<AccordionItemContext>
Structure of the accordion-item. The default item structure is: accordion-item
contains accordion header and accordion-item body container; the accordion header contains the accordion button
(that contains header), while the accordion-item body container contains the accordion body (that contains children).
The itemTransition is applied on this element.
It is a prop of the accordion-item.
itemTransition:
undefined|TransitionFn
The transition to use for the accordion-item body-container when the accordion-item is toggled.
collapseVerticalTransition
getapi():W["api"]
Retrieves the widget api
W["api"]
the widget api
getdirectives():W["directives"]
Retrieves the widget directives
W["directives"]
the widget directives
getstate():AngularState<W>
Retrieves the widget state as an Angular Signal
AngularState<W>
the widget state
Interface representing the directives used in the Accordion component.
accordionDirective:
Directive
Directive to put on the accordion DOM element
Directive to be used as an accordion header.
This directive provides a template reference for the AccordionItemContext.
Interface representing the API for an accordion item.
collapse():
void
It will collapse the accordion-item.
void
expand():
void
It will expand the accordion-item.
void
initDone():
void
Method to be called after the initialization to allow animations.
void
toggle():
void
It will toggle the accordion-item.
void
AccordionItemComponent is a component that represents an item within an accordion.
animated:
undefined|boolean
If true, accordion-item will be animated.
bodyClassName:
undefined|string
CSS classes to add on the accordion-item body DOM element.
bodyContainerClassName:
undefined|string
CSS classes to add on the accordion-item body container DOM element. The accordion-item body container is the DOM element on what the itemTransition is applied.
buttonClassName:
undefined|string
CSS classes to add on the accordion-item collapse DOM element.
children:
SlotContent<AccordionItemContext>
Content present in the accordion body.
It is a prop of the accordion-item.
className:
undefined|string
CSS classes to be applied on the widget main container
''
destroyOnHide:
undefined|boolean
If true, the accordion-item body container will be removed from the DOM when the accordion-item is collapsed. It will be just hidden otherwise.
disabled:
undefined|boolean
If true, the accordion-item will be disabled.
It will not react to user's clicks, but still will be possible to toggle programmatically.
header:
SlotContent<AccordionItemContext>
Content present in the accordion button inside the accordion header.
It is a prop of the accordion-item.
headerClassName:
undefined|string
CSS classes to add on the accordion-item header DOM element.
headingTag:
undefined|string
The html tag to use for the accordion-item-header.
hidden:
EventEmitter<void>
An event fired when an item is hidden.
id:
undefined|string
The id of the accordion-item. It can be used for controlling the accordion-item via the accordion api.
shown:
EventEmitter<void>
An event fired when an item is shown.
structure:
SlotContent<AccordionItemContext>
Structure of the accordion-item. The default item structure is: accordion-item
contains accordion header and accordion-item body container; the accordion header contains the accordion button
(that contains header), while the accordion-item body container contains the accordion body (that contains children).
The itemTransition is applied on this element.
It is a prop of the accordion-item.
transition:
undefined|TransitionFn
The transition to use for the accordion-item body-container when the accordion-item is toggled.
visible:
undefined|boolean
If true, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).
visibleChange:
EventEmitter<boolean>
An event fired when the visible value changes.
Event payload is the new value of visible.
getapi():W["api"]
Retrieves the widget api
W["api"]
the widget api
getdirectives():W["directives"]
Retrieves the widget directives
W["directives"]
the widget directives
getstate():AngularState<W>
Retrieves the widget state as an Angular Signal
AngularState<W>
the widget state
ngAfterViewInit():
void
A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.
void
AfterViewInit.ngAfterViewInit
Represents the context for an accordion item within the accordion component.
api:
AccordionItemApi
all the api functions to interact with the widget
directives:
AccordionItemDirectives
directives to be used on html elements in the template of the widget or in the slots
state:
AngularState<AccordionItemWidget>
the state of the widget
constaccordionItemDefaultSlotStructure:SlotContent<AccordionItemContext>
Represents the default slot structure for an accordion item.
Interface representing the directives used in an accordion item.
bodyContainerAttrsDirective:
Directive
Directive to apply aria attributes to the expanded body panel
bodyContainerDirective:
Directive
Directive to be put on the accordion-item body container. It will handle the animation.
bodyDirective:
Directive
Directive to put on the accordion-item body.
buttonDirective:
Directive
Directive to put on the button element that will control the collapsing of the accordion-item.
headerDirective:
Directive
Directive to put on the accordion-item header that will contain the button element.
itemDirective:
Directive
Directive to be put on the accordion-item. It will handle adding the accordion-item to the accordion.
toggleDirective:
Directive
Directive to use in special cases, if the accordion header does not use a button element to control the collapsing.
transitionDirective:
Directive
Directive to apply the itemTransition
Represents the properties for an Accordion item component.
animated:
boolean
If true, accordion-item will be animated.
bodyClassName:
string
CSS classes to add on the accordion-item body DOM element.
bodyContainerClassName:
string
CSS classes to add on the accordion-item body container DOM element. The accordion-item body container is the DOM element on what the itemTransition is applied.
buttonClassName:
string
CSS classes to add on the accordion-item collapse DOM element.
children:
SlotContent<AccordionItemContext>
Content present in the accordion body.
It is a prop of the accordion-item.
className:
string
CSS classes to be applied on the widget main container
''
destroyOnHide:
boolean
If true, the accordion-item body container will be removed from the DOM when the accordion-item is collapsed. It will be just hidden otherwise.
disabled:
boolean
If true, the accordion-item will be disabled.
It will not react to user's clicks, but still will be possible to toggle programmatically.
header:
SlotContent<AccordionItemContext>
Content present in the accordion button inside the accordion header.
It is a prop of the accordion-item.
headerClassName:
string
CSS classes to add on the accordion-item header DOM element.
headingTag:
string
The html tag to use for the accordion-item-header.
id:
string
The id of the accordion-item. It can be used for controlling the accordion-item via the accordion api.
onHidden: () =>
void
An event fired when an item is hidden.
void
onShown: () =>
void
An event fired when an item is shown.
void
onVisibleChange: (
visible) =>void
An event fired when the visible value changes.
Event payload is the new value of visible.
• visible: boolean
void
structure:
SlotContent<AccordionItemContext>
Structure of the accordion-item. The default item structure is: accordion-item
contains accordion header and accordion-item body container; the accordion header contains the accordion button
(that contains header), while the accordion-item body container contains the accordion body (that contains children).
The itemTransition is applied on this element.
It is a prop of the accordion-item.
transition:
TransitionFn
The transition to use for the accordion-item body-container when the accordion-item is toggled.
visible:
boolean
If true, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).
Represents the state of an accordion item, extending the core item state and additional properties specific to the accordion item.
bodyClassName:
string
CSS classes to add on the accordion-item body DOM element.
bodyContainerClassName:
string
CSS classes to add on the accordion-item body container DOM element. The accordion-item body container is the DOM element on what the itemTransition is applied.
buttonClassName:
string
CSS classes to add on the accordion-item collapse DOM element.
children:
SlotContent<AccordionItemContext>
Content present in the accordion body.
It is a prop of the accordion-item.
className:
string
CSS classes to be applied on the widget main container
''
disabled:
boolean
If true, the accordion-item will be disabled.
It will not react to user's clicks, but still will be possible to toggle programmatically.
header:
SlotContent<AccordionItemContext>
Content present in the accordion button inside the accordion header.
It is a prop of the accordion-item.
headerClassName:
string
CSS classes to add on the accordion-item header DOM element.
headingTag:
string
The html tag to use for the accordion-item-header.
id:
string
The id of the accordion-item. It can be used for controlling the accordion-item via the accordion api.
shouldBeInDOM:
boolean
If true the content of the accordion-item collapse should be in DOM. Its value depends on the
value of the visible and destroyOnHide.
structure:
SlotContent<AccordionItemContext>
Structure of the accordion-item. The default item structure is: accordion-item
contains accordion header and accordion-item body container; the accordion header contains the accordion button
(that contains header), while the accordion-item body container contains the accordion body (that contains children).
The itemTransition is applied on this element.
It is a prop of the accordion-item.
visible:
boolean
If true, the accordion-item will be visible (expanded). Otherwise, it will be hidden (collapsed).
Directive that represents the structure of an accordion item.
This directive provides a template reference for the AccordionItemContext. It also includes a static method to guard the template context type.
AccordionItemWidget:
Widget<AccordionItemProps,AccordionItemState,AccordionItemApi,AccordionItemDirectives>
Represents a widget for an accordion item.
Represents the state of an AccordionItem component.
className:
string
CSS classes to be applied on the widget main container
''
closeOthers:
boolean
If true, only one accordion-item at the time can stay open.
false
itemAnimated:
boolean
If true, accordion-item will be animated.
true
itemBodyClassName:
string
CSS classes to add on the accordion-item body DOM element.
''
itemBodyContainerClassName:
string
CSS classes to add on the accordion-item body container DOM element. The accordion-item body container is the DOM element on what the itemTransition is applied.
''
itemButtonClassName:
string
CSS classes to add on the accordion-item toggle button DOM element.
''
itemClassName:
string
CSS classes to add on the accordion-item DOM element.
''
itemDestroyOnHide:
boolean
If true, the accordion-item body container will be removed from the DOM when the accordion-item is collapsed. It will be just hidden otherwise.
true
itemHeaderClassName:
string
CSS classes to add on the accordion-item header DOM element.
''
itemHeadingTag:
string
The html tag to use for the accordion-item-header.
''
itemStructure:
SlotContent<AccordionItemContext>
Structure of the accordion-item. The default item structure is: accordion-item
contains accordion header and accordion-item body container; the accordion header contains the accordion button
(that contains header), while the accordion-item body container contains the accordion body (that contains children).
The itemTransition is applied on this element.
It is a prop of the accordion-item.
itemTransition:
TransitionFn
The transition to use for the accordion-item body-container when the accordion-item is toggled.
collapseVerticalTransitiononItemHidden: (
itemId) =>void
An event fired when an item is hidden.
Event payload is the id of the item.
• itemId: string
void
() => {}onItemShown: (
itemId) =>void
An event fired when an item is shown.
Event payload is the id of the item.
• itemId: string
void
() => {}Represents the state of an Accordion component.
className:
string
CSS classes to be applied on the widget main container
''
itemStructure:
SlotContent<AccordionItemContext>
Structure of the accordion-item. The default item structure is: accordion-item
contains accordion header and accordion-item body container; the accordion header contains the accordion button
(that contains header), while the accordion-item body container contains the accordion body (that contains children).
The itemTransition is applied on this element.
It is a prop of the accordion-item.
itemWidgets:
AccordionItemWidget[]
Array containing all the accordion-items contained in the accordion.
AccordionWidget:
Widget<AccordionProps,AccordionState,AccordionApi,AccordionDirectives>
Represents an Accordion widget type.
createAccordion(
props?):AccordionWidget
Create an AccordionWidget with given config props
• props?: PropsConfig<AccordionProps>
an AccordionWidget
createAccordionItem(
props?):AccordionItemWidget
Create an AccordionItemWidget with given config props
• props?: PropsConfig<AccordionItemProps>
an AccordionItemWidget
factoryCreateAccordion(
itemFactory?,accordionItemProps?,accordionConfig?,accordionValidator?):WidgetFactory<AccordionWidget>
Create an accordion WidgetFactory based on a item factory and the list of item props that should inherit from the parent accordion
• itemFactory?: WidgetFactory<AccordionItemWidget>
the item factory
• accordionItemProps?: string[]
the list of item props
• accordionConfig?: AccordionProps
the default accordion config
• accordionValidator?: ConfigValidator<AccordionProps>
the validator of props
WidgetFactory<AccordionWidget>
the accordion widget factory
getAccordionDefaultConfig():
AccordionProps
Retrieve a shallow copy of the default accordion config
the default accordion config