API for accordion

API reference for Angular CDK accordion

import {CdkAccordionModule} from '@angular/cdk/accordion';

A basic directive expected to be extended and decorated as a component. Sets up all events and attributes needed to be managed by a CdkAccordion parent.

Selector: cdk-accordion-item [cdkAccordionItem]

Exported as: cdkAccordionItem
Properties
Name Description
@Input({ transform: booleanAttribute })

disabled: boolean

Whether the AccordionItem is disabled.

@Input({ transform: booleanAttribute })

expanded: boolean

Whether the AccordionItem is expanded.

@Output()

closed: EventEmitter<void>

Event emitted every time the AccordionItem is closed.

@Output()

destroyed: EventEmitter<void>

Event emitted when the AccordionItem is destroyed.

@Output()

opened: EventEmitter<void>

Event emitted every time the AccordionItem is opened.

accordion: inject<CdkAccordion>(CDK_ACCORDION, { optional: true, skipSelf: true })!

id: string

The unique AccordionItem id.

Methods
close

Sets the expanded state of the accordion item to false.

open

Sets the expanded state of the accordion item to true.

toggle

Toggles the expanded state of the accordion item.

Directive whose purpose is to manage the expanded state of CdkAccordionItem children.

Selector: cdk-accordion [cdkAccordion]

Exported as: cdkAccordion
Properties
Name Description
@Input({ transform: booleanAttribute })

multi: boolean

Whether the accordion should allow multiple expanded accordion items simultaneously.

id: string

A readonly id value to use for unique selection coordination.

Methods
closeAll

Closes all enabled accordion items.

openAll

Opens all enabled accordion items in an accordion where multi is enabled.

Injection token that can be used to reference instances of CdkAccordion. It serves as alternative token to the actual CdkAccordion class which could cause unnecessary retention of the class and its directive metadata.

const CDK_ACCORDION: InjectionToken<CdkAccordion>;
Azure & Blue theme selected.