Angular Material Expansion Panel

In this lecture let's take a look at Expansion panels and Accordions in angular material, expansion panels are basically panels which can collapse or expand to display additional details in a view let's take a look at some examples.

As always to get started import MatExpansionModule and add it to the MaterialComponents array in material.module.ts.

import { MatExpansionModule } from "@angular/material";

const MaterialComponents = [
  MatExpansionModule
];

Angular Material: Expansion panel

Now in the HTML let's create an expansion panel, the component to use is mat-expansion-panel every panel must contain a mat-expansion-panel-header component it is this header which displayed when the panel is collapsed, a header can contain a title and a description we use mat-panel-title and mat-panel-description to add a short description for the panel.

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-panel-title>Angular Material Course</mat-panel-title>
    <mat-panel-description>Total Lectures: 31</mat-panel-description>
  </mat-expansion-panel-header>
</mat-expansion-panel>

Angular Material: Expansion panel As you can see there is a title and the description as well, when I click on the header the panel expands. mat-expansion-panel

Right now the panel content is empty let's go back and add some text. Outside the mat-expansion-panel-header but within the mat-expansion-panel I'm gonna add a dummy paragraph and an action row that is provided by angular material using the component mat-action-row.

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-panel-title>Angular Material Course</mat-panel-title>
    <mat-panel-description>Total Lectures: 31</mat-panel-description>
  </mat-expansion-panel-header>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, quia.
    Enim labore nobis mollitia ducimus quam a rem ipsam harum!
  </p>
  <mat-action-row>
    <button mat-raised-button color="primary">Enroll</button>
  </mat-action-row>
</mat-expansion-panel>

angular material expansion content Save and take a look at the browser, if you click on the header the panel content slides down, the panel content can be any HTML you wish to and it's not limited to paragraph and action row, but this is pretty much how you create a basic expansion panel with angular material.

Angular Material: Accordion

Let's talk now about accordions an accordion is basically multiple expansion panels grouped together let's start off by duplicating the existing panel and changing the header and the description I'll leave the content and action row as it is.

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-panel-title>Angular Material Course</mat-panel-title>
    <mat-panel-description>Total Lectures: 31</mat-panel-description>
  </mat-expansion-panel-header>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, quia.
    Enim labore nobis mollitia ducimus quam a rem ipsam harum!
  </p>
  <mat-action-row>
    <button mat-raised-button color="primary">Enroll</button>
  </mat-action-row>
</mat-expansion-panel>

<mat-expansion-panel>
  <mat-expansion-panel-header>
    <mat-panel-title>Flutter Course</mat-panel-title>
    <mat-panel-description>Total Lectures: 20</mat-panel-description>
  </mat-expansion-panel-header>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, quia.
    Enim labore nobis mollitia ducimus quam a rem ipsam harum!
  </p>
  <mat-action-row>
    <button mat-raised-button color="primary">Enroll</button>
  </mat-action-row>
</mat-expansion-panel>

If you now take a look at the browser we should have two panels. angular material accordion the two panel though work independently, let's add the mat-accordion component to convert these panels into an accordion, so back in vscode I'm going to wrap the two expansion panels with the mat-accordion.

<mat-accordion>
  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>Angular Material Course</mat-panel-title>
      <mat-panel-description>Total Lectures: 31</mat-panel-description>
    </mat-expansion-panel-header>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, quia.
      Enim labore nobis mollitia ducimus quam a rem ipsam harum!
    </p>
    <mat-action-row>
      <button mat-raised-button color="primary">Enroll</button>
    </mat-action-row>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>Flutter Course</mat-panel-title>
      <mat-panel-description>Total Lectures: 20</mat-panel-description>
    </mat-expansion-panel-header>
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Officiis, quia.
      Enim labore nobis mollitia ducimus quam a rem ipsam harum!
    </p>
    <mat-action-row>
      <button mat-raised-button color="primary">Enroll</button>
    </mat-action-row>
  </mat-expansion-panel>
</mat-accordion>

mat-accordion If you now take a look at the browser we still have the tow panels but this time when you try to expand a panel the other one collapses automatically the accordion also adds a bit of margin between the panels which would otherwise not be present.

If all you want multiple panels to be shown at the same time you can set multi="true" on mat-accordion component as an attribute. mat accordion multi

You can see that we can now expand both the panels at the same time, and if you notice to the right of the panel header we have the toggle icon if at all some reason you want to hide this simply add the hideToggle attribute on the mat-accordion component. mat accordion hide toggle

You can see that the icon is hidden. This is pretty much the gist on how to create expansion panels and accordions with angular material.