angular material - How to use Accordion

app.component.html

<h2 style="padding-top:25px; padding-bottom:25px;">
  Angular Material - How to use Accordion
</h2>


<mat-accordion>
    
  <mat-expansion-panel hideToggle>
      <mat-expansion-panel-header>
        <mat-panel-title>Angular</mat-panel-title>
        <mat-panel-description>I am Angular.</mat-panel-description>
      </mat-expansion-panel-header>
      <p>This is Angular content.</p>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>React</mat-panel-title>
      <mat-panel-description>I am React.</mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is React content.</p>
  </mat-expansion-panel>

  <mat-expansion-panel>
    <mat-expansion-panel-header>
      <mat-panel-title>Vue</mat-panel-title>
      <mat-panel-description>I am Vue.</mat-panel-description>
    </mat-expansion-panel-header>
    <p>This is Vue content.</p>
  </mat-expansion-panel>

</mat-accordion>

app.module.ts [import]

import {MatExpansionModule} from '@angular/material/expansion'

More Angular tutorials

• angular material - How to use Expansion Panel
• angular material - Open Accordion multiple panels at once
• angular material - How to disable a panel in Accordion
• angular material - How to hide Accordion panels toggle icon
• angular material - Icon inside Expansion Panel header
• angular material - Show Accordion toggle icon on left
• angular material - Open & close Accordion all panels at once
• angular material - Determine an Expansion Panel is opened or closed
• angular material - Determine an Expansion Panel is disabled or enabled
• angular material - How to toggle Expansion Panel expanded state
• angular material - Initially expand a panel in Accordion
• angular material - Expansion Panel expandedChange event
• angular material - How to change Expansion Panel header height
• angular material - List items separator
• angular material - How to generate List items from array