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
new AccordionBodyDirective():
AccordionBodyDirective
templateRef:
TemplateRef
<any
>
static
ngTemplateContextGuard(dir
,context
):context is AccordionItemContext
• dir: AccordionBodyDirective
• context: unknown
context is AccordionItemContext
new AccordionDirective():
AccordionDirective
readonly
_widget:AngularWidget
<AccordionWidget
>
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
get
api():W
["api"
]
W
["api"
]
get
state():Signal
<WidgetState
<W
>>
Signal
<WidgetState
<W
>>
get
widget():ContextWidget
<W
>
ngOnChanges(
changes
):void
• changes: SimpleChanges
void
ngOnInit():
void
void
accordionDirective:
Directive
Directive to put on the accordion DOM element
new AccordionHeaderDirective():
AccordionHeaderDirective
templateRef:
TemplateRef
<any
>
static
ngTemplateContextGuard(dir
,context
):context is AccordionItemContext
• dir: AccordionHeaderDirective
• context: unknown
context is AccordionItemContext
click():
void
Action to be called when the user clicks on the accordion-item button. If the accordion-item is disabled nothing will happen.
void
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
new AccordionItemComponent():
AccordionItemComponent
readonly
_widget:AngularWidget
<AccordionItemWidget
>
readonly
ad:AccordionDirective
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
''
readonly
defaultSlots:WritableSignal
<Partial
<AccordionItemProps
>,Partial
<AccordionItemProps
>>
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.
slotBodyFromContent:
undefined
|AccordionBodyDirective
slotHeaderFromContent:
undefined
|AccordionHeaderDirective
slotStructureFromContent:
undefined
|AccordionItemStructureDirective
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.
get
api():W
["api"
]
W
["api"
]
get
state():Signal
<WidgetState
<W
>>
Signal
<WidgetState
<W
>>
get
widget():ContextWidget
<W
>
ngAfterContentChecked():
void
A callback method that is invoked immediately after the default change detector has completed checking all of the directive's content.
void
AfterContentChecked.ngAfterContentChecked
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
ngOnChanges(
changes
):void
• changes: SimpleChanges
void
ngOnInit():
void
void
AccordionItemContext:
WidgetSlotContext
<AccordionItemWidget
>
const
accordionItemDefaultSlotItemStructure:ComponentTemplate
<unknown
,"structure"
,AccordionItemDefaultSlotsComponent
>
new AccordionItemDefaultSlotsComponent():
AccordionItemDefaultSlotsComponent
structure:
TemplateRef
<AccordionItemContext
>
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
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).
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).
new AccordionItemStructureDirective():
AccordionItemStructureDirective
templateRef:
TemplateRef
<any
>
static
ngTemplateContextGuard(dir
,context
):context is AccordionItemContext
• dir: AccordionItemStructureDirective
• context: unknown
context is AccordionItemContext
AccordionItemWidget:
Widget
<AccordionItemProps
,AccordionItemState
,AccordionItemApi
,AccordionItemActions
,AccordionItemDirectives
>
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.
collapseVerticalTransition
onItemHidden: (
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
() => {}
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
,object
,AccordionDirectives
>
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