Decoding Angular Material Library Series - Accordion with Expansion Panel.

This article explains the core pieces of Accordion with Expansion Panel source code from Angular Material Library. You can go through 'getting started blog' for a better understanding of the setup.

Here is PDF if the image is a blur

Below is a quick high-level breakdown of each directive/component to building Accordion with Expansion Panel.

• CdkAccordion - Directive whose purpose is to manage the expanded state of CdkAccordionItem children.
• CdkAccordionItem - An 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.
• MatAccordionBase - Base interface for a `MatAccordion`.
• MatAccordion - Directive for a Material Design Accordion.
• MatExpansionPanel - This component can be used as a single element to show expandable content, or as one of the multiple children of an element with the MatAccordion directive attached.
• MatExpansionPanelHeader - This component corresponds to the header element of an `<mat-expansion-panel>`.
• MatExpansionPanelDescription - This directive is to be used inside of the MatExpansionPanelHeader component.
• MatExpansionPanelTitle - This directive is to be used inside of the MatExpansionPanelHeader component.
• MatExpansionPanelContent - Expansion panel content directive, that will be rendered lazily after the panel is opened for the first time.
• MatExpansionPanelActionRow - This directive is to be used to project content in the footer of the panel.

Here is the reference documentation - expansion.md and implementation guide

Note: The HTML template for the component is mainly 'content projection' and all the logic lives in the *.ts files which are well documentation with the source code.