Skip to main content

angular material - How to change Expansion Panel header height

app.component.html

<h2 style="padding-top:25px; padding-bottom:25px;">
  Angular Material - How to change Expansion Panel
    header expanded and collapsed height
</h2>


<mat-expansion-panel>
  
  <mat-expansion-panel-header 
    [expandedHeight]="'100px'"
    [collapsedHeight]="'30px'">

      <mat-panel-title>Rust</mat-panel-title>
      
  </mat-expansion-panel-header>

  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  Integer vitae semper massa. Donec maximus, dui nec
  dignissim blandit, ante odio varius ex,
  nec volutpat erat justo ac magna.

</mat-expansion-panel>
app.module.ts [import]

import {MatExpansionModule} from '@angular/material/expansion'
More Angular tutorials