Skip to main content

angular material - Open & close Expansion Panel on button click

app.component.html 

<h2 style="padding-top:25px; padding-bottom:25px;">
  Angular Material - 
    How to open and close Expansion Panel on button click
</h2>


<div style="margin-bottom:25px;">
  <button 
    mat-raised-button color="primary" 
    (click)="panel.open()">
      Open Panel
  </button>
  &nbsp;
  <button 
    mat-raised-button color="warn" 
    (click)="panel.close()">
      Close Panel
  </button>
</div>


<mat-expansion-panel #panel>
  <mat-expansion-panel-header>
    <mat-panel-title>Laravel</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
Labels: