The expansion panel is a component that we can toggle on and off to show more or less of the content.

For each header, there is the title, the description, and the toggle icon.

Implementation

To begin, add the MatExpansionModule to the project. Go into the app module file and add the import statement. Then add it to the app.

Using the Panel

To create the panel, use the mat-expansion-panel element.

<mat-expansion-panel></mat-expansion-panel>

Then add the header, use the mat-expansion-panel-header element.

<mat-expansion-panel>

Inside the header element, we can define a title using the mat-panel-title element and the description using the mat-panel-description element.

<mat-expansion-panel>

The toggle icon is shown by default. To hide it, add the hideToggle property to the panel.

<mat-expansion-panel hideToggle>

Adding Content

To add content, place your elements inside the panel element, but outside of the header element. 

<mat-expansion-panel>

Adding the Action bar

For the action bar, use the mat-action-row element. 

<mat-expansion-panel>

Disabling the panel

To disable the panel, add the disabled directive to the panel element and set it to true. To enabled it, set it to false.

<mat-expansion-panel [disabled]="true">

Grouping Panels

We can also group multiple panels by using the mat-accordion element. With this, only 1 panel can be opened within the same group.

<mat-accordion>

To allow multiple panels to be opened at once inside the accordion element, apply the multi directive to it and set it to true. 

<mat-accordion [multi]="true">

Manually opening the Panels

Instead of using the default behavior to expand the panels we can expand it manually by setting the expanded attribute.

HTML

<mat-expansion-panel [expanded]="shouldOpenPanel1">

TypeScript

shouldOpenPanel1 = true;