app.component.html
<h2 style="padding-top:25px; padding-bottom:25px;">
Angular Material - How to use Expansion Panel
</h2>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>Title: Angular</mat-panel-title>
<mat-panel-description>
Description: I am Angular.
</mat-panel-description>
</mat-expansion-panel-header>
<p>
Content: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque nec bibendum ligula. Pellentesque imperdiet
non massa at sodales. Cras nibh elit, iaculis id semper in,
euismod eu ante. Morbi ac massa pellentesque, porta
velit sed, elementum ipsum. Duis sed risus sit amet tellus
euismod consequat sed a ante. Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
</p>
</mat-expansion-panel>
app.module.ts [import]
import {MatExpansionModule} from '@angular/material/expansion'
- angular material - How to use Accordion
- 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