The expansion panel is a component that we can toggle on and off to show more or less of the content.
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;